ТЕПЕРЬ — предлагается метод
порезки слова (любого другого элемента баннера)
для создания динамического эффекта прорисовки
элемента баннера на экране.
- Впечатываете это слово, выбираете нужную
гарнитуру и размер, в параметрах сглаживания
шрифта устанавливаете NONE и делаете копию слоя, в
меню Layer выбираете Type—»Render Layer — ваше название
перестало быть текстом — это просто графический
элемент, имеющий один (!) цвет.Дайте название слою
— например NAME.
- Сделайте новый слой. Дайте ему название TEMP — это
рабочий слой, кликать по нему придется часто, и
хорошо будет, если его легко можно будет находить,
когда вырастет количество слоев в вашем файле.
- Нарисуйте на этом слое однопиксельную линию (на
выбор — горизонтальную или вертикальную. Для
горизонтально ориентированного баннера, да еще
если в качестве тренировки рекомендую именно
горизонтальную) контрастного цвета. Любого —
этот цвет мы считать не будем, поскольку ЭТА
линия в нашем дизайне используется как
ИНСТРУМЕНТ, а не элемент баннера, поэтому лучше
сделать ее ярким цветом, да еще и таким, чтобы
гарантированно отличить от реальных деталей
баннера.
- В случае, если готовится таки горизонтальная
порезка названия (которое у нас уже забито в
предыдущем слое и сконвертировано в графику)
выберите инструмент move (кнопка c буквой "V" на
англицкой раскладке) и переместите линию в самый
верх по отношению к верхнему пикселю вашего
названия (можно вниз — направление
принципиального значения не имеет, важна
последовательность)
- Ctrl-click на слое TEMP — вы получили SELECT
прямоугольной области высотой в один пиксель. Click
на слое NAME, Ctrl-Shift-J — и из вашего названия
вырезалась в новый слой однопиксельная полоска.
Click на слое TEMP, при активном инструменте Move
стрелкой переместите вашу рабочую полоску на
один пиксель вниз, Ctrl-click на слое TEMP, перейдите на
слой NAME, Ctrl-Shift-J — вы получили еще один слой со
второй вырезанной полоской из вашего названия.
По этому алгоритму разрежьте на полоски все ваше
слово — слои последовательно будут создаваться,
и их имена будут иметь порядковые номера.
- Создайте еще один слой, например со слоганом,
описывающим суть рекламы. Цвет, опять же — из уже
существующих в палитре. Параметр сглаживания
текста — NONE.
- Поскольку рассматривается самый простой
вариант сложного баннера (извиняюсь за неудачный
каламбур) другие возможные элементы баннера
рассматривать не будем. Главное описать
технологию. Это я говорю к тому, что сейчас
приступаем к сборке заготовок в полноценную
анимацию.
Если со слоями вы работали в PhotoShop`e, то сейчас
самое время перейти в ImageReady — в меню File —» Jump to —»
Image Ready.
- В меню Window выбрать Show Animation — появится свиток, в
котором присутствует один фрейм. Сделайте все
слои макета UnVisible, оставив Visible только подложку и
рамочку.
- В свитке Animation в левом верхнем углу нажмите на
стрелочку — появится локальное меню свитка.
Выберите команду New Frame — вы создали фрейм,
который является дубликатом предыдущего — т.е.
со включенным слоем с подложкой и рамочкой.
- Включите свойство Visible для слоя с верхней
полоской вашего разрезанного элемента. (возможно
слой с названием "Name copy")
- Создайте еще один New Frame — в нем уже будет
подложка, рамочка и первый элемент, и сделайте
Visible слой со второй полоской имени ("Name copy 2").
- Таким образом — добавляя фреймы и включая слои
прорисуйте все имя, и когда будут включены все
слои имени обратитесь к свойству фрейма
"delay" и измените время задержки на, допустим,
величину в 5 секунд.
- Создайте еще один фрейм, проверьте, чтобы
параметр delay был маленьким, и включите видимость
слоя с графикой (в нашем примере тот самый
монитор).
- Новый фрейм — и выключите Visible нижней полоски
ИМЕНИ, и по соответствующей технологии в
обратном порядке последовательно, пофреймово
уберите ИМЯ.
- В новом фрейме включите слой со слоганом. Опять
необходимо увеличить задержку (delay) отображения
фрейма.
И для начала достаточно. Параметр цикличности
анимации установите в состояние Forever — и ваш
баннер будет прокручиваться всегда.
Обратитесь к свитку Optimize, установите параметры
gif - 4 colors — lossy:0 — No dither — Selective — No transparent
В свитке Animation в подменю Optimize Animation нужно
отметить оба checkbox.
Запомните полученый gif (File—»SaveOptimizedAs) и
запустите гиф — просмотреть его можно и из Image Ready
Plays Animation (движок внизу свитка Animation), и через File—»Preview
in в браузере, но если все сделано правильно —
ваша анимация будет проигрываться без сдвигов и
ошибок.
В заключении хотелось бы подчеркнуть тот факт,
что эту технологию можно применять и для
создания более сложной анимации — и при
ограниченном количестве цветов можно
изготавливать сложные и оригинальные баннеры.
Можно усложнить процесс прорисовки ИМЕНИ —
слои с разрезанными полосочками продублировать (правая
кнопка мыши на слое —»Dublicate Layer) и дубликатам
задать прозрачность слоя 50% (как вариант), и при
создании анимации генерить прорисовку сначала
полупрозрачных слоев, затем непрозрачных.
Подобный эффект можно создать с прорисовкой
вертикальных элементов — и при грамотной
композиции элементов баннера и хорошей цветовой
гамме баннер будет удачным.
Как вы могли заметить объект на слое TEMP в
конечном дизайне нами не использовался. Это
всего лишь инструмент для быстрого создания
маски, которой вырезается элемент анимации. И
маска эта не обязательно должна быть
однопиксельной полоской — это может быть любая
произвольная форма. Движение прорисовки также
может происходить в любом направлении, хоть по
диагонали, хоть сначала сверху, потом слева,
потом еще откуда нибудь.
Удачных вам анимированных баннеров!
