Создаем анимированный gif баннер

Создаем анимированный gif баннер

Этой статьей открываем (как обещали) новый раздел “База знаний”. И так начнем. Сегодня я расскажу Вам, как создать анимированный баннер в Adobe Photoshop на примере кнопки-баннера стандартного размера 88х31 пиксель. Изучив этот урок, вы узнаете, как делать простую анимацию в Photoshop. В самом уроке теории не будет – будет только практика. Так что садитесь поудобнее, я начинаю :smile:.

Для создания анимированных баннеров нам понадобится программа Image Ready, она идет в комплекте вместе с Photoshop, а начиная с версии CS3 и выше, встроена в сам Photoshop. Перед созданием баннера я обычно прокручиваю в голове примерные эффекты, которые буду использовать в баннере. Результат урока:

Запускаем программу Photoshop (у меня стоит Adobe Photoshop CS3).
  1. Создаем новый документ (Ctrl + N) нужного размера (в данном случае 88х31 пиксель).
  2. Подбираем нужный фон (я использовал фон с цветом #FDF8D9).
    баннер-кнопка
  3. Идем в палитру со слоями (Windows→Layers или жмем F7). Дважды щелкаем по слою Background, удерживая клавишу Alt, тем самым преобразуем его в простой слой.
  4. Создадим внутреннюю обводку нашему слою. Для этого еще раз щелкаем дважды по слою или, выделив наш слой, идем в Layer→Layer Style→Blending Options или, нажав правой кнопкой мыши по нашему слою, выбираем Blending Options. В появившемся окне выбираем слева, самый нижний пункт Stroke. Задаем такие параметры: Size: 1, Position: Inside, Color: #A28564 и жмем кнопку ОК.
  5. Теперь нам надо написать текст к первому кадру нашего анимированного баннера: “все самое ИНТЕРЕСНОЕ в сети Интернет”. Для этого используем инструмент Type tool (горячая клавиша T). Временно скрываем его из видимости (чтобы скрыть любой слой из видимости, надо отключить иконку глаза напротив этого слоя ).
  6. Далее делаем подложку. Создаем новый слой (Shift+Ctrl+N). Выбираем инструмент с прямоугольным выделением (горячая клавиша M). Выделяем нужную нам область (во время выделения, удобно использовать клавишу Пробел, что позволит вам двигать форму выделения). После этого заливаем наше выделение цветом #FAEEAC.
  7. Снимаем выделение (Ctrl+D). Пишем новый текст. В нашем примере это – “Блог об Интернет” (цвет текста #784814) и “FREEGOLD.RU” (цвет текста #870000).
  8. Выбираем слой с текстом “FREEGOLD.RU” и делаем его копию (Ctrl+J). Слои “FREEGOLD.RU” и “Блог об Интернет” скрываем. Работаем с копией слоя. Идем в меню Filter→Blur→Motion Blur. Ставим значения Angle – 0, Distance - 10.
  9. Подготовим первый кадр для анимации: делаем видимыми слои - слой с фоном, слой с подложкой и слой с текстом “Блог об Интернет”.
  10. Теперь, когда для анимации все готово, идем в меню Windows→Animation. Далее делаем копию кадра: нажимаем на кнопочку Duplicates selected frames.
  11. Настраиваем анимацию для второго кадра. Включаем копию слоя, тот, который размытый “FREEGOLD.RU”. Анимацию можно просмотреть в любой момент, нажав на кнопку Play
  12. Опять делаем копию кадра. Теперь уже включаем неразмытый слой “FREEGOLD.RU”, а размытый слой выключаем. После этого выбираем 2-й и 3-й кадры (выделяем с нажатой клавишей Shift) и жмем кнопку Tweens animation frames.
    В появившемся окошке указываем количество кадров – 5 и нажимаем ОК. Это даст плавный переход между кадрами.
  13. Дублируем последний кадр. Оставляем включенными слой с фоном и слой с текстом “самое ИНТЕРЕСНОЕ в сети Интернет», остальные слои отключаем. Все наши кадры готовы. В итоге у меня получилось 9 кадров. Остается только подобрать время показа для каждого кадра. Под каждым кадром есть вкладка, где можно указать время его показа кадра.
    Если в списке нет времени, которое вам подходит, воспользуйтесь пунктом Others.
    Путем подбора разного времени для кадров, я остановился на таком результате:
    Теперь остается только сохранить нашу анимацию (File→Save for web…) и сохраняем в формате GIF. В итоге у меня получился вот такой анимированный баннер:

Скачать готовый исходник баннера в формате psd

Отзывов к посту "Создаем анимированный gif баннер" уже 57:

Аватар пользователя Настя

Здравствуйте. Спасибо за интересный пост.
У меня вопрос по поводу накрутки баннеров. Хочу немного накрутить на своём сайте просмотры баннера. Посоветуйте пожалуйста с помощью какого сервиса или программы это лучше всего сделать? Пока в поиске только нашла сервис http://traffic.uarnet.org/, но раньше с ним не работала.

Аватар пользователя Екатерина

Добрый день! У меня ннет пункта меню "Анимация", что можно сделать в этом случае?

Аватар пользователя misterikl

Спасибо большое! Все понятно!

Аватар пользователя Вячеслав

Сергей, у меня стоит CS6 русский, и на нем не выходит анимация банера. Все создается кроме самой анимации. Панель есть, но кадры создать - клавиша не активирована, пробовал слои перетаскивать - тот же результат( Может горячие клавиши есть ? А то мне однорукому носом и локтем попадать на кнопки проблематично((( А с книгой удачное решение!!! Не надо прыгать по разным сайтам. Еще бы по азам пройтись))

Аватар пользователя Наталья

Огромное спасибо за полезнейшую статью!!! Вот сижу уже 10 минут смотрю на СВОЙ банер! Остановить это счастье невозможно. :-) Еще 2 часа назад я не верила, что у меня это получитсяо!!!!
Единственное, что вызвало трудности - это английские строки меню. У меня фотошоп русский, пришлось оч-чень долго перебирать все возможные варианты. Просто пожелание автору: добавьте русский перевод ко всем меню в статье.
И еще раз огромное СПАСИБО! И удачи!

Аватар пользователя Вебмастер

Спасибо за урок.
Сделал баннер в photoshop cs5, на компе он работает, а на сайте не отображается. 100 раз проверил правильность ссылки и перезалил его на хост. Не пойму в чем дело может быть?
Может хостинг тупить?

Аватар пользователя Юлия

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

Аватар пользователя Гость

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

Аватар пользователя Александр

Сергей подскажите пожалуйста, фильтры скачал в формате "8bf" установил как положено но они у меня не отображаются даже после перезагрузки, а в папке присутствуют. Подскажите в чем проблема?
СПАСИБО.

Аватар пользователя Александр

Спасибо за уроки. познавательно и интересно.

Аватар пользователя Сергей Иванов

пожалуйста, рад что вам мой уроки полезны, заглядывайте почаще)

Аватар пользователя Гость

Баннер создал, нажимаю на просмотр при сохранении всё работает. Сохраняю на комп - всё это понятно. Но вот не понятно как его разместить на сайте? Где html код на созданный мной баннер?

Аватар пользователя Сергей Иванов

Извините за долгий ответ, был в отъезде.

в конце этого урока - http://www.blogohelp.ru/smotrim-onlajn-kak-sdelat-animaciju-v-fotoshope-... , подробно написано как вставить баннер на сайт, если будут вопросы пишите)

Аватар пользователя Вячеслав

Здравствуйте, Сергей.
Спасибо за отличный урок - всё разложено по полочкам.
В фотошопе мой баннер отлично работает...
...Но в самом конце я застопорился - при сохранении результата в CS5 ("File→Save for web…") у меня этот пункт остаётся неактивным, а в "Сохранить как" формата GIF попросту нет...
Возможно причина в большом размере (768х154)???

Аватар пользователя Игорь

Надо нажимать не " Сохранить как" а Сохранить для Web устройств в появившемся окне ничего не изменяете.Внизу кнопка сохранить нажимаете Даёте имя своей анимации и сохраняете для вас в удобное место и всё!

Аватар пользователя Елена Староверова

Не могу сохранить результат. Сохраняет лишь первый слой и никакой анимации в формате GIF...(((( Что делать?

Аватар пользователя Ёжик

Елена, в русской версии фотошопа для сохранения в меню "Файл" выбирайте "Сохранить для Web и устройств...".

Аватар пользователя Сергей Иванов

Елена разобрались уже?

странно, я щас несколько раз еще попробовал, ниразу такого не было, вы можете по шагам написать что делаете?

В фотошопе анимация работает?

Аватар пользователя Гость

есть проблема, в концце когда делаю анимаю у меня не могу лои вставить, можно только один выбрать, помоигет почему как втсавлять кадры! дайте ваш скайп )

Аватар пользователя nema

Функция Tweens.. непонятная. Создается пустой промежуточный кадр и все

Аватар пользователя Сергей Иванов

Выделяете два кадра и нажимаете Tweens, открывается окно в котором можно ввести количество кадров, которые программа автоматически создает.

Аватар пользователя Анна

Огромное спасибо за подробный урок! Впервые в жизни сделала баннер свой.

Аватар пользователя Сергей Иванов

Пожалуйста, очень рад за вас.

Аватар пользователя Дмитрий Вербин

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

Аватар пользователя Сергей Иванов

вы картинку на хостинг загрузили? напишите мне поподробнее, прям пошагам что делаете

Аватар пользователя Дмитрий Вербин

Да картинку загрузил все, которые в банере присутствуют. Сохраняю save for web. Нажимаю preview, появляется html код - вот его и вставляю. В ftp клиенте банер находится на первом месте в корне, но ссылки как написано не появляется. Немного не пойму как может ссылка отображаться бенером. Я привык что банер - это html код.

Аватар пользователя Гость

черт... у меня тоже фотошоп CS3 но все совершенно по другому(((((

Аватар пользователя Сергей Иванов

а что именно все совершенно по другому? по другому это как? что у вас не получается, на каком шаге остановились?

Аватар пользователя Черви для рыбалки

Все понятно расписано, довольно доступно. Спасибо! Отличная статья, все получилось.

Аватар пользователя Кирилл

у меня только 1 кадр сохраняется

Аватар пользователя Ёжик

Нужно жать не "Сохранить как...", а "Сохранить для Web и устройств..."

Аватар пользователя Сергей Иванов

формат выберите GIF при сохранении

Аватар пользователя Гость

Блин,пожалуйста делайте уроки на русском!!!
Урок понравился,но нужно разбираться в я зыках...

Аватар пользователя Сергей Иванов

Это мой первый урок) Остальные уроки все содержат английские команды и их перевод.

Так же вы можете скачать все мой уроки в виде книги себе на компьютер - 6 авторских уроков для программы Adobe Photoshop + бонус!

И еще вопрос, какие бы вы хотели увидеть новые уроки? Пожалуйста напишите в этой теме - http://www.blogohelp.ru/chto-vy-hoteli-uvidet-na-stranichah-bloga

Аватар пользователя Юлия

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

Аватар пользователя Сергей Иванов

Юлия, попробуйте спросить гугл или яндекс по запросу "бесплатно скачать фотошоп", думаю быстро найдете ответ)

Аватар пользователя Алена

Спасибо за понятную пошаговую иснтуркцию. Нужно было срочно сделать баннер - а я с ужасом обьнаружила, что у меня стоит CS3 который не предполагает наличия ImageReady!
Ваше описание мне просто спасло день!)))

Аватар пользователя Сергей Иванов

Алена, рад что вам понравился урок.

p.s. возможно вы хотели бы видеть какие-либо еще уроки по фотошопу?

Аватар пользователя Алена

Да не, пока знаний хватает, я не дизайнер :-)

Аватар пользователя SCT

Урок отличный, только не понятно, зачем использовать только английски интерфейс, как будто русского фотошопа не существует

Аватар пользователя Сергей Иванов

Все просто - я привык к английским интерфейсам программ.

p.s. спасибо за комментарий.

Аватар пользователя Gif Animator

Бесплатный онлайн-сервис создания гиф-анимации

gifovina.ru

Аватар пользователя Гость

Cпасибо большое - хороший урок! :0)

Аватар пользователя Михаил Октысюк

Случайно зашел на ваш сайт, отличный урок )

Аватар пользователя Евгений

Хороший урок. Пошел пробовать создавать свой баннер.

Аватар пользователя Ирина

Я сделала баннер, разместила на блоге. А анимация почему то не отражается.

Аватар пользователя Сергей Иванов

Ирина, в фотошопе анимация нормально идет? на блоге нет?

В фотошопе в панельке анимации, указали что бы анимация бесконечно повторялась (слева внизу есть такая функция)?

Аватар пользователя Гость

Спасибо! Все получается! Благодаря уроку, я уже потренировалась - несколько сделала разных.

Аватар пользователя Татьяна

Спасибо огромное за супер полезную статью! Очень подробно все описано и понятно.:yes3:

Аватар пользователя Сергей Иванов

Татьяна, очень рад, что вам урок пригодился!

Аватар пользователя Ильдар

Спасибо. Очень нужный урок.

Аватар пользователя BloggerMen

Как раз есть необходимость сделать кнопку для одного сайта. Спасибо.

Аватар пользователя Сергей Иванов

Надеюсь мой урок вам в этом поможет :ad:

Аватар пользователя [RGT_Dench]

Спасибо очень очень очень очень... большоое! Очень помогло!

Аватар пользователя Сергей Иванов

Очень рад, что вам помогло :ad:

Аватар пользователя Рубежное

спасибо за статью....очень помогла

Аватар пользователя flesh

Хороший урок, просто и понятно рассказано:yes3:

Отправить комментарий

Содержимое этого поля является приватным и не будет отображаться публично.
  • Строки и параграфы переносятся автоматически.
  • Используйте специальные теги [adsense:format:slot] или [adsense:format:[group]:[channel][:slot]] или [adsense:block:location] для показа Google AdSense ads.
  • Вы можете использовать метки BBCode в тексте.
  • Вы можете разместить код, используя теги <code>...</code>(общий) или <?php ... ?> (выделенный PHP).

Подробнее о форматировании