|
Интернет для профессионалов |
|
Делаем анимированный баннер в Adobe Image Ready
Вступление:
Придумывать какую-то концептуальную идею в этом уроке мы не будем, пусть каждый сам решит как он будет использовать свой дар :). Лишь незнание нам мешает воплотить фантазии. Вот с этим мы и будем бороться.
Что нам нужно
С начала следует естественно определиться с размером баннера. Пусть это будет наиболее распространенный вариант 468*60. Запасаемся следующими инструментами:
• руки, 2 штуки (можно больше), желательно не кривые + мышь, одной клавой не обойтись, сам знаю :)
• AdobeImageReady (идет вместе с AdobePhotoshop), использовалась версия 7.0, но подойдут и другие...
• Контент из которого будем делать баннер, они же картинки (размер и качество по желанию), логотипы, картинки
Шаг 1.
Открываем ImageReady. Жмем заветные клавиши "Ctrl+N" (Новое окно) и выставляем там следующие параметры (ширина, высота, прозрачный бэкграунд):
Вот и наше поле для действия. Давайте теперь ставить задачу. Наш баннер будет не сложный. Рекламить будем софт. Сначала у нас будет название продукта "ev-Killer" со слоганом "clearing all insecure information", затем будут появляться и исчезать две фразы: "eliminate all evidences" и "no one will know...". Все. Логотип софта будет на экране постоянно, менятся будет только текст - описание
Шаг 2.
Теперь давайте изучим поле нашего действия:
• Основное окно: тут мы и будем работать с каждым кадром по отдельности
• Окно кадров: управление кадрами - добавление, удаление, установка последовательности кадров, время показа кадра.
• Панель инструментов: все инструменты управления кадрами.
• Окно слоев: тут нужно остановиться поподробнее. В этом окне будут все ваши слои - тексты, логотип и так далее, все то, из чего будет состоять наш баннер - все это будет занимать свои собственные слои. Разделение по слоям помогает нам работать с каждым объектом по отдельности: перемещать его куда надо, задавать именно этому объекту стили. Создание слоя осуществляется кнопкой "Create a new layer" (листок с загнутым краем). Отключение слоя (чтобы его небыло видно) - нажатием на иконку глаза слева от картинки слоя. Также в этом окошке есть нужный нам параметр "Opacity" (Прозрачность), который указывает насколько слой будет просвечивать и показывать слои находящиеся под ним. Заметьте, слои в окне, которые будут находится выше будут перекрывать слои находящиеся ниже. Чтобы поместить слой выше просто нажмите на него и перенесите вверх, не отпуская мышку.
Если какое-то из окон у Вас отсутствует, просто включите его зайдя в меню "Window".
Шаг 3.
Сделаем первый кадр нашего клипа.
Совет: делайте ваш первый кадр информативнее, так как есть такие ситуации, когда анимация гифа не срабатывает или специально отключена, потому Ваш первый пустой кадр, после которого должно разворачиваться основное действие просто будет бесполезно занимать ценное пространство :(..
Рекомендация: Лучше всего с отдельными кадрами работать в PhotoShop'e, он очень удобен для редактирования изображений, которые мы потом соберем в ImageReady.
Нажимаем в поле меню "File" -> "Jump To" -> "Adobe Photoshop" ("Файл" -> "Перейти в..." -> "Adobe Photoshop"). Вот мы и попали с первым кадром в фотошоп. :) Зальем все каким-нибудь фоном, "Edit" -> "Fill" ("Редактирование" -> "Заливка"). Теперь давайте напишем название нашего софта и вставим его логотип. Самый просто спобоб - открыть сайт этой программы, нажать кнопку "Print Screen", перейти в PhotoShop, нажать Ctrl+V и аккуратненько вырезать логотип, или воспользоваться иструментом "Eraser Tool" ("Ластик"). Затем выбираем инструмент "Type Tool" ("Набор текста") в панели инструментов и пишем название продукта и слоган. Вот, что получилось у меня.
Просто подберите нужный шрифт и настройте Стили ("Layer" -> "Layer Style"). Так например для текста "ev-Killer" я использовал "Outer Glow" ("Layer" -> "Layer Style" -> "Outer Glow"):
Шаг 4.
В фотошопе нажимаем "File" -> Jump To -> AdobeImageReady, затем дублируем кадр. Нажав на соответствующую кнопку "Duplicate current frame".
И так у нас два кадра, опять возвращаемся в PhotoShop и теперь уже работаем со вторым кадром. Отключаем ненужный слой с надписью "clearing all insecure information" и создаем новый. Пишем текст "eliminating all evidences". Получается следующая картинка
Шаг 5.
Теперь давайте сделаем какой-нибудь простенький эффект появления и исчезновения этого текста. В PhotoShop'е дублируем слой "eliminating all evidences" ("Layer" -> "Duplicate Layer..."), отключаем продублированный слой нажав на иконку глаза в окне слоев (скроем его от глаз чужих :)), этот слой нам понадобится поздже. Теперь выбрав второй слой с текстом "eliminate all evidences" (который мы не скрыли) нажимаем "Filter" -> "Blur" -> "Motion Blur", отвечаем утвердительно на появившийся вопрос. В фильтре ставим: Angle (Угол) - 0 градусов, Distance (Расстояние) - 10 pixels (пикселей). Нажимаем "Ok", получится должно следующее
Поставьте прозрачность получившегося текста в окне слоев на 50%.
Шаг 6.
Желательно все это дело сохранить бы :). Теперь идем в ImageReady, во втором кадре у Вас должен быть логотип и размытая текстовка. Теперь делаем третий кадр. В нем скрываем слой с размытым текстом и включаем дублированный текст "eliminating allevidences". Итого:
Если что-то не вышло, то проверяйте :).
Шаг 7.
Идем далее. Делаем копию кадра номер 2
Берем получившуюся копию (кадр номер 3) и перетаскиваем не отпуская левой кнопки мыши в самый конец направо. Теперь все выглядит так:
Шаг 8.
Сделайте теже операции с текстом "no one will know...". Добавьте еще пустой кадр между сменой текста. Смотрите, что вышло у меня:
Теперь осталось сделать одну вещь, расставить время задержки на показ кадров. Что это значит? Это значит что для каждого кадра можно задать сколько по времени его показывать.
Нам понадобится поставить задержку следующим образом: 1,3,7 кадры - задержка 1 секунда. Все :) Смотрим, что получилось.
Простенько и красивенько :). Вот. Удачи вам в этом нелегком деле создания баннеров.
D-zain
http://patlah.ru
© "Бизнес-Энциклопедия" Патлах В.В. 2005-2010 гг.
|