С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создание анимированных баннеров в Photoshop CS5

Создание анимированных баннеров в Photoshop CS5

Вот так выглядит баннер, который вы будете создавать.

 

 

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

 

Шаг 1

 

Создайте новый документ размером в 250 х 250 пикселей и установить разрешение в 70 пикселей, цвет фона измените на # f2f2f2.

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

 

 

 


Шаг 2

 

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

 

 

 

 

Шаг 3

 

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

 

 

 

 

Шаг 4

 

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

 

 


 

 

 

 

 

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

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

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

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

Теперь добавьте Обводку (Stroke) и уменьшитt размер на 1 пиксель. Установите цвет # a31b1b.

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

Шаг 5

 

Добавьте несколько слоёв с текстом. В нашем случае мы добавили следующий текст: Tutorials, Articles, Tips, Freebies, Basix, Videos, Premuim, как показано на рисунке.

 

 

 

 

Растрируйте текстовые слои и создайте маску отсечения.

 

 

 

 

Шаг 6

 

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

 

 

 

 

Шаг 7

 

Чуть ниже картинки добавьте какой-нибудь текст.

 

 

 

 

Шаг 8

 

Создайте овальную область и залейте её  цветом # fdfcfc.

 

 

 

 

 

 

 

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

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

Далее добавьте Внутреннее свечение (Inner Glow), здесь оставьте все как есть.

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

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

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

Шаг 9

 

Теперь, когда вы закончили создание всех слоев, можно приступать к работе над анимацией. Во-первых, откройте панель анимации Окно> Анимация (Window> Animation). Я буду использовать анимацию по временной шкале (а не покадровую анимацию). 

 

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

 

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

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

Шаг 10

 

 

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

 

 

 

 

 

 

 

 

 

Шаг 11

 

Ваша шкала должна быть похожа на приведенный ниже пример.

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

Шаг 12

 

Мы завершили нашу анимацию. Нажмите кнопку Выполнить, чтобы увидеть ваш результат. Вы можете изменить его в случае необходимости. Чтобы сохранить баннер, перейдите в меню Файл> Сохранить для Web и устройств. Затем используйте настройки из следующего изображения и нажмите кнопку Сохранить.

 

 

Создание анимированных баннеров в Photoshop CS5

 

 

Окончательное изображение

 

Вот и все! Вы закончили!

 

 


Автор урока: Erasmo D'Onorio De Meo


Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 20.02.2012
  •   Просмотров: 14165
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Марина (26.12.2012 | 15:09)

Не очень понятен пункт 5

Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки