Как добавить текст в анимированный GIF с помощью Photoshop [Quick Tip]

Следующая статья поможет вам: Как добавить текст в анимированный GIF с помощью Photoshop [Quick Tip]

Как обстоят дела с анимированными GIF-файлами в наши дни?

В январе 2014 г. Pinterest объявили, что теперь они поддерживают анимированные GIF-файлы. Затем в июне 2014 г. Twitter последовали их примеру и объявили, что они также поддерживают анимированные GIF-файлы.Эти зацикленные анимированные клипы, также известные как «Формат обмена графикой», можно найти во всех социальных сетях, блогах, на веб-сайтах и ​​т. д. Черт возьми, вы могли бы даже помнить их из ваших прежних дней MySpace.

Эти милые анимационные видеоролики можно использовать для развлечения или в качестве маркетингового материала для продвижения ваших продуктов, услуг или мероприятий. В качестве примера возьмем настроенный анимированный GIF выше. Этот анимированный GIF-файл является отрывком из фильма и был взят из GIPHY.com. С текстом сверху его можно использовать для продвижения нашего ВХОДЯЩАЯ конференция 2014 в веселой форме.

Хотите узнать, как добавить текст в анимированные GIF-файлы? Читайте полное руководство.

1. Ищите GIPHY для идеального анимированного GIF.

Идти к GIPHY.com и найдите ключевое слово или фразу. Это может быть телешоу, персонаж фильма, общий глагол или существительное. См. пример ниже:

Каждая гифка помечена несколькими словами или фразами, описывающими, из чего сделана анимация, и какие ощущения вы испытываете в результате ее просмотра. При поиске по ключевому слову или фразе вы увидите всплывающий список GIF-файлов в формате плитки. Нажмите на один из этих GIF-файлов, чтобы увидеть его увеличенную версию.

Вот GIF, который мы выбрали:

(Источник: http://reactiongifs.me)

При использовании GIF с GIPHY.com убедитесь, что вы правильно указали первоисточник. Для большего информация о том, как это сделать, см. Страница часто задаваемых вопросов GIPHY. Вы также можете использовать GIF, созданный вами самостоятельно, если вы предпочитаете не использовать GIPHY.

2. Щелкните правой кнопкой мыши и выберите «Сохранить изображение как…».

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

3. Откройте свой GIF в Photoshop.

После того, как вы сохранили GIF на своем компьютере, откройте этот файл в Photoshop. Если у вас нет Photoshop, вы также можете добавить текст в свой GIF, используя GIMPзагружаемая программа для работы с изображениями.

4. Покажите свою временную шкалу.

Когда вы впервые откроете свой GIF в Photoshop, вы, вероятно, увидите набор слоев на правой боковой панели, но изображение не будет анимировано. Чтобы получить доступ к этой анимации, нажмите «Окно» > «Временная шкала», чтобы отобразить последовательность изображений в линейной анимации. Вы можете просмотреть анимацию, щелкнув любой кадр на временной шкале и нажав пробел.

5. Убедитесь, что на правой боковой панели выбран верхний слой.

Этот шаг важен, если вы хотите, чтобы текст применялся на протяжении всей анимации. В этом случае верхний слой называется «Слой 8». Если у вас выбран другой слой, ваш текст будет отображаться только на выбранном вами слое и на слоях под ним. Например, если я выберу здесь «Слой 6» вместо «Слой 8», мой текст будет отображаться только на слоях с 1 по 6.

6. Добавьте текст в свой GIF.

Вот та часть, которую вы ждали! Чтобы добавить текст в GIF, выберите инструмент «Текст» на левой панели инструментов и перетащите рамку на изображение. Начните вводить свое сообщение — в данном случае мы написали «Goin’ to INBOUND 2014!» чтобы дополнить взволнованную эмоцию, показанную в GIF. Чтобы изменить шрифт, толщину, размер, цвет и выравнивание, lперейти к верхней текстовой панели.

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

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

7. Выберите «Файл» > «Сохранить для Интернета…».

Когда вы закончите добавлять текст в свой GIF и будете довольны конечным продуктом, вам нужно будет сохранить его в формате .gif. Для этого нажмите «Файл» > «Сохранить для Интернета…».

Если вы выберете типичную настройку «Файл» > «Сохранить как…», ваш GIF будет сохранен как неподвижное изображение и не будет правильно анимироваться.

8. Дважды проверьте настройки, затем нажмите «Сохранить…».

После того, как вы нажмете «Файл» > «Сохранить для Интернета…», вы попадете на экран ниже. Если вы хотите изменить какие-либо настройки цвета или размера, вы можете сделать это здесь. В противном случае просто нажмите « Сохранять…”

9. Назовите свой файл и сохраните его.

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

10. Разместите свой новый анимированный GIF везде!

Вуаля! Смотрите финальную GIF-ку Большого Лебовски с изюминкой INBOUND 2014:

Теперь, когда вы знаете, как сделать умный анимированный гифка и добавить к нему настраиваемый текст, вы сможете использовать его в сообщениях в блогах, на своем веб-сайте или в сообщениях в социальных сетях.