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

Дизайн анимированного баннера в Фотошопе

В этом уроке я покажу вам, как использовать программу Adobe Photoshop для создания анимированных баннеров.

 

Я объясню вам, как работает панель Анимация  и как использовать её для создания сложной анимации с минимальными усилиями. Давайте начнем!

 

Предварительный просмотр

 

Вот такой баннер мы будем создавать.

 

 

 

 

А вот ещё один вариант с другим размером.

 

 

 


 

Примечание: Для этого урока я использовал панель Анимация, которая доступна только в версии Photoshop Extended. 

 

Шаг 1

 

Создайте новый документ в Photoshop размером в 728 на  90 пикселей. Возьмите инструмент Заливка (Paint Bucket Tool (G)) и залейте фон # 2f2f2f цветом.

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 2

 

Перейдите к верхней части главной страницы сайта Grafpedia и сделайте снимок экрана клавишей Print Screen (или возьмите этот образ). Нам нужно скопировать звездочки, чтобы мы могли использовать их в нашем баннере. 

 

Откройте новый документ в Photoshop и вставьте снимок экрана (Ctrl / Cmd + V). Затем выберите инструмент Прямоугольная область (Rectangular Marquee Tool (M)) и выделите звезды, как показано на рисунке ниже. Нажмите комбинацию клавиш Ctrl / Cmd + C, чтобы копировать то, что вы выделили. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 


Шаг 3

 

Вернитесь в свой первый документ и нажмите комбинацию клавиш Ctrl / Cmd + V, чтобы вставить ваше выделение. Назовите этот слой "звезды", щелкните на нём правой кнопкой мыши и в контекстном меню выберите команду Преобразовать в смарт-объект. Затем перейдите в меню Редактирование> Свободная трансформация (Edit> Free Transform (Ctrl / Cmd + T)), измените размер этого слоя, поверните его и переместите его в левую часть изображения. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 4

 

Дублируйте слой "звезды" (Ctrl / Cmd + J). Затем перейдите в меню Редактирование> Трансформирование> Отразить по горизонтали (Edit> Transform> Flip Horizontal) и переместите этот слой в правую часть вашего баннера. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 5

 

Выберите инструмент Горизонтальный текст (Type Tool (T)) и напишите слова "Find only on" в середине верхней части изображения, используя цвет # aca6a6 и шрифт Myriad Pro. Дважды щелкните на слой с текстом и используйте настройки из следующих изображений для Тень (Drop Shadow). Нажмите комбинацию клавиш Ctrl / Cmd + G, чтобы поставить этот слой внутри группы. Имя группы "Инфо". 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 6

 

Далее, используя инструмент Горизонтальный текст (Type Tool (T)), под первой строкой текста напишите слово "Grafpedia", используя цвет # ebe5e5. Дважды щелкните на слое с текстом и примените параметры как на рисунке ниже. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 7

 

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool  (U)), установите радиус скругления в 6 пикселей и используя цвет # 413e3e создайте прямоугольник с закругленными углами под текстом. Дважды щелкните на этом слое и установите параметры как показано на рисунке ниже. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 8

Выберите инструмент Горизонтальный текст (Type Tool (T)), скопируйте следующий текст и вставьте его в Ваш документ Photoshop. Установите цвет слоя этого текста на # dad5d5 и разместите его в центре. Затем откройте панель Символ ( Окно> Символ  (Window> Character)) и используйте настройки из следующих изображений. Я использовал шрифт Myriad Pro SemiBold курсивом с размером в 20 пикселей и расстоянием между строками текста в 30 пикселей.

 

27000 Photoshop Gradients

30000 Photoshop Layer Styles

1000 vectors files + vector icons

PSD Layouts for each tutorial

Stock images + Textures

Swatches + 1000 PS Brushes

 

С помощью инструмента Перемещение (Move Tool (V)), перетащите первую строку текста в середину Вашего прямоугольника с закругленными углами. Теперь, если нажать и удерживать клавишу Shift и нажимать на клавишу стрелка вверх три раза, то текст передвинется на 30 пикселей, а вторая строка текста будет в центре прямоугольника. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 9

 

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

 

Для этого сначала нажмите комбинацию клавиш Ctrl / Cmd + G, чтобы разместить текстовый слой внутри группы. Имя группе лайте "текст". Затем, удерживая клавишу Ctrl / Cmd нажмите на векторной маске слоя "Shape 1", чтобы выделить прямоугольник с закругленными углами. Убедитесь, что группа "текст" активна и перейдите в меню Слои> Слой-маска> Показать выделенную область (Layer> Layer Mask> Reveal Selection). Теперь, если вы будете перемещать текстовый слой, то вы заметите, что он не появляться за пределами прямоугольника с закругленными углами. 

 

Убедитесь, что первая строка текста находится в середине прямоугольника. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 10

 

Скройте группу "инфо" на некоторое время. Затем создайте новую группу и назовите её "призыв к действию". 

 

Выберите инструмент Горизонтальный текст (Type Tool (T)) и напишите текст  «призыв к действию», используя цвет # f1eaea. Добавьте Тень этому слою, используя настройки из следующих изображений. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 11

 

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool  (U)) и, используя цвет # 82b437, создайте ещё один прямоугольник с закругленными углами. Дважды щелкните на этом слое и установите параметры как на рисунке ниже. Назовите этот слой "кнопка". 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 12

 

Выберите инструмент Горизонтальный текст (Type Tool (T)) и, используя цвет # e7f3d5, напишите на кнопке фразу "Click here now",. Дважды щелкните на слое с текстом и используйте настройки из следующих изображений. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 13 - Анимация баннера

 

Мы закончили создание всех слоев. Теперь мы можем приступать к созданию анимации. 

 

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

 

На рисунке ниже я объяснил некоторые особенности панели Анимация

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 14

 

Перейдите в группу "инфо" на панели Анимация и нажмите на секундомер непрозрачности чтобы добавить первый кадр. Непрозрачность группы "инфо" на данный момент 0%. Теперь переместите индикатор времени в 00:15 и установите непрозрачность группы "инфо" в 100% на панели слоёв. Новый кадр будет добавлена ​​автоматически, потому что вы изменили настройки этого элемента. 

 

Теперь, если вы проиграете вашу анимацию, то непрозрачность группы "инфо" будет постепенно идти от 0% до 100%. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 15

 

Переместите индикатор времени в 01:00 и нажмите на кнопку секундомера на позиции текстового слоя группы "текст", чтобы добавить новый ключевой кадр. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 16

 

Переместите индикатор времени в 01:10. Затем убедитесь, что слой с текстом из группы "текст" активен. Выберите инструмент Перемещение (Move Tool (V)), удерживая нажатой клавишу Shift нажмите три раза на стрелку вверх, чтобы переместить текст на 30 пикселей вверх. Новый кадр будет добавлен ​​автоматически. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 17

 

На нужно, чтобы текст стоял на месте в течение некоторого периода времени, прежде чем двигался снова. Чтобы это сделать, нужно переместить индикатор времени в 02:00 и нажать на кнопку ключевого кадра с левой стороны от позиции секундомера, чтобы добавить новый ключевой кадр. В настоящее время положение текста не изменится в промежутке между 1:10 и 2:00. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 18

 

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

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 19

 

Переместите индикатор времени в 6:10 и нажмите на кнопку ключевого кадра непрозрачности группы "инфо", чтобы добавить новый ключевой кадр. Затем переместите индикатор времени в 06:20 и установите непрозрачность группы "инфо" в 0%.

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 20

 

Теперь нужно сделать видимой группу "призыв к действию". Убедитесь, что временной индикатор находится в 06:20 и нажмите на секундомер непрозрачности для добавления нового ключевого кадра. 

 

Переместите индикатор времени в 07:00 е и установите непрозрачность группы "призыв к действию" в 100%. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 21

 

Переместите индикатор времени в 09:20 и нажмите на кнопку ключевого кадра группы "призыв к действию". Непрозрачность этой группы будет оставаться 100%, пока не достигнет этого ключевого кадра. 

 

Теперь переместите индикатор времени в 10:00 и установите непрозрачность группы "призыв к действию" в 0%. 

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Шаг 22 - Сохранение анимации

 

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

 

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

 

 

Дизайн анимированного баннера в Фотошопе

 

 

Финальный результат

 

Вот финальный результат этого урока. Я надеюсь, что он вам понравился и вы узнали что-то новое. 

 

 

 

 

Создание баннеров с различными размерами

 

Вы можете использовать тот же метод, который я представил в этом учебнике для создания баннеров со всеми видами размеров. Ниже Вы можете увидеть другой баннер, который я создал с размерами в 200 на 125 пикселей. 

 

 

 

 


Автор урока: Команда сайта GRAFPEDIA


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

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

 



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


  • 25.04.2012
  •   Просмотров: 9311
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Sasha S (01.11.2013 | 18:37)
дохожу до создания анимации , и вижу что все группы находятся в одной группе.
 
Sasha S (05.11.2013 | 11:27)
Цитата: Sasha S
дохожу до создания анимации , и вижу что все группы находятся в одной группе.
 

проверь поочерёдность групп с первого шага .

урок очень хороший. скриншоты и пояснения совпадают полностью ! побольше таких уроков. Спасибо !
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по 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
Партнерские ссылки