Магия Фотошопа

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Магия Фотошопа » Анимация » Урок - анимированный баннер


Урок - анимированный баннер

Сообщений 1 страница 3 из 3

1

Создаём анимированный баннер в Фотошоп

Анимированные Gif файлы были поводом для  многих шуток в дизайнерских обществах. Это потому, что анимационные картинки известны тем, что немного навязчивы и загромождают интернет-странички. Однако при правильном использовании, анимация может привлечь внимание к себе и заставить забыть о другом содержимом страницы. Сегодня мы покажем, как использовать Photoshop CS5 для создания анимированных GIF баннеров.  Давайте начнем!

Прим. переводчика: для этого урока подойдёт и Photoshop CS4.

Это тот самый баннер, о котором пойдёт речь в этом уроке.

http://photoshop-master.ru/lessons/les1412/1.gif

Шаг 1. Создайте новый документ размером 250 х 250 пикселей и установите разрешение (resolution) до 70 пикселей. Цвет фона для баннера будет такой # f2f2f2.

http://photoshop-master.ru/lessons/les1412/2.jpg

http://photoshop-master.ru/lessons/les1412/3.PNG

Шаг 2. Поместите логотип в верхней центральной части баннера

http://photoshop-master.ru/lessons/les1412/4.PNG

Шаг 3. Напишите слоган под логотипом.

http://photoshop-master.ru/lessons/les1412/5.PNG

Шаг 4. Нарисуйте прямоугольник  и установите цвет # 90909.

http://photoshop-master.ru/lessons/les1412/6.PNG

http://photoshop-master.ru/lessons/les1412/7.PNG

Откройте диалоговое окно Стили слоя (layer styles)и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) и размер  (size ) на 2px.

http://photoshop-master.ru/lessons/les1412/8.jpg

Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение  (Multiply) с непрозрачностью 28%.

http://photoshop-master.ru/lessons/les1412/9.jpg

Добавьте обводку и уменьшите её  размер до 1 пикс. Установите цвет # a31b1b.

http://photoshop-master.ru/lessons/les1412/10.jpg

Шаг 5. Добавим список рекламных предложений. У нас это будет Tutorials (Уроки), Articles (Статьи), Tips (Советы), Freebies (бесплатно),  Basix (Азы), Videos (Видео), Premuim (Премиум) как показано на рисунке.

http://photoshop-master.ru/lessons/les1412/11.PNG

Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).

http://photoshop-master.ru/lessons/les1412/12.PNG

Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы для PSDTUTS, но вы можете использовать все, что подходит вам.

http://photoshop-master.ru/lessons/les1412/13.PNG

Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.

http://photoshop-master.ru/lessons/les1412/14.PNG

Шаг 8. Создайте овальную фигуру  и установите цвет # fdfcfc.

http://photoshop-master.ru/lessons/les1412/15.PNG

http://photoshop-master.ru/lessons/les1412/16.PNG

Откройте диалоговое окно Стили слоя (layer styles) и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) и размер  (size ) на 1px.

http://photoshop-master.ru/lessons/les1412/17.jpg

Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках  все как есть.

http://photoshop-master.ru/lessons/les1412/18.jpg

Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity)  6%

http://photoshop-master.ru/lessons/les1412/19.jpg

http://photoshop-master.ru/lessons/les1412/20.jpg

Шаг 9. Теперь, когда мы закончили создание все наших слоёв, мы готовы приступить к работе по анимации. Во-первых, откройте панель анимации  Окно – Анимация (Window> Animation). Я буду использовать панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation).

Примечание: Эта функция доступна только в Photoshop Extended.

Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.

http://photoshop-master.ru/lessons/les1412/21.png

Шаг 10. Смотрите изображения ниже для инструкций о том, как вставлять ключевые кадры и где увеличивать непрозрачность. Для каждого созданного нами элемента  отдельный скриншот с инструкцией.

Прим. переводчика: ключевые кадры можно будет перемещать  мышкой. Так же можно выделить несколько ключевых кадров для перемещения.

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/step1.gif

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/step2.gif

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/step3.gif

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/step8.gif

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/step-5.gif

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/step6.gif

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/step7.gif

Шаг 11. Ваша Временная шкала (Timeline Animation),  должна выглядеть примерно так, как ниже.

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/Capture561.PNG

Шаг 12. Ну вот, мы и завершили нашу анимацию. Нажмите кнопку Пуск (Play), чтобы увидеть результат. Вы можете всё подстроить в случае необходимости. Чтобы сохранить ваш баннер, перейдите в меню Файл - Сохранить для веб и устройств (File - Save for Web & Devices). Установите настройки как  на скриншоте ниже и нажмите кнопку Сохранить.

http://d2f8dzk2mhcqts.cloudfront.net/0502_Animated_Banner/Capture24.png

Вот и все! Вот такой баннер у нас получился!

http://photoshop-master.ru/lessons/les1412/1.gif

Практика очень хорошо закрепляет теорию!

Автор: Vikram Creative
Переводчик: Рыбка.
Источники: photoshop-master.ru \ psd.tutsplus.com

0

2

хороший урок,но эта шкала...я всегда путаюсь в ней

0

3

BerryDy написал(а):

хороший урок,но эта шкала...я всегда путаюсь в ней

дело тренировок и опыта ))))

0


Вы здесь » Магия Фотошопа » Анимация » Урок - анимированный баннер