• Страница 1 из 1
  • 1
Модератор форума: Masquerade, Vexxius  
Форум » Дизайнерская мастерская » Уроки и прочее » [Урок] Простой и красивый анимированный баннер (Photoshop)
[Урок] Простой и красивый анимированный баннер
Nomelody
Скаут
Всем доброго времени суток.
Сегодня мы будем учиться делать анимированный юзербар или баннер.
Материалы для урока:

И так начнём:
Создаём файл любого размера, я создам 400х150:

Сперва заливаем всё чёрным цветом:

Дальше накладываем фон. Лично я выберу из стилей, которые можно скачать выше.

Во втором выделенном окне уберите обводку, лично мне больше нравиться без неё.
И так фон у нас готов, теперь наносим текст.
Я использовал шрифт "Urban Jungle".
На текст мы накладываем выделенный красным стиль.

Вот так у нас должно получиться.
Теперь начинаем рисовать анимацию. Для этого нам нужны в моём случае стрелочки. Они есть в стандартной палитре фигур Photoshop.
Выбираем инструмент "Произвольная фигура"
И открываем стрелки.

Дальше аккуратно рисуем 4 стрелки. По одной из каждого угла.
Вот что получится:

Объединяем все стрелки в один слой для удобства.
Теперь сделаем стрелки красивыми.
Накладываем стиль:

Ну что ж приступим к анимации.
И так открываем панель анимации:
Окно>Анимация.
Теперь делаем 4 копии слоя со стрелками и называем их Кадр 1 - Кадр 5.

Дальше создаём ещё 5 кадров анимации:

Теперь на 1ом кадре анимации выключаем все слои со стрелками:

На 2ом кадре включаем слой с названием "Кадр 1" и стираем стрелки оставляя только небольшую часть:

Теперь на 3ьем кадре анимации включаем слой "Кадр 2", выключаем слой "Кадр 1" и стираем стрелки оставляя часть чуть по больше:

По аналогии делаем так все анимационные кадры.
Теперь в настройках анимации ставим везде 0,1 сек, а на последнем кадре 0.5 сек:

Теперь выделяем все кадры анимации нажимая Ctrl + Клик ЛКМ.
Жмём Файл > Сохранить для Web и устройств.
И сохраняем с настройками как тут:

Если вы всё делали по уроку, то у вас всё получится. Пример готовой анимации смотрите у меня в подписи.
Если будут плюсы, то сделаю ещё уроки.
Сообщение # 1 отредактировано Nomelody - Четверг, 02.08.2012, 08:43
øk
Капрал
с анимациями и раньше работал но увидил кое что новое и кое что понял))) сяп))

Добавлено (02.08.2012, 17:14)
---------------------------------------------
моя робота в подписи)))

Сообщение # 2 написано 02.08.2012 в 17:14
Nomelody
Скаут
øk, рад, что хоть кто-то оценил)
Сообщение # 3 написано 02.08.2012 в 18:13
staff0rd
Скаут
А как фон наложить? smile У меня только на текст накладывается. sad
Сообщение # 4 написано 04.08.2012 в 13:10
øk
Капрал
Quote (staff0rd)
А как фон наложить? smile У меня только на текст накладывается. sad

создаем новый слой = заливаем любым цветом = применяем желаемый стиль
Сообщение # 5 написано 04.08.2012 в 14:46
staff0rd
Скаут
øk, как его применить то? smile
Сообщение # 6 написано 04.08.2012 в 14:50
øk
Капрал
Сообщение # 7 написано 04.08.2012 в 15:00
Whitе
★٩(̾●̮̮̃̾•̃̾)۶♫
del
Сообщение # 8 отредактировано Whitе - Суббота, 04.08.2012, 15:26
DIN31
Раздатчик плюшек
хороший урок
Сообщение # 9 написано 14.10.2012 в 11:49
Jokerrs
Скаут

Мое творение, с обводкой красивее)
Сообщение # 10 отредактировано Jokerrs - Воскресенье, 30.12.2012, 19:17
den187s
Капрал
Перезалей плиз стили и шрифты smile
Проклятие гениев - видеть то, что не замечают другие
Программирование - это искусство и наш смысл жизни.
Сообщение # 11 написано 07.01.2013 в 06:26
Destro777team
Скаут
Не плохо up полезный урок для новичков ok
Сообщение # 12 написано 28.01.2013 в 22:16
StartBack
Скаут
Хороший и понятный урок, новечки поймут)
Сообщение # 13 написано 30.01.2013 в 20:59
Форум » Дизайнерская мастерская » Уроки и прочее » [Урок] Простой и красивый анимированный баннер (Photoshop)
  • Страница 1 из 1
  • 1
Поиск: