Создание анимированного GIF баннера

Уроки по анимации

Модераторы: Globator, Сильфида, Любовь, NEWESTA

Правила форума
Уроки Photoshop по анимации - раздел предназначен для публикации своих и переводных уроков по анимации.
1. Публикация уроков с русскоязычных ресурсов не разрешается.
2. Если публикуете перевод урока с англоязычного сайта, то не забывайте указывать автора и ссылку на первоисточник.
3. Для собственных уроков - подписывайте ник или имя.
4. Внимание: для вопросов, связанных с Adobe Photoshop, есть раздел Вопросы по работе в Adobe Photoshop.
5. Бессмысленные комментарии к урокам типа: "круто", "супер" и т.п., а также комментарии содержащие одни смайлы - будут удаляться без предупреждения.
6. Запрещено размещение материалов без указания авторов и ссылки на первоисточник, а также размещение ссылок на скачивание таких материалов на depositfiles.com, rapidshare.com, letitbit.com и т.д.
7. Пользователям запрещено создавать дополнительные аккаунты. Создание нескольких аккаунтов наказывается баном этих аккаунтов.
Аватара пользователя
MasterOK
Сообщения: 266
Зарегистрирован: Чт янв 11, 2007 9:43 pm
Antispam: Да
Откуда: Страна невыученых уроков ;)

Создание анимированного GIF баннера

Сообщение MasterOK » Вс янв 14, 2007 6:01 pm

Изображение Создание анимированного GIF баннера


Весь процесс создание баннера можно условно разделить на несколько этапов:

1. Проработка общей концепции (для чего он служит, что должно быть изображено, тексты и пр.)
2. Подбор или создание клипарта (изображений, фотографий)
3. Разработка баннера в Adobe Photoshop
4. Анимация баннера в Adobe Image Ready
Данная классификация этапов разработки достаточно условна и не претендует на полноту.

1. Запускаем Adobe Photoshop, создаем файл размером 468х60 (один из стандартных размеров баннеров)
2. Вставляем на отдельном слое изображение, делаем на отдельном же слое рамочку
3. Делаем на отдельном слое фон под изображение ...
4. Делаем заготовки под анимацию руки персонажа. Смотрите на анимацию - выделяем части тела, режем, вставляем на отдельные слои, смещаем - короче военно-полевой госпиталь в действии! :-) В итоге у нас будет два слоя - на одном рука смещена вправо-назад, что создает эффект ее движения - красит молчел валиком.
5. Два этих слоя сложим в папку. Потом делаем ее копию и смещаем вправо. Операцию повторим еще раз. Таким образом готово три кадра под будущую анимацию! Ну теперь рисуем на отдельных слоях мазки валика, пишем текст. СОХРАНЯЕМ! В Adobe Photoshop ВСЕ!

Изображение

6. Теперь анимация в Adobe Image Ready. Поскольку основную работу по подготовке анимации мы провели в Adobe Photoshop то теперь вся анимация будет сводится к включению - выключению слоев! Ну и конечно нужно не позабыть сохранить результаты своей работы! :-) Особо детально расписывать процесс анимации (а она совсем несложная ) не буду - смотрите картинку ниже. Если что могу выслать или выложить куда исходник в psd, в архиве он всего около 90 Кб.


Изображение



Изображение

Ну вот пожалуй и все! Вот наш готовый баннер. Очередной рубеж преодолен!
Успеха вам друзья!
Изображение

Аватара пользователя
Дюймовочка
Сообщения: 28
Зарегистрирован: Вт янв 02, 2007 2:50 pm

Сообщение Дюймовочка » Вс янв 14, 2007 8:51 pm

MasterOK, огромное спасибо зо отличный урок!

strawberry
Сообщения: 3
Зарегистрирован: Вс янв 14, 2007 10:02 pm

Сообщение strawberry » Вс янв 14, 2007 10:10 pm

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

Аватара пользователя
MasterOK
Сообщения: 266
Зарегистрирован: Чт янв 11, 2007 9:43 pm
Antispam: Да
Откуда: Страна невыученых уроков ;)

Сообщение MasterOK » Вс янв 14, 2007 10:21 pm

Проверь в каком формате ты сохраняешь файл. Смотри на вторую анимацию. Справа на панели Optimize в поле Format должно быть GIF. У тебя я подозреваю там стоит JPEG или еще что то ... а анимацию только GIF может показывать :)
Изображение

strawberry
Сообщения: 3
Зарегистрирован: Вс янв 14, 2007 10:02 pm

Сообщение strawberry » Вс янв 14, 2007 10:59 pm

у меня там стоит GIF. а при сохранении какой тип файла нужно указывать?

Аватара пользователя
MasterOK
Сообщения: 266
Зарегистрирован: Чт янв 11, 2007 9:43 pm
Antispam: Да
Откуда: Страна невыученых уроков ;)

Сообщение MasterOK » Вс янв 14, 2007 11:05 pm

GIF - это правильно ... так и надо. В сохранить оптимизированный как - тоже сохраняешь файл как GIF?
Изображение

strawberry
Сообщения: 3
Зарегистрирован: Вс янв 14, 2007 10:02 pm

Сообщение strawberry » Вс янв 14, 2007 11:16 pm

у меня сохраняет рисунок-GIF, а почему то не анимацию?

Лицеистка
Сообщения: 27
Зарегистрирован: Пн янв 01, 2007 8:13 pm
Antispam: Да
Откуда: Спб

Сообщение Лицеистка » Пн янв 15, 2007 10:22 am

Очень интересный урок, и написан понятно. Спасибки! :D

Аватара пользователя
Druid
Сообщения: 29
Зарегистрирован: Пн янв 01, 2007 11:10 pm
Antispam: Да
Откуда: Владивосток

Сообщение Druid » Пн янв 15, 2007 2:30 pm

Masterok, супер! Даешь еще! :wink:

Аватара пользователя
Globator
Админ
Сообщения: 3469
Зарегистрирован: Пн янв 01, 2007 10:57 pm
Пол: Мужской
Откуда: Планета Photoshop
Контактная информация:

Сообщение Globator » Пн янв 15, 2007 7:08 pm

Классный баннер получился!

Аватара пользователя
АБЪ Яв
Сообщения: 51
Зарегистрирован: Вт янв 16, 2007 6:18 pm

Сообщение АБЪ Яв » Вт янв 16, 2007 7:31 pm

Да баннер просто супер - Глобатору есть что в баннерные сети запускать :D

Аватара пользователя
DaOS
Сообщения: 139
Зарегистрирован: Сб янв 13, 2007 11:18 pm

Сообщение DaOS » Вт янв 16, 2007 9:57 pm

Слушай, а не поможешь мне баннорочег сделать? Тут у меня есть тема ...

Аватара пользователя
MasterOK
Сообщения: 266
Зарегистрирован: Чт янв 11, 2007 9:43 pm
Antispam: Да
Откуда: Страна невыученых уроков ;)

Сообщение MasterOK » Вт янв 16, 2007 10:08 pm

Да нет проблем! Только при одном условии - оформим это как урок, чтоб и остальные френды могли поучиться на реальном примере (название фирмы и слоган естественно изменим, чтоб тебя не спалить :D)
Изображение

3ton

Сообщение 3ton » Чт янв 18, 2007 5:08 pm

Таки интересные весЧи тут у вас есть! MasterOK - молоток! Еще про банеры и анимацию напеши чего-нить! А то читаешь, читаешь у иных ... 999 чего поймешь :D

Аватара пользователя
Красный
Сообщения: 1066
Зарегистрирован: Ср янв 03, 2007 9:22 pm
Откуда: Москва

Сообщение Красный » Чт янв 18, 2007 5:21 pm

урока не читал,но результат порадовал 8)

Глобатор
вот тебе и баннер готовый,для размещения(если кто будет сотрудничать,можна этот баннер давать) :wink: 8)
Меня здесь нет, прошу обращаться за помощью к участникам форума. ©Laura
Изображение
Изображение


Вернуться в «Анимация»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость