Как сделать анимированный баннер в фотошопе

Обновлено: 21.11.2024

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

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

Узнайте, как я создал этот GIF! Фото через Грэма Уизардо.

Без лишних слов, вот как создать анимированный GIF в Photoshop.

Шаг 1. Настройте размеры и разрешение документа Photoshop
—

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

Настройте размеры, разрешение и цветовой режим документа Photoshop

Размеры

Для этого проекта мы работаем с рекламным баннером в формате GIF, который имеет стандартные рекомендации по размеру. Я выбрал макет 720×300. Убедитесь, что ваши единицы измерения указаны в пикселях.

Разрешение

Чтобы размер файла был как можно меньше, подойдет разрешение 150 пикселей. Я выбрал 300, так как знаю, что мой GIF не будет таким большим. Убедитесь, что ваши единицы измерения указаны в пикселях на дюйм.

Цветовой режим

Наконец, анимированные GIF-файлы создаются для экрана, поэтому установите цветовой режим на цвет RGB. Нажмите «Создать», чтобы открыть новый документ.

Шаг 2. Импортируйте файлы изображений в Photoshop
—

Файл > Скрипты > Загрузить файлы в стек…

Нажмите "Обзор", найдите изображения, при необходимости выровняйте их и нажмите "ОК".

Создание GIF из неподвижных изображений

Выберите «Файл» > «Сценарии» > «Загрузить файлы в стек» и нажмите кнопку «Обзор» в появившемся окне «Загрузить слои». Откроется окно Finder/Explorer, в котором вы можете просмотреть свои файлы и выбрать все, что вам нужно. Когда вы закончите, нажмите «Открыть», а затем «ОК» в следующем окне. Файлы будут импортированы в отдельный документ, из которого вы сможете выбрать все слои и перетащить их в свой рабочий документ.

Создание GIF из видео

Если вы конвертируете видео в GIF, выберите «Файл» > «Импорт» > «Видеокадр в слои».

Шаг 3. Откройте окно временной шкалы
—

Окно > Временная шкала

Настроить окно временной шкалы для покадровой анимации

Выберите «Окно» > «Временная шкала». Это откроет панель в нижней трети холста. В центре панели нажмите на стрелку, чтобы открыть раскрывающееся меню, и выберите «Создать анимацию кадра».

Шаг 4. Преобразуйте слои в кадры
—

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

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

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

Шаг 5. Дублируйте кадры для создания анимации
—

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

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

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

Шаг 6. Установите время задержки каждого кадра
—

Настройка длительности находится внизу каждого кадра

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

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

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

Совет. Большое количество кадров с короткими задержками – ключ к плавной анимации, тогда как небольшое количество кадров с длинными задержками создает прерывистый эффект покадровой анимации.

Шаг 7. Установите, сколько раз анимация будет повторяться
—

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

Шаг 8. Предварительный просмотр и повторение анимации
—

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

Шаг 9. Экспортируйте документ Photoshop в формате GIF
—

Файл > Экспорт > Сохранить для Интернета (предыдущая версия)…

Прежде всего, не забудьте сохранить рабочий PSD!

Когда вы будете готовы экспортировать окончательный вариант GIF, выберите «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)». (Примечание: если вы работаете с более старой версией Photoshop, скорее всего, это будет «Файл» > «Сохранить для Интернета и устройств»). Откроется окно экспорта.

Здесь много вариантов, но для наших целей нам нужно всего несколько. Во-первых, убедитесь, что вы установили тип файла GIF в раскрывающемся списке в правом верхнем углу. Остальные параметры, которые я выделил на изображении ниже, являются необязательными, но они полезны для создания облегченного файла. Давайте пройдемся по ним сейчас.

Уменьшить размер файла

Ваша основная цель с оставшимися параметрами – сохранить небольшой размер файла за счет уменьшения количества деталей в GIF без ущерба для качества изображения. Помните, что большой размер файла означает медленную загрузку, что может быть особенно неприятным для маркетинговых целей, таких как рекламные баннеры, когда зритель не искал ваш контент и не будет ждать его загрузки. Стремитесь оставаться ниже 1 МБ. До 5 МБ выполнимо на большинстве веб-сайтов, но это необходимо. Вы можете увидеть размер файла GIF в левом нижнем углу панели, содержащей изображение для предварительного просмотра.

Это параметры, на которые следует обратить внимание в окне "Сохранить для Интернета"

Уменьшить информацию о цвете

Ненужная информация о цвете является главной причиной большого размера файла. Чтобы сократить его, отрегулируйте общее количество цветов в раскрывающемся списке «Цвета:» и уменьшите настройку дизеринга (смешивания пикселей для создания плавного затенения) под ним. Внося изменения, следите за изображением предварительного просмотра GIF слева, чтобы увидеть, как изменяется разрешение.

Преобразовать в sRGB

sRGB или «Стандартный RGB» имеет более узкий диапазон цветов, чем Adobe RGB по умолчанию, поэтому обязательно установите этот флажок.

Когда вас устраивают разрешение и размер файла, нажмите кнопку "Сохранить" в нижней части окна. Чтобы убедиться, что все в порядке, вы можете предварительно просмотреть готовый GIF-файл, перетащив его в поле URL-адреса браузера.

Мой готовый рекламный баннер GIF. Фото через Грэма Уизардо.

Шаг 10. Поделитесь готовым GIF-файлом Photoshop!
—

Вот и готово ваше GIF-изображение, готовое к публикации во всемирной паутине. Теперь, когда у вас есть навыки создания базовых анимаций в Photoshop из видео и неподвижных изображений, вы можете оживить практически все!

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

Ищете профессиональную помощь в создании анимации?

Поработайте с одним из наших талантливых дизайнеров!

Эта статья изначально была написана Ребеккой Крегер и опубликована в 2013 году. В нее добавлена новая информация и примеры.

Почти невозможно зайти в Интернет двумя щелчками мыши и не увидеть множество анимированных объявлений, борющихся за ваше внимание. Хотя рынок интернет-рекламы переполнен, медийная реклама по-прежнему остается популярной тактикой как для привлечения внимания к бренду, так и для привлечения трафика.

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

Шаг 1

Откройте новый документ Photoshop шириной 300 и высотой 250 пикселей. Это размеры стандартного рекламного баннера. Поскольку баннер будет использоваться только в Интернете, мы можем оставить разрешение 72.

Шаг 2

Для этого примера я создам объявление для онлайн-реселлера билетов, используя изображение Shutterstock 129152783. Ваше изображение должно быть яркого цвета и иметь свободное пространство, куда вы можете добавить текст и кнопку. Разместите на баннере изображение продукта или услуги, которую вы продаете. При необходимости используйте функцию Transform (control + T), чтобы увеличить или уменьшить размер изображения.

Шаг 3

Используйте инструмент "Пипетка" (I), чтобы выделить жирный цвет на изображении, а затем с помощью инструмента "Прямоугольник со скругленными углами" (U) создайте кнопку в нижней части объявления.

Шаг 4

На панели «Слои» новый слой формы должен быть выделен. Выберите раскрывающееся меню fx и выберите Bevel and Emboss. Установите стиль на внутренний скос и глубину на 50%.

Шаг 5

Добавьте новый слой в свой файл и с помощью инструмента «Текст» (T) создайте кнопку CTA (призыв к действию).

Шаг 6

Затем создайте еще один новый слой и снова используйте инструмент «Текст», чтобы создать основное сообщение для вашего баннера. Имейте в виду, что у вас будет всего пара секунд, чтобы привлечь внимание пользователей, пока они просматривают веб-страницы, поэтому убедитесь, что этот текст краток и по существу.

Шаг 7

Выберите «Окно» > «Анимация», чтобы открыть панель «Анимация» в нижней части экрана. Теперь мы собираемся создать несколько простых анимаций, чтобы ваш баннер ожил. Выбрав первый кадр анимации, сделайте слой кнопки и оба текстовых слоя невидимыми.

Шаг 8

Создайте новый кадр на панели "Анимация". В рекламном баннере снова сделайте основной слой сообщения видимым. Сдвиньте текст вверх, чтобы вы могли видеть только последнюю строку. На панели «Слои» установите непрозрачность этого слоя на 40%.

Шаг 9

Создайте третий кадр, сдвиньте текст вниз так, чтобы была видна большая часть или весь текст, и увеличьте непрозрачность слоя до 70%.

Шаг 10

Создайте новый фрейм и переместите текст сообщения на его окончательное место. Полностью увеличьте непрозрачность до 100%.

Шаг 11

Создайте пятый кадр и сделайте слои кнопки и текста кнопки видимыми.

Шаг 12

Шаг 13

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

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

Изображения, использованные в этом посте:

Если вам понравился этот пост, загляните в наш блог о том, как выбрать эффективные изображения для рекламы!

В этом уроке вы узнаете, как превратить серию фотографий в зацикленный анимированный GIF-файл с помощью Photoshop.

Этот метод хорошо подходит для создания покадровой анимации с использованием серии фотографий, снятых с цифровой зеркальной камеры, компактной камеры или даже с мобильного устройства. В этом примере мы будем использовать серию фотографий, сделанных в режиме серийной съемки с iPhone. Загрузите и разархивируйте приведенные выше образцы ресурсов или используйте собственную последовательность фотографий.

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

Импортировать серию фотографий

Откройте Photoshop и выберите «Файл» > «Сценарии» > «Загрузить файлы в стопку».

Нажмите «Обзор» и найдите фотографии, которые хотите использовать. Удерживая нажатой клавишу Shift, выберите все файлы и нажмите «Открыть».

Нажмите "ОК", чтобы импортировать фотографии в файл с одним слоем.

Обратите внимание, что на панели «Слои» в правой части рабочей области создан ряд новых слоев.

Эти отдельные слои станут кадрами анимированного GIF.

Необязательно: импортируйте видео

Если вы начинаете с короткого видео, вам сначала нужно преобразовать кадры видео в отдельные слои. Выберите «Файл» > «Импорт» > «Кадры видео в слои».

Найдите и выберите видеофайл, который хотите использовать, и нажмите "Открыть".

Нажмите "ОК", чтобы преобразовать видеокадры в однослойный файл.

Примечание. Photoshop не сможет полностью импортировать слишком длинное видео. Используйте параметры в окне «Импорт», чтобы ограничить количество импортируемых кадров. Вы можете импортировать видео целиком или выбрать только его часть. Вы также можете ограничить количество импортируемых кадров заданным интервалом, например каждые 2 кадра.

Открыть временную шкалу

Выберите «Окно» > «Временная шкала», чтобы открыть панель «Временная шкала».

Нажмите стрелку на кнопке в центре панели и выберите «Создать анимацию кадра». Затем нажмите кнопку, чтобы создать новую анимацию кадра.

Преобразование слоев в кадры анимации

Нажмите значок меню в правом верхнем углу панели временной шкалы. Нажмите «Создать кадры из слоев».

При этом все слои на панели «Слои» будут преобразованы в отдельные кадры анимации.

Нажмите кнопку "Воспроизвести" в нижней части панели "Таймлайн" (или нажмите клавишу пробела на клавиатуре), чтобы просмотреть анимацию.

Примечание. Если анимация воспроизводится в обратном направлении, снова щелкните значок меню временной шкалы и выберите «Обратные кадры».

Зациклить анимацию

Нажмите меню повтора в нижней части панели «Таймлайн» и выберите «Навсегда». Это создаст зацикленную анимацию.

Экспорт анимации в формате GIF

Выберите «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)».

Выберите «GIF 128 Dithered» в меню «Стили».
Выберите 256 в меню "Цвета".
Если вы используете GIF в Интернете или хотите ограничить размер файла анимации, измените поля «Ширина» и «Высота» в параметрах «Размер изображения».
Выберите «Навсегда» в меню «Параметры цикла».

Нажмите Предварительный просмотр. в левом нижнем углу окна «Экспорт», чтобы просмотреть GIF-файл в веб-браузере.

Нажмите «Сохранить». и выберите место для вашего анимированного GIF-файла.

Поздравляем! Вы только что создали свой анимированный GIF. Разместите его в Интернете, чтобы показать всему миру.

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

Анимированные Gif-файлы стали поводом для многих шуток в дизайнерских сообществах. Это связано с тем, что анимированные изображения известны тем, что они немного навязчивы и загромождают веб-страницы. Однако при правильном использовании анимация может привлечь к себе внимание и заставить забыть о другом содержимом страницы. Сегодня мы покажем, как использовать Photoshop CS5 для создания анимированных GIF-баннеров. Начнем!

Переводчик заметок: Photoshop CS4 также подходит для этого урока.

Это тот самый баннер, о котором пойдет речь в этом уроке.

Шаг 2. Разместите логотип в верхней центральной части баннера.

Шаг 3. Напишите слоган под логотипом.

Откройте диалоговое окно Стили слоя (стили слоя) и настройте Тень (Тень). Уменьшите расстояние (distance) и размер (size) на 2 пикселя.

Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим наложения на Умножение (Multiply) с непрозрачностью 28%.

Шаг 5. Добавьте список рекламных предложений. У нас будет это Tutorials (Lessons) Articles (Articles), Tips (Tips), Freebies (бесплатно), Basix (Ase) Videos (Video), Premuim (Premium), как показано.

Растрировать текстовые слои и создать Обтравочную маску (Create a clipping mask).

Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы PSDTUTS, но вы можете использовать любой, который вам подходит.

Шаг 7. Добавьте текст под изображением, которое мы вставили на шаге 6.

Шаг 8. Создайте овал и установите цвет fdfcfc.

Откройте диалоговое окно Стили слоя (стили слоя) и настройте Тень (Тень). Уменьшите расстояние (distance) и размер (size) на 1 пиксель.

Включите и проверьте Внутреннее свечение (Inner Glow) и оставьте все как есть в настройках.

Добавить Gradient Overlay (Наложение градиента) с Opacity (Непрозрачность) 6%

Шаг 9. Теперь, когда мы закончили создание всех наших слоев, мы готовы начать работу над анимацией. Сначала откройте панель анимации. Окно — Анимация (Окно > Анимация). Я буду использовать панель анимации на временной шкале (Timeline Animation), а не на покадровой анимации (frame animation).

Примечание. Эта функция доступна только в Photoshop Extended.

Теперь мы делаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Не трогайте фон.

Шаг 10. См. изображения ниже, чтобы узнать, как вставить ключевые кадры и где увеличить непрозрачность. Для каждого созданного нами элемента есть отдельный скриншот с инструкцией.

Переводчик заметок: ключевые кадры можно перемещать с помощью мыши. Вы также можете выбрать несколько ключевых кадров для перемещения.

(нажмите на картинку, чтобы увеличить)

Шаг 11. Ваша временная шкала (анимация временной шкалы) должна выглядеть примерно так, как показано ниже.

(нажмите на картинку, чтобы увеличить)

Шаг 12. Итак, мы закончили нашу анимацию. Нажмите кнопку Play, чтобы увидеть результат. При необходимости можно все настроить. Чтобы сохранить свой баннер, перейдите в меню Файл — Сохранить для Web и устройств (File — Save for Web Devices). Установите настройки, как на скриншоте ниже, и нажмите кнопку Сохранить.

Вот и все! Вот такой у нас баннер!

А это баннер-переводчик к уроку. Практика очень хорошо подтверждает теорию!

Читайте также:

Как сделать анимированный баннер в фотошопе

Шаг 1. Настройте размеры и разрешение документа Photoshop —