Как сделать gif — баннер

В этом уроке я научу вас создавать gif баннеры с простой покадровой анимацией. Данные баннеры очень востребованы в различных рекламных сетях. В дизайн пока вникать не будем, так как это отдельная тема. Наша задача в рамках этого урока — разобраться в том, как сделать раскадровку анимированного gif-баннера. Для этого мы уже создали макет. Готовый результат вы можете посмотреть ниже.

Пример готового баннера. Пример готового баннера

Отличной программой для создания gif – анимации является Adobe Photoshop.

Сегодня мы сделаем баннер для рекламы одного из наших партнеров, который позволяет приобретать фотографии со стоков по оптовым ценам. Подробнее про него вы можете почитать по ссылке: Как покупать фотографии со стока недорого? Да, всем уже надоела реклама в интернете, но мы свои уроки делаем от души, и небольшое вознаграждение нашей деятельности не повредит. Начнем!

Создаем новый документ

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

Создаем баннер

Перед тем, как начать, уточните, где вам необходимо будет его разместить, определите нужные размеры и ограничения по весу. Например, для рекламной сети Яндекс (РСЯ) вес gif-баннера не должен превышать 120 кб.

Если вы создадите баннер большого размера, и он будет содержать большое количество цветов, то на выходе вам придется его сильно ужимать или вовсе переделывать. Бывает такое, что клиент просит добавить много фотографий и текста. В итоге приходится делать целый сценарий, и в таком случае надо быть предельно аккуратными, так как если ваш gif-баннер будет хоть на 1кб превышать требования по весу, то его попросту не примут.

Кстати, почитайте эту статью тоже:   Как изменить цвет объекта на фото в фотошопе

Раскадровка gif-баннера

  1. Для создания анимации gif-баннера необходимо в верхнем меню фотошопа сменить рабочую среду с той, в которой вы обычно работаете, на рабочую среду под названием “движение”:
    Раскадровка gif-баннера
  2. Под рабочей областью появится поле для работы со шкалой времени:
    Раскадровка gif-баннера
  3. В этом поле нам нужно выбрать режим “Анимация кадра”, так как мы будем делать покадровую анимацию:
    Раскадровка gif-баннераНаверно вы уже представляете, как это будет работать. Думаю, каждый из вас в детстве делал рисунки на полях тетради, где каждый последующий рисунок был немного изменен, и при быстром перелистывании кадров получалась анимация. Так вот тут это работает аналогичным образом.Теперь надо нарисовать элементы, которые будут друг друга сменять. В том баннере, который мы сделали, будет меняться только кнопка с зеленого на красный цвет, привлекая к себе внимание. Мы решили использовать такой вариант, так как не хотим, чтобы эти баннеры сильно отвлекали читателя от текста, но при этом его было сложно не заметить.
  4. Вот две кнопки в слоях:
    Раскадровка gif-баннера
  5. Теперь самое простое! Выключаем один слой с кнопкой:
    Раскадровка gif-баннера
  6. В панели со шкалой времени нужно создать еще один кадр. Для этого нажимаем кнопку “Создание копии выделенного кадра”:
    Раскадровка gif-баннера
  7. Теперь мы можем менять видимость слоев, и эти изменения будут действительны только для данного кадра. Находясь во втором кадре, мы отключаем слой с зеленой кнопкой и включаем слой с красной:
    Раскадровка gif-баннера
  8. Теперь у нас есть два кадра с разными кнопками. После нам нужно выставить длительность отображения каждого кадра. Для этого есть всплывающее меню под каждым кадром, где мы можем выставить время в секундах. В фотошопе есть заготовки, а также можно установить собственное время. На скрине показано, как изменить время кадра для gif анимации:
Кстати, почитайте эту статью тоже:   Работа с масками в фотошопе

Сохранение gif — анимации в фотошопе

  1. Gif — баннер в фотошопе сохраняется так же, как и обычное изображение. Жмем удобное сочетание горячих клавиш Ctrl + Alt + Shift + S или идем в меню Файл → Экспортировать → Сохранить для веб. Далее появится форма с кучей настроек для сохранения:
    Сохранение gif - анимации в фотошопе
  2. Выбираем тип файла GIF, тип дизеринга устанавливаем регулярный и количество цветов устанавливаем 256:
    Сохранение gif - анимации в фотошопе
  3. Так же у вас есть возможность регулирования параметров повторов. Если вы установите режим “Однократно”, то ваша gif — анимация один раз проиграется и остановится. При выборе режима “Постоянно” баннер будет зациклен и будет радовать глаз бесконечно) Этот режим меняется тут:
    Сохранение gif - анимации в фотошопе

Вес gif баннера:

  1. В этой же форме в фотошопе можно отслеживать вес gif анимации:
    Вес gif баннера
  2. Если в вашем баннере много кадров и цветов, а также он большого размера, то его вес может составлять 130кб и больше. Для того, чтобы сократить вес gif — анимации, нужно уменьшить количество цветов:
    Вес gif баннера

Но помните, что сокращение количества цветов может сильно испортить внешний вид вашего баннера. Цвета перестанут быть плавными и фотографии потеряют свою детализацию. Для того, чтобы уменьшить вес gif — анимации, следует в приоритете оптимизировать количество кадров, убрать лишние и/или вовсе отказаться от излишней анимации.

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