14.09.2017      778      4
 

Как сделать gif баннер в Фотошопе


Для наполнения сайта нужны картинки, в том числе анимированные. Выбор в бесплатных фотобанках ограничен, а покупать изображения к каждой статье немыслимо. Чтобы не тратить время на поиски подходящей иллюстрации к посту или партнерке, поневоле приходится осваивать работу с графическими редакторами. Сегодня я расскажу, как сделать gif баннер в Фотошопе. Вроде такого:

Фон, размер, количество кадров может быть любым. Главное, что исходных картинок должно быть столько же, сколько переходов планируется в «гифке», и они должны быть одинакового размера. Для пошагового примера я сделаю еще одну надпись – синюю на белом фоне. У меня сменяются три кадра, значит, мне нужны три заготовки:

1.

2.

3.

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

Слои – Создать дубликат слоя:

Назначением выбираем файл с первой картинкой, в моем случае это 1.jpg. Для удобства я переименую название копируемого слоя «Фон копия» в цифру 2. У вас оно может быть любым, главное – не забыть, что это слой из второй картинки:

После этого вкладку с самой картинкой можно закрыть, она больше не нужна. То же самое проделываем с третьей картинкой. В итоге во вкладке с картинкой 1 кроме нее самой должны появиться два слоя. Сама она изначально открыта как фон:

Чтобы превратить фон в рабочий слой, надо снять с него замок двойным щелчком. Для удобства я переименую стартовую картинку в цифру 1:

Вот что в итоге должно получиться – три слоя в одном файле:

Чтобы сделать gif баннер, понадобится «Шкала времени». Вызывается она через Меню – Окно – Шкала времени. Отображается внизу:

При нажатой клавише Ctrl выделяем все три файла мышью (если какой-то не отметить, он не войдет в анимацию):

В поле «Шкала времени» нажимаем на кнопку Создать анимацию кадра:

Открываем меню Шкалы в правом верхнем углу ее поля – Создать кадры из слоев:

Выбранные кадры отобразятся в левом углу:

Обратите внимание, что они должны идти в той последовательности, в которой будут сменяться на картинке. Если какие-то случайно сместились, перетащите их мышью в нужном порядке.

Теперь надо задать скорость, с которой будут сменяться изображения в гифке. Для каждого кадра она задается отдельно. Окно настройки вызывается нажатием на стрелочку с секундами под соответствующим кадром:

Я выберу 1 секунду, в поле Другое можно вписать значение, которого нет в выпадающем списке. Эту процедуру повторяем для каждого кадра. Далее нужно определить, сколько раз будет проигрываться анимация. Делается это в окне со стрелочкой под кадрами, по умолчанию в нем значится «Однократно». Чтобы баннер двигался непрерывно, выбираем Постоянно:

Здесь же можно посмотреть предварительный результат, запустив проигрыватель:

Если чувствуете, что отдельный кадр держится на экране слишком долго (или, наоборот, быстро исчезает), можно откорректировать продолжительность его показа. Она может быть как одинаковой, так и разной для разных кадров.

Далее Файл – Экспортировать – Сохранить для Web:

Сохраняем будущий баннер в формате GIF:

Вот что у меня получилось в итоге:

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


Обсуждение: 4 комментария
  1. Здравствуйте. Как по мне, достаточно сложный способ для того чтобы создавать gif картинки, но уверен вполне рабочий. Для тех кто не хочет заморачиваться с премудростями Photoshop, есть программа в которой можно сделать любой баннер анимированный текст и естественно gif картинку. Программа называется Easy GIF animator -она платная но стоит копейки по сравнению с приносимой пользой и облегчением своего труда. Хорошего вам настроения и успехов в творчестве

    Ответить
    1. Inna:

      Здравствуйте, Евгений. Спасибо за полезный комментарий. Думаю, что у каждой программы — платной или бесплатной — найдутся свои почитатели. Чем больше программ, тем больше выбор.
      Для меня Фотошоп удобен тем, что он у меня уже есть, и мне не надо тратиться на другие программы. Там, что называется, все в одном флаконе: возможностей — море.
      Описанный в статье способ мне лично показался трудноватым только в первый раз, сейчас я такие баннеры не глядя делаю.
      Мне вот кажется ужасно муторным создание gif баннера в бесплатном редакторе Gimp (как и все остальное в нем). А люди в Гимпе сложнейшие анимации на раз-два штампуют и не хотят менять его ни на что другое.
      Думаю, в одной из следующих статей расскажу, как сделать анимашку в Gimp — бесплатная альтернатива никогда не помешает.

      Ответить
  2. А я не знал что можно в фотошопе гифки делать, вернее знал но как не представлял, думал это все так сложно. С вашей инструкцией все понятно и не сложно даже

    Ответить
    1. Inna:

      Там еще много чего можно делать. Я сама по большому счету еще только осваиваю Фотошоп, сейчас с 3D разбираюсь.

      Ответить

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сайт использует cookies. Политика конфиденциальности