Создание гифок фотошоп: Создание анимации кадров в Photoshop

Как делать гифки в фотошопе?

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

GIF несложно создать. Если у вас есть Photoshop и несколько минут времени, можно сделать анимированную GIF очень быстро. В этом руководстве я буду использовать версию Photoshop Creative Cloud 2015, но и в других версиях программы нужно выполнить похожие действия.

Вот пример анимированного GIF-изображения, которое можно создать, руководствуясь этой статьей.

Если у вас уже есть созданные изображения, разместите их в отдельной папке. Чтобы загрузить их в Photoshop, перейдите в Файл> Сценарии> Загрузить файлы в стек:

Затем нажмите «Обзор» и выберите файлы, которые нужно использовать в GIF, а затем нажмите кнопку «ОК».
Photoshop создаст отдельный слой для каждого изображения, которое вы добавили. Перед тем, как сделать движущуюся картинку, перейдите ко второму шагу.

Если же у вас нет готовых изображений, разместите каждый кадр анимированного GIF как отдельный слой. Чтобы добавить новый слой, перейдите в Слои> Новый> Слой:

Чтобы переименовать слой, перейдите к палитре в правом нижнем углу экрана, дважды кликните по названию слоя по умолчанию и введите новое имя:
Совет: Если хотите объединить слои так, чтобы они выводились в одном кадре GIF, включите видимость для слоев, которые необходимо объединить. Для этого нажмите на иконку «глаза» слева, чтобы они были активны только для слоев, которые необходимо объединить. Затем нажмите Shift + Ctrl + Alt + E. Photoshop создаст новый слой, содержащий объединенный контент для движущейся картинки.

Перейдите в Окно> Шкала времени. Она позволяет включать и выключать отдельные слои для различных периодов времени, превращая статическое изображение в анимированное:

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

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

Теперь временная шкала должна выглядеть примерно так:

Для этого сначала выберите все слои: Выделение> Все слои.

Затем нажмите на иконку меню в правой части экрана временной шкалы:

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

Каждый слой превратится в кадр GIF:

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

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

Как сохранить движущуюся картинку: перейдите в Файл> Сохранить для Web:

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

Число рядом с GIF определяет, сколько цветов будет сохранено в формате GIF по сравнению с исходным JPEG— или PNG-изображением. Более высокий процент дизеринга обеспечивает передачу большего количества цветов и увеличивает размер файла:

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

Pinterest был первым социальным ресурсом, который разрешил добавлять движущиеся картинки, после чего то же сделал Twitter. А к лету 2015 к ним присоединился Facebook. На любой из этих социальных платформ анимированные гифки могут стать отличным способом выделиться в монотонном потоке новостных лент.

Анимированные GIF-файлы отображаются в электронной почте так же, как и обычные изображения. Так почему бы не заменить неподвижные изображения анимированными?

Это может привлечь внимание читателей и повысит эффективность проводимой кампании. А / B тестирование, проведенное Bluefly, показало, что электронные письма с анимированными GIF-изображениями дают на 12% больше прибыли, чем их статичные версии. Используйте GIF для демонстрации товаров, анонсов событий или иных целей.

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

Данная публикация является переводом статьи «How to Make an Animated GIF in Photoshop [Tutorial]» , подготовленная редакцией проекта.

Как создать Gif анимацию в Фотошоп / Creativo.one

Задумывались ли вы, как создаются анимированные GIF-файлы?  Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!

Результат урока.

Шаг 1

Создайте новый документ (Ctrl + N) с размерами файла  800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои – Стиль слоя – Наложение градиента (Layer> Layer Styles> Gradient Overlay).  Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.

Шаг 2

Создайте новый слой и назовите его Noise Layer. Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр – Шум – Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.

Шаг 3

Нажмите комбинацию клавиш (Ctrl + U) и в появившемся диалоговом  окне настроек коррекции  введите значения Насыщенности (Saturation) 100%: Измените этому слою режим наложения на Мягкий свет (Soft Light).

Примечание переводчика: для того чтобы добиться такого цвета как у автора на скриншоте, можно при коррекции Цветовой тон / Насыщенность (Hue/Saturation) значение Цветового тона (Hue) поставить на – 140.

Шаг 4

Добавьте любой текст, который вы хотите. Здесь мы будем использовать текст логотипа сайта 123RF. В стилях слоя используйте Обводку (Stroke). Значения размера обводки выберите по своим предпочтениям.

Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.

Шаг 5

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

Тиснение (Bevel & Emboss)

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Наложение цвета (Color Overlay)

Внешнее свечение (Outer Glow)

Тень (Drop Shadow)

Шаг 6

Как только вы закончите создавать световые эффекты с помощью стилей слоя, перейдите в палитру слоёв и уменьшите этому слою значение Заливки (Fill) на 0%.

Шаг 7

Дублируйте слой, который вы создали в шаге 5 и отключите этой  копии все стили слоя. Настройте теперь стили так:

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Шаг 8

Ниже результат после того как вы применили стили слоя.

Шаг 9

Теперь мы создадим движущиеся световые пятнышки. Создайте 5 слоев  поверх существующих, и переименуйте их как 1,2,3, R и F. Если у вас свой текст создайте слои в соответствии с вашими буквами. Сгруппируйте эти слои в папку, которой дайте название Light Spots и смените режим наложения на Осветление основы (Color Dodge).

Активируйте инструмент Кисть (Brush Tool), выберите мягкую кисточку, установите Непрозрачность (Opacity) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы можете рассмотреть, как слои выглядят у автора в палитре слоёв.

Шаг 10

Теперь идём в меню Окно – Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.

Примечание переводчика: Для того чтобы активировать шкалу времени, нажмите кнопку Создать временную шкалу для видео (Create Video Timeline) и все ваши слои загрузятся в шкалу времени. Выделен в ней будет тот же слой или группа, что и в палитре слоёв.

Шаг 11

Установите индикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.

Шаг 12

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

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

Шаг 13

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

Шаг 14

Как только все будет готово, перейдите в меню Файл — Сохранить для Web (File > Save for Web) и примените настройки, как показано на скриншоте. После этого нажмите кнопку Сохранить (Save) и сохраните анимацию в формате GIF.

Селективное (Selective)
Случайное (Diffusion)
Постоянно (Forever)

Шаг 15

Вот и готова наша очень крутая анимашка с движущимися световыми пятнышками. Автор желает вам успехов и достижения уровня профи J

Автор: clair123rf

Как создать GIF-анимацию — лучшие сервисы для создания гифок

Анимации формата GIF повседневно используются миллионами пользователей сети. Сегодня трудно представить социальную сеть, мессенджер или даже email-рассылку, где не использовалась бы GIF-анимация – она попросту заполонила весь мир. Несмотря на то, что существует много сервисов с готовыми гифками (на все случаи жизни), потребность в самостоятельном создании подобного рода анимации возникает у многих пользователей. В связи с этим стали появляться новые сервисы, но уже для создания GIF.

Что это за ресурсы и как ими воспользоваться, поговорим в сегодняшней статье.

Как создать гифку из изображений

Для этого подойдут такие сервисы, как Brush Ninja, Ezgif, Gifovina, Canva и многие другие. Подробнее о них мы поговорим чуть позже, а пока давайте рассмотрим незаменимый инструмент для коррекции фото – Photoshop. Это не онлайн-сервис, но умение делать в нем гифки не будет ни для кого лишним.

Делаем GIF в Adobe Photoshop

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

Делаем гифку в Фотошопе:

1. Запускаем на компьютере графический редактор и создаем новый проект. Желательно указать размер, равный изображениям, из которых будет создана анимация. Но не волнуйтесь, если разрешение будет выбрано другое, мы всегда можем его подкорректировать.
2. Теперь нам потребуется создать новые слои – для этого в нижнем правом углу нажимаем на вторую иконку от правого края. Слой в Фотошопе – это как холст, на котором мы можем рисовать и добавлять новые элементы, чтобы с ними взаимодействовать. В данном случае слои нам нужны, чтобы разместить на них изображения. Для каждого изображения свой собственный слой – это необходимое условие для GIF-анимации.
3. Мы будем создавать анимацию на основе двух изображений, поэтому было создано два слоя. Теперь нужно на каждый из них разместить фотографию – просто выбираем в правой части один из слоев и перемещаем на него фотографию.
4. На каждом из слоев будет размещено по одному изображению. Обратите внимание, что область заполнена у нас не вся. Если ее не обрезать, то белые поля будут отображаться и в гифке. Исправить это можно с помощью клавиши C – нажимаем ее и корректируем размер холста мышкой.
5. Теперь можно переходить к созданию анимации в формате GIF – для этого в верхней части выбираем «Окно» и включаем шкалу времени.
6. Выбираем «Создать шкалу времени для видео».
7. Осталось отредактировать время перехода от одного изображения к другому. Для этого есть временная шкала, в которой все регулируется ползунками справа и слева от расположенного слоя. Проверить, как выглядит анимация, можно с помощью кнопки запуска в левой части окна.
8. Осталось сохранить готовую анимацию. Чтобы это сделать, выбираем «Файл» -> «Экспортировать» -> «Сохранить для Web (старая версия) …».
9. Указываем формат GIF и жмем «Сохранить…».

Теперь вы знаете, как сделать анимацию в Фотошопе. Это был самый простой, но не единственный вариант создания гифки через данный инструмент. Если вы хотите проделать что-то масштабное, то рекомендую изучить более сложные программы – Adobe Premier Pro или Adobe After Effects.

Brush Ninja

Brush Ninja – крайне простой сервис для создания гифок в режиме онлайн. В нем мы можем не только создать анимацию из изображения, но и из рисунка, нарисованного своими руками.

Рассмотрим краткую инструкцию:

1. Переходим на официальную страницу сервиса и начинаем создавать будущую анимацию: либо добавляем изображение через шестеренку в верхнем правом углу, либо рисуем свое изображение на нескольких холстах – их совокупность будет использоваться в анимации.
2. Когда создано несколько слоев, анимация уже готова. Осталось ее сохранить на рабочий стол – для этого кликаем по кнопке «Export» и выбираем нужную директорию для загрузки.

Как видите, пользоваться сервисом Brush Ninja довольно просто. Не будем останавливаться на нем и перейдем к следующим, не менее функциональным инструментам.

Ezgif

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

Рассмотрим, как создать GIF-анимацию в данном инструменте:

1. Переходим по ссылке, загружаем необходимое количество картинок для создания гифки и жмем на кнопку «Upload and make a GIF!».
2. В результате перед нами отобразится набор первичных параметров, которые можно задать для будущей анимации. Устанавливаем необходимое значение и кликаем по кнопке «Make a GIF!».
3. После этого ниже будет отображена созданная гифка. Для ее редактирования доступен различный набор функций – используйте их, когда нужно добиться наилучшего результата. Как только изменения будут внесены, останется нажать на кнопку «Save», чтобы сохранить GIF-изображение на компьютер.

На этом создание GIF в Ezgif завершено, перейдем к следующему инструменту.

Gifovina

Аналогичен предыдущему сервису, но без возможности добавления изображения с компьютера – разрешено загружать картинки только из интернета либо напрямую с камеры. Также Gifovina позволяет создавать различные видеоэффекты, подобные тем, что есть в программе Windows Movie Maker.

Алгоритм использования довольно прост:

1. Открываем официальную страницу онлайн-сервиса и добавляем нужное количество изображений одним из удобных способов. Вносим необходимые изменения для создания анимации и нажимаем на кнопку «Готово».
2. В появившемся окне будет отображена созданная анимация. Для ее загрузки нажимаем на кнопку «Скачать».

Вот такими несложными действиями мы смогли создать GIF-анимацию на сервисе Gifovina.

Canva

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

Воспользуемся небольшой инструкцией для создания анимированной GIF:

1. Переходим на главную страницу сайта и в верхнем правом углу кликаем по кнопке «Зарегистрироваться».
2. После успешной регистрации мы попадаем в личный кабинет – в нем находим блок «Анимация для социальных сетей» и кликаем по нему левой кнопкой мыши.
3. В отобразившемся окне для нас открывается доступ ко всем возможностям сервиса для создания гифки. Мы также можем добавить свои фотографии, как и в предыдущих примерах, но давайте рассмотрим создание GIF с помощью шаблона. Для этого переходим в соответствующий раздел через левую панель и выбираем один из примеров.
4. Добавим еще один элемент для примера:
5. Сюда же мы можем добавить новый цветовой фон – для этого перейдем в раздел «Фон» и выберем для примера заливку другого цвета.
6. Вот такая получилась анимация. При необходимости вы можете добавить и другие элементы. Для сохранения нажмем в верхнем правом углу на кнопку «Скачать», укажем формат GIF и еще раз нажмем на «Скачать».

Мы также можем предоставить доступ к проекту и другим пользователям – достаточно в верхнем меню нажать на кнопку «Поделиться» и скопировать ссылку. Такая возможность позволяет работать в команде и создавать продукт вместе. Попробуйте – это интересно!

Giphy

Giphy – один из самых популярных сервисов для распространения GIF-изображений. Он содержит более миллиона различных гифок, доступных для скачивания. Помимо этого, здесь также можно создавать собственные GIF-анимации. Рассмотрим, как это можно сделать:

1. Первым делом нам потребуется зарегистрировать свой аккаунт – для этого переходим на главную страницу и в верхнем правом углу кликаем по кнопке «Log in».
2. Выбираем «Join GIPHY!».
3. Проходим регистрацию и попадаем в личный кабинет. Для создания собственной GIF кликаем по кнопке «Create».
4. Выбираем «GIF» и загружаем картинку с компьютера или интернета.
5. После этого перед нами отобразится новое окно – здесь и происходят все процессы для создания анимации в формате GIF. Для примера добавим один из доступных стикеров – перейдем в раздел «Stickers» и выберем один из элементов.
6. Корректируем по размеру и местоположению стикер, затем в нижнем правом углу нажимаем «Continue to Upload».
7. В результате гифка будет загружена на сервис. Для того чтобы скачать ее на компьютер, нажимаем на кнопку «Media», а затем на «Download» напротив строки «Small».

Таким образом, мы получим готовое GIF-изображение на компьютер. Также мы можем сразу поделиться анимацией в социальных сетях – для этого необходимо на этой же странице выбрать «Copy link» и ссылку из строки «GIF Link».

Gifpal

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

Воспользоваться Gifpal можно следующим образом:

1. Переходим по ссылке и нажимаем «Get Started».
2. Выбираем размер будущей гифки и загружаем необходимую фотографию.
3. В правом окне нажимаем на плюсик, с помощью правой иконки добавляем еще одну картинку, а затем еще раз жмем на плюсик. Обратите внимание, что в левой части мы также можем добавить фильтры к загружаемым изображениям.
4. Для создания гифки кликаем по кнопке «Build GIF».
5. Загружаем созданную гифку к себе на компьютер с помощью кнопки «Save».

Это были 7 главных инструментов для создания GIF-анимаций из изображений. Рекомендуем остановиться на Giphy и Canva – это многофункциональные онлайн-сервисы, позволяющие создавать практически любые гифки. Если же вам нужно создать что-то более креативное, то лучше воспользоваться Фотошопом либо другими подобными программами.

Как создать гифку из видео

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

Во всех них можно сделать гифку из видео по примеру, рассмотренному ранее – алгоритм аналогичен созданию анимации из картинки. 

Но есть еще один сервис, с помощью которого можно сделать GIF из видеоклипа, и заточен он исключительно под приложения типа Instagram, YouTube, Vine и т.д. Давайте рассмотрим, как создать GIF из клипа на Ютубе с помощью сервиса GIFS:

1. Заходим в онлайн-сервис, вставляем ссылку на видео и жмем «Continue».
2. В результате мы попадаем в окно редактирования видеофайла. В левой части находятся различные инструменты для создания эффектов, в нижней части – временная шкала. Чтобы создать гифку, кликаем по нужной области шкалы – указываем длительность анимации и в верхнем правом углу нажимаем «Create Gif».
3. Как только гифка будет создана, мы можем ее скачать одним из доступных способов:

Как видите, создать GIF-анимацию из видеоролика несложно. Обратите внимание, что в нижнем правом углу добавляется лейбл сайта. Убрать его можно только в том случае, если будет приобретен Premium-аккаунт за 1.99$ в месяц.

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

Как сделать GIF анимацию в Фотошопе, сохраняем анимированный gif

Ранее на сайте мы рассматривали сторонние сервисы создания гиф анимации, однако большинство из них запросто может заменить обычный Фотошоп. Анимированные GIF файлы с его помощью делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я:

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

Процесс занял буквально минут 5-10. Тут важно просто внимательно выполнять все шаги. В конце поста найдете англоязычный видеоурок по данной теме.

Добавление изображений GIF анимации в Photoshop

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

Далее в пункте меню Window (Окно) включаете отображение панели Timeline (Шкала времени). Инструмент отвечает за создание GIF анимации в Photoshop. Расположите его снизу в рабочей области.

В центре данной панели есть выпадающий список, где нужно выбрать вариант «Create Frame Animation» и кликнуть по кнопке. В результате этого действия Timeline немного преобразится, и вы должны увидеть в качестве первого кадра картинку из самого верхнего слоя.

На следующем шаге выделяете все слои в проекте (кликаете по ним удерживая клавишу Ctrl). После этого открываете контекстное меню в правом верхнем углу окна Timeline и по выбираете «Make Frames From Layers».

Из всех видимых и выделенных слоев Adobe Photoshop создаст кадры анимированного GIF. В результате увидите их в панели Timeline.

Настройки GIF анимации в Фотошопе

Здесь вам нужно будет указать 2 вещи: продолжительность отображения разных кадров + число повторений гифки. Начнем с первого. Под каждым объектом-картинкой в Timeline найдете время показа и стрелочку вниз. Кликаете по ним и во всплывающем меню выбираете длительность карда.

Элементам можно указывать разное время либо задать параметр одновременно для нескольких из них (совместное выделение как и в слоях — с помощью Ctrl).

Чтобы «зациклить» GIF в Фотошопе при создании анимации выбираете значение Forever в соответствующей настройке как показано на скриншоте ниже.

Тамже есть возможность указать любое нужное вам число повторений. Рядом находится кнопка Play, позволяющая проиграть анимированный GIF и посмотреть как будет выглядеть итоговый результат.

Сохранение GIF анимации в Фотошоп

В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью горячая клавиша Alt + Shift + Ctrl + S все еще работает.

В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.

Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.

Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.

В открывшемся окне будут разные настройки видео, но ничего дополнительно менять не нужно, просто кликаете по кнопке Render. В итоге получите mp4 файл со слайдшоу фотографий/изображений.

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

Если у вас остались еще какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.

Создание gif картинки из нескольких фото. Урок фотошопа.

Создание gif картинки из нескольких фото. Урок фотошопа.

Многие из вас помнят мою статью о Salers, в которой все свои фотографии я показала вам в виде gif-картинок, в виде маленького слайд-шоу, которое, на мой взгляд гораздо интересней смотреть,  нежели длинный ряд фотографий. Из ваших комментариев я поняла, что многим понравилась такая презентация, поэтому решила написать урок фотошопа «Создание gif картинки из нескольких фото».

Я взяла несколько фотографий, сделанных мною во Франции. Это весенняя Франция, красивая и впечатляющая. Я собираюсь показать ее вам в одной из будущих записей.

Не будем забегать вперед и начнем наш урок.

1. Я специально подготовила 4 фотографии и положила их в отдельную папку. Лучше, если эти фотографии будут одного размера, тогда вашу гифку будет сделать гораздо легче. Но я взяла фото разного размера, предварительно их уменьшив до 550 пк в ширину для широких фото, и 310 пк в ширину — для узких. Все фотографии получились одной высоты в 413 пк.

2. Открываем программу фотошоп и в ней меню — файл — открыть.

3. Ищем свою папку с подготовленными фото и кликаем левой кнопкой мыши на первую фотографию, зажимаем клавишу Shift, и кликаем по последней, тогда они выделяются все. Жмем ОТКРЫТЬ.

4. В вашем фотошопе открываются все фотографии. Начинаем создавать слои, которые нам понадобятся для анимации или создания gif картинки. Я открыла специально широкую фотографию. И она будет 1-ым слоем.

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

5. Чтобы создать второй слой, нам нужно кликнуть по иконке, на которую показывает стрелка. На втором слое мы будем располагать другую фотографию.

6. Топаем в наши фотографии, которые открыты рядом с первой, и выбираем узкую фотографию. Напоминаю, что это необязательно… С одинаковыми фотографиями легче работать.  Итак, находим нужную фотографию, идем в меню — выделение — выделить ВСЕ.

7. После этого вокруг картинки начнут бегать маленькие тире, это и есть выделение. Теперь идем в меню — редактирование — скопировать.

8. Возвращаемся к нашей первой фотографии, которая уже со слоями, идем в меню —  редактирование — вставить. И наша узенькая фотка вставляется на новый слой. Но она не может оставаться такой узкой. Нам нужно добавить фон под нее. Для этого кликаем по иконке (1), перетаскиваем слой под узкое фото, затем пипеткой (2) подбираем любой понравившийся вам цвет, кликнув курсором по фото. Я выбрала светло-зеленый. И заливаем новый слой, для чего мы активизируем инструмент заливка (3) и потом кликаем левой кнопкой мыши по рабочему полю фотографии. Обратите внимание, что в этот момент активным должен быть новый прозрачный фон. Активные слои выделяются синим цветом. После ваших действий прозрачный слой окрасится.

9. Теперь нам надо объединить два слоя (узкую фотографию и фон). Наступаем левой кнопко мыши на первый слой. Зажимаем клавишу Shift и кликаем по второму слою. Они выделились синим цветом. Идем в меню — слои — объединить слои.

10.  Получаем такую картинку.

11. Повторяем пункты 6 — 10 моего урока, чтобы создать слой с еще одной узкой фотографией. Он у меня слой 2. И создаем еще один новый прозрачный слой для размещения там последней широкой фотографии (слой 3).

12. Для этого выполняем пункты  урока 6, 7, 8. Все. Готово. Слои для нашей gif картинки мы создали.

13.  Можно начинать анимирование и с вашими слоями, но я решила создать подложку под нашу картинку. Для этого топаем в меню — изображение — размер холста.  Увеличиваем наш холст на 50 пк по ширине и высоте. Жмем ОК.

14. У нас получилось вот так.

15. Создаем новый слой (у меня слой 4), перетаскивам его в самый низ под все фотографии, вы можете сделать подложку того же цвета, что и фон в ваших узких фотографиях. Я выбрала цвет подложки немного темнее.

Оформляете вашу подложку любым способом. Надеюсь, что вы знаете, как выставляются параметры слоя, но если нет, то это просто. Наступаете на нужный слой и кликаете по нему дважды левой кнопкой мыши и у вас открывается окно с параметрами вашего слоя, а там отдельно открываете каждый отдельный параметр и вы применяете или изменяете его настройки.  Я применила эффект в параметрах слоя Внутренняя тень и Внутреннее свечение  с параметром слоя Умножение… Цвет тени немного темнее тона подложки. Но здесь я не берусь навязывать вам мое мнение. У вас есть свое видение. Пробуйте, меняйте настройки. Это не страшно. Всегда можно вернуться к первоначальному результату, для чего идете в меню — редактирование — вернуться назад.

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

Кстати, на моей последней фотографии куст глицинии, ее много во Франции и время ее цветения конец апреля — начало мая. Этот куст я сфотографировала в саду у родителей моего друга. В моем болгарском дворе тоже есть кусты глицинии и думаю, что скоро она порадует нас своими цветами, похожими на сиреневые облака.

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

17.  Перетаскиваем слой с логотипом на самый верх, как у меня. При необходимости увеличиваем логотип до нужного размера, для чего идем в меню — редактирование — масштабирование. С зажатой клавишей Shift растягиваем или уменьшаем логотип. Активируем инструмент «перемещение» (самый верхний инструмент со стрелкой и + в панели инструментов) и перемещаем логотип на нужное место.

Все подготовлено с созданию анимации.

17. В самом первом кадре анимации у вас должна быть открыта видимость со слоем подложки, первый слой с вашей фотографией ( в моем случае слой 0) и логотип (позиция 1). Для хорошего просмотра вашей фотографии устанавливаем время задержки 5 сек (позиция 2). После определения времени задержки и установки его в первом кадре, все последующие кадры будут с заданным временем 1 кадра, т.е. 5 сек в моем случае. Для создания второго кадра жмем на иконку, показанную на позиции 3.

18.  Во втором кадре меняем видимость слоя с первой картинки на вторую, так же, как показано на моем скрине.

Последующие кадры делаем также.  Главное запомните: 1 кадр — 1 фото, 2 кадр — 2 фото и так далее..

19. Все, мы выставили все кадры анимации. Остается только просмотреть наше творение.

20. Для просмотра изображения жмем на иконку,  знакомую нам у плееров (См. скрин).

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

Безусловно, что можно увеличить количество цветов до 256, но это увеличит вес нашей картинки, а хостинг «не резиновый».  Сохраняйте вашу картинку и с удовольствием используйте ее для своих статей.  У вас должно получиться нечто подобное.

Цветущие каштаны белые и розовые, глициния радуют взгляд и поднимают настроение.

Надеюсь, что моя статья «Создание gif картинки из нескольких фото. Урок фотошопа.»  и другие мои уроки фотошопа вам пригодятся, и что вы сможете делать красивые gif картинки из ваших фотографий. Удачи вам и процветания, терпения и упорства! И у вас  все получится.

Похожие записи:

Понравилась статья? Поделись с друзьями!

Форма поддержки блога может не отображаться в браузере Internet Explorer!

Хотите поддержать, откройте сайт в другом браузере… Спасибо!

Как сделать GIF анимацию в Фотошопе

Способ 1: Ручное анимирование объектов

Первый метод подходит тем пользователям, кто хочет применять Adobe Photoshop для ручного анимирования добавленных на холст слоев. Это может быть произвольная геометрическая фигура, готовое изображение или текст. Хоть этот графический редактор и не совсем годится для выполнения такой задачи, с созданием простой GIF он справится, а разделить этот процесс можно на несколько шагов.

Шаг 1: Включение «Шкалы времени»

Анимирование в Adobe Photoshop происходит при помощи расположения и редактирования объектов на «Шкале времени». По умолчанию это окно скрыто в программе, поскольку не используется в стандартной рабочей среде. Для его активации откройте меню «Окно» и нажмите «Шкала времени».

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

Шаг 2: Подготовка элементов для GIF

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

Шаг 3: Настройка эффекта появления

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

1. Переходите к работе с осваиваемой панелью и нажмите там по кнопке «Создать шкалу времени для видео».
2. Каждый слой поместится на отдельную дорожку, а это значит, что можно выбрать любой из них и приступить к редактированию.
3. В нашем случае рассмотрим небольшой логотип. Разверните его слой для просмотра всех доступных анимационных действий.
4. В примере мы настраиваем эффект появления, реализуемый при помощи функции «Непрозрачность». Кликните по этой строке, чтобы создать первую ключевую точку, а она запомнит, в каком состоянии находится объект на текущий момент.
5. Находясь на этой контрольной точке, измените его непрозрачность до 0%, чтобы полностью скрыть с рабочего пространства.
6. Передвиньте ползунок на несколько секунд и создайте еще одну точку, а затем выкрутите непрозрачность обратно на 100%.
7. Воспроизведите анимацию и взгляните на окно предпросмотра для ознакомления с результатом. Двумя ключевыми точками мы добились эффекта появления путем изменения значения непрозрачности объекта в каждой из них.

Точно таким же образом вы можете изменять любой параметр объекта, включая цвет, положение, эффекты наложения и все остальное, что есть в Adobe Photoshop. При этом стоит учесть особенность работы присутствующих ключей. Выберите любую из дорожек, будь то «Позиция», «Непрозрачность» или «Стиль», и произведите там какое-нибудь изменение. Оно все равно будет применено вне зависимости от типа действия, с чем мы убедимся в следующем этапе.

Шаг 4: Анимация движения объектов

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

1. В качестве перемещаемого объекта используем текст, заодно проверим описанные ранее сведения. Разверните блок с его слоем для появления вспомогательных дорожек.
2. Видно, что программа не определила функцию «Позиция», поэтому придется выбрать другой вариант.
3. Если вы точно уверены, что «Перспектива» в этой анимации использоваться не будет, значит, можно задействовать эту строку для изменения позиции текста. Создайте первый ключ и поместите надпись в исходное положение через инструмент «Перемещение».
4. Создавайте последовательные ключевые точки, понемногу перемещая текст в конечное положение, чтобы обеспечить плавность движения.
5. Периодически воспроизводите анимацию и корректируйте ключи для улучшения плавности.
6. Если с ключами неудобно работать в текущем представлении таймлайна, измените его масштаб или увеличьте цикл для добавления новых точек.
7. При необходимости замены или добавления объекта нажимайте по кнопке в виде плюса.

Шаг 5: Сохранение GIF-на компьютере

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

1. Откройте меню «Файл», наведите курсор на «Экспортировать» и выберите вариант «Сохранить для Web». Если дополнительные настройки анимации вам не нужны, используйте «Сохранить как» и укажите в выпадающем меню правильный формат.
2. При экспорте найдите формат GIF.
3. Поменяйте цвет подложки, если этого не было сделано ранее.
4. Отредактируйте размер изображения и количество повторов.
5. Перед нажатием по кнопке «Сохранить» еще раз проверьте правильность выбранных параметров.
6. Задайте имя файла, укажите для него путь сохранения и подтвердите это действие.

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

Способ 2: Создание GIF из фото

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

1. На «Шкале времени» в этот раз поменяйте режим на «Создать анимацию кадра», выбрав этот вариант в выпадающем меню.
2. Откройте «Файл», наведите курсор на «Сценарии» и щелкните по пункту «Загрузить файлы в стек».
3. В появившемся окне кликните «Обзор».
4. Сразу же загрузите все фотографии, которые должны входить в анимацию.
5. Если хотите выровнять их, активируйте эту функцию перед добавлением.
6. Кнопкой «Создать анимацию кадра» сформируйте анимацию.
7. Разверните меню действий и найдите там пункт «Создать кадры из слоев», чтобы добавить остальные изображения.
8. Отредактируйте их последовательность, меняя кадры местами, если в этом возникла потребность.
9. Для продления воспроизведения каждого кадра используйте задержку или не настраивайте ее, если скорость проигрывания по умолчанию вас устраивает.
10. Перед сохранением проверьте воспроизведение и создайте GIF так, как это было показано в завершающем этапе предыдущего способа.

Если после прочтения инструкций вы решили, что Adobe Photoshop не подходит для реализации задуманной анимации, советуем ознакомиться с другими программами, предназначенными для работы с GIF. Детальный обзор на популярных представителей такого софта есть в отдельной статье на нашем сайте.

Подробнее: Лучший софт для создания анимации

Мы рады, что смогли помочь Вам в решении проблемы.

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Как сделать GIF анимацию в Фотошопе: пошаговая инструкция

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

Подготовительные работы

Анимация будет создаваться на Шкале времени, которая находится в нижней части окна программы.

В случае, когда данная шакала отключена, ее можно активировать в меню “Окно”.

Если шкала временно не нужна, ее можно свернуть. Для этого щелкаем правой кнопкой мыши по шапке инструмента, в раскрывшемся меню выбираем нужную команду. Либо можно просто дважды щелкнуть по шапке левой кнопкой мыши.

Аналогичным образом шкала разворачивается.

Создаем анимацию

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

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

1. Размещаем рамку и саму надпись на разных слоях. Фон на обоих слоях должен быть прозрачный.
2. Переходим на шкалу времени, где нажимаем кнопку “Создать временную шкалу для видео”.
3. В итоге мы получим такой результат. Верхнюю границу шкалы можно сдвинуть вверх с помощью зажатой левой кнопки мыши, чтобы вместить всю информацию. Как мы видим, оба слоя, за исключением фонового, появились здесь в виде отдельных дорожек.
4. Вариантов анимации может быть множество. Мы попробуем сделать ее по следующему сценарию: сначала появляется рамка, затем надпись – слева направо.
5. Начнем с рамки. Щелкаем по небольшой стрелке рядом с правым верхним углом миниатюры слоя.
6. В левой части шкалы отобразятся свойства выбранного слоя. Здесь мы щелкаем по значку в виде секундомера рядом с параметром “Непрозр.”. 
7. После этого на шкале отобразится ключевой кадр, или, другими словами, ключ в виде желтого ромбика.
8. Теперь нам нужно настроить состояние слоя для этого ключа. Согласно нашей задаче, рамка должна возникнуть плавно, следовательно, в начале ее не должно быть видно. Поэтому в редакторе слоев устанавливаем непрозрачность слоя на уровне 0%.
9. Перемещаем ползунок шкалы немного вперед и снова создаем ключ. Теперь уже жмем не значок в виде секундомера, а маленький желтый ромбик рядом.
10. Для этого ключа в палитре слоев задаем непрозрачность на уровне 100%.
11. У нас есть возможность проверить эффект, двигая ползунок или используя управляющие воспроизведением кнопки в верхней левой части шкалы.
12. Если после просмотра эффекта требуется ускорить его появление или, наоборот, растянуть подольше, можно сдвинуть финальный ключ в нужную сторону.
13. Итак, появление рамки сделали и можно переходить к тексту.
14. Сдвигаем ползунок на шкале немного правее последнего ключа, когда рамка уже полностью видна.
15. В палитре слоев создаем новый, заливаем его белым цветом.
16. После этого нужно немного изменить расположение слоев. В самом верху должен располагаться слой с рамкой, затем – с белой заливкой, и после – с текстом.
17. На холсте выравниваем левую границу белого фона с началом текста.Для этого нам понадобится инструмент “Перемещение”, который можно выбрать на боковой панели. 
18. На шкале времени начало всех слоев должно быть выровнено.
19. Сдвигаем ползунок вперед и устанавливаем чуть правее конечного ключа слоя с рамкой. Открываем свойства слоя с белым фоном. Щелкаем по значку в виде секундомера рядом с параметром “Позиция”. Таким образом мы установим ключ для начальной позиции.
20. Сдвигаем ползунок вперед и создаем еще один ключ-позицию.
21. Взяв инструмент “Перемещение”, на холсте сдвигаем слой с белым фоном вправо, чтобы весь текст стал видимым.
22. Методом сдвига ползунка (или кнопок управления воспроизведением) проверяем, правильно ли работает созданная анимация.Если требуется, можно внести финальные корректировки в дорожки – сместить ключи, чтобы, например, отредактировать скорость появления букв и т.д.
23. Теперь нужно обрезать лишнюю часть анимации. Для этого, зажав левую кнопку мыши, тянем правый конец любой дорожки влево до той длительности, которая нам нужна.
24. Аналогичные действия выполняем по отношению к другим дорожками.
25. Переходим в меню “Файл”, выбираем пункт “Сохранить для Web”, чтобы сохранить анимацию.
26. Формат, который нам нужен – GIF. В качестве параметра повтора выбираем значение “Постоянно” и жмем кнопку “Сохранить”.
27. Выбираем папку для сохранения, указываем имя файла и снова щелкаем “Сохранить”.Анимация в формате GIF работает в веб-браузерах и специально предназначенных для этого программах. С помощью стандартных приложений для просмотра фотографий и изображений воспроизвести анимацию не удастся.
28. А у нас получился вот такой результат.

Заключение

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

Как создать анимированный GIF в Photoshop [Урок]

Как сделать GIF

1. Загрузите изображения в Photoshop.
2. Откройте окно временной шкалы.
3. В окне временной шкалы щелкните «Создать анимацию кадра».
4. Создайте новый слой для каждого нового кадра.
5. Откройте тот же значок меню справа и выберите «Создать кадры из слоев».
6. Под каждым кадром выберите, как долго он должен отображаться до перехода к следующему кадру.
7. В нижней части панели инструментов выберите, сколько раз вы хотите повторять цикл.
8. Просмотрите свой GIF, нажав значок воспроизведения.
9. Сохраните и экспортируйте свой GIF.

Если вы вообще какое-то время проводили в Интернете, вы, вероятно, сталкивались с анимированным GIF-файлом. Это файл изображения, который позволяет отображать анимированные изображения, из-за чего создается впечатление, что изображение движется. Думайте о них как о гибридном изображении и видео.

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

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

В следующем руководстве по созданию анимированных GIF-файлов я использую версию Photoshop Creative Cloud 2015, но в других версиях действия должны быть аналогичными.

Как создать анимированный GIF в Photoshop

Вот пример анимированного GIF, который вы можете создать с помощью этого урока:

Хорошо, приступим.

Шаг 1. Загрузите изображения в Photoshop.

Если у вас уже есть изображения …

Соберите нужные изображения в отдельной папке. Чтобы загрузить их в Photoshop, щелкните Файл > Сценарии > Загрузить файлы в стек.

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

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

Если у вас еще нет созданной серии изображений …

Создайте каждый кадр анимированного GIF как отдельный слой Photoshop. Чтобы добавить новый слой, выберите Layer > New > Layer.

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

Когда у вас есть слои и вы назвали их все, вы готовы ко второму шагу.

Pro Совет: Если вы хотите объединить слои, чтобы они отображались в одном кадре в вашем GIF, включите видимость для слоев, которые вы хотите объединить (щелкнув «глаз» слева от имени каждого слоя, чтобы только глаза для слоев, которые вы хотите объединить, открыты). Затем нажмите Shift + Command + Option + E (Mac) или Shift + Ctrl + Alt + E (Windows). Photoshop создаст новый слой, содержащий объединенный контент, который вы также должны переименовать.

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

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

Окно временной шкалы появится внизу экрана. Вот как это выглядит:

Шаг 3: В окне временной шкалы нажмите «Создать анимацию кадра».«

Если он не выбран автоматически, выберите его из раскрывающегося меню, но затем обязательно щелкните его, иначе параметры покадровой анимации не появятся.

Теперь ваша временная шкала должна выглядеть примерно так:

Шаг 4: Создайте новый слой для каждого нового кадра.

Для этого сначала выберите все ваши слои, перейдя в верхнее меню навигации и выбрав Select > All Layers.

Затем щелкните значок меню справа от экрана временной шкалы.

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

Шаг 5: Откройте тот же значок меню справа и выберите «Создать кадры из слоев».

Это сделает каждый слой рамкой вашего GIF.

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

Для этого щелкните время под каждым кадром и выберите, как долго вы хотите, чтобы он отображался.В нашем случае мы выбрали 0,5 секунды на кадр.

Шаг 7: В нижней части панели инструментов выберите, сколько раз вы хотите, чтобы он повторялся.

По умолчанию будет указано Once , но вы можете зацикливать его столько раз, сколько захотите, включая Forever. Щелкните Другое , если вы хотите указать произвольное количество повторений.

Шаг 8: Просмотрите свой GIF, нажав значок воспроизведения.

Шаг 9. Сохраните и экспортируйте свой GIF

Доволен вашим GIF? Сохраните его для использования в Интернете, перейдя на верхнюю панель навигации и щелкнув Файл > Экспорт > Сохранить для Интернета (устаревшая версия)…

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

Число рядом с файлом GIF определяет, насколько большие (и насколько точные) цвета GIF будут сравниваться с исходными файлами JPEG или PNG. Согласно Adobe, более высокий процент дизеринга приводит к появлению большего количества цветов и деталей, но при этом увеличивается размер файла.

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

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

Как использовать GIF в маркетинге

1) В социальных сетях.

Pinterest был первым, кто включил анимированные GIF-файлы, за ним последовал Twitter.К лету 2015 года Facebook также поддержал идею GIF. Затем Instagram изменил правила игры, добавив Boomerang, который позволяет пользователям снимать и публиковать собственные GIF-изображения. В любой из этих социальных сетей анимированные GIF-файлы могут стать отличным способом выделиться в многолюдной ленте.

Например, посмотрите, как Product Hunt использовала GIF для продвижения форума на своем веб-сайте:

111 продуктов, которыми люди пользуются каждый день ✨

Добавьте свой любимый 👉 https://t.co/TMub7DKLul pic.twitter.com/QyIaDrPmpn

— Product Hunt (@ProductHunt) 6 июля 2017 г.

2) В письмах.

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

Это может не только помочь привлечь внимание получателей с помощью новизны, но и напрямую повлиять на вашу прибыль. Для некоторых брендов включение анимированного GIF в электронные письма коррелировало с увеличением дохода на 109%. Использование бесплатного программного обеспечения для электронного маркетинга HubSpot — простой способ добиться такого увеличения на вашем собственном сайте.

Используйте GIF-файлы, демонстрируя продукты, делая объявления о мероприятиях или иным образом увлекая читателей. Посмотрите гифку из магазина женской одежды Ann Taylor LOFT, представленную ниже: Они сделали подарок таким, как будто он трясет, чтобы создать интригу и побудить получателей щелкнуть мышью, чтобы «развернуть» свой подарок.

Источник: Litmus

3) В сообщениях в блогах.

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

Например, вот простой анимированный GIF, созданный другим маркетологом Джинни Минео, чтобы объяснить определение призыва к действию для сообщения в блоге:

И, наконец, один из наших старых фаворитов: анимированный GIF из поста о рецептах офисной кухни.

Как вы будете использовать GIF в своем маркетинге? Делитесь с нами в комментариях.

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

Как сделать GIF в Photoshop

Эта страница может содержать ссылки на наших спонсоров или партнерские ссылки. Учить больше.

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

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

Если вас интересуют потрясающие гифки — обязательно ознакомьтесь с нашими публикациями с красивыми примерами синемаграфов.

Вот краткое описание того, как создать GIF в Photoshop:

Шаг 1: Загрузите изображения или создайте собственное изображение.
Шаг 2: Включите окно временной шкалы и установите для него значение «Создать анимацию кадра».
Шаг 3: Скопируйте и вставьте изображения, при необходимости трансформируя их, в новые слои для каждого из них.
Шаг 4: Создайте рамки из слоев.
Шаг 5: Определите время / задержку для каждого кадра.
Шаг 6: Измените настройку цикла GIF на «Навсегда».
Шаг 7: Воспроизведите свой GIF.
Шаг 8: Сохранить для Интернета как GIF.

[youtube https: // www.youtube.com/watch?v=bOBz6_lhHXM]

Как сделать GIF в Photoshop:

Шаг 1:

Photoshop может создавать анимированные GIF-файлы, используя слои — добавляйте слои, нажимая кнопку в форме заметки в правом нижнем углу Photoshop

Эти слои можно включать / выключать, и эти различные слои будут создавать различные кадры для нашей анимации.

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

Шаг 2:

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

Шаг 3:

Вставьте еще один квадрат и создайте еще один слой — выделите слой, который вы хотите отредактировать, и нажмите Ctrl + t на Mac, чтобы вызвать параметр «Преобразовать», чтобы повернуть квадрат так, как вам хочется. Совет: чтобы повернуть изображение ровно на 15 градусов, удерживайте нажатой клавишу Shift в режиме преобразования.

Дублируйте слой, который вы только что повернули, чтобы повернуть квадрат еще больше — повторяйте столько раз, сколько хотите.

Шаг 4:

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

Шаг 5:

Выпадающее меню под каждым кадром в окне временной шкалы определяет продолжительность времени / задержки между кадрами. В этом примере мы выбрали 0,2 секунды

Шаг 6:

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

Шаг 7:

Используйте элементы управления в окне шкалы времени, чтобы воспроизвести GIF.

Шаг 8:

Чтобы сохранить GIF, выберите «Файл»> «Сохранить для Интернета». Убедитесь, что тип файла — «GIF».

А вот и наш конечный продукт!

Вы можете просмотреть некоторые уже созданные файлы GIF и даже несколько сайтов, которые помогут вам создать свои собственные:

Изображение предоставлено Крисом Пьяшиком

Как создать анимированный GIF в Photoshop менее чем за 10 минут

Как создать анимированный GIF в Photoshop www.sleeklens.com

Сегодня у нас есть урок, посвященный тому, как создать анимированный GIF в Photoshop.

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

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

Это может быть последовательность из 10 или также из 100, количество изображений не имеет значения , вы решаете, как долго вы хотите, чтобы ваш GIF был b, допустим, нет ограничений на количество кадров, которое вы будете используйте для gif, но , чем больше файлов вы используете, тем длиннее GIF и тем больше размер файла будет .Что действительно важно, так это то, что в конце вы получите супер крутой GIF, и в целом это займет у вас всего пару минут, чтобы создать в Photoshop.

Давайте начнем с нашего учебного пособия:

1. Откройте Photoshop CS 6 и, чтобы создать GIF, мы должны на уменьшить размер наших изображений на . Это важно, наш GIF-файл не должен быть большим, потому что GIF-файлы небольшого размера просто быстрее загружаются в Интернете. Итак, нажмите «Файл» -> «Сценарии» -> «Обработчик изображений».
   
2. Затем выберите папку, в которой сохраняются изображения, которые вы хотите использовать для своего GIF. Теперь вы нажимаете «Изменить размер по размеру» , чтобы установить размер изображения. Я рекомендую использовать изображение размером не более 1000 пикселей на самой длинной стороне вашего изображения, GIF-файлы обычно очень маленькие, поэтому можно использовать размер изображения от 400 до 1000 пикселей. После того, как вы выбрали размер изображения, просто нажмите «Выполнить» .
3. Теперь ваши изображения уменьшены до вашего размера, и вы найдете их в той же папке, где сохранены ваши исходные изображения.Итак, теперь нам нужно импортировать все уменьшенные изображения в Photoshop, для этого мы просто нажимаем «Файл» -> «Сценарии» -> «Загрузить файлы в стек…».
4. Затем выберите все изображения , которые вы хотите использовать для своего GIF, и нажмите «ОК» .
5. Как видите, все изображения теперь загружены в Photoshop. В этом случае я использовал сцену, в которой хомяк ест несколько ягод. Следующий шаг — выбрать все слои / изображения , которые мы импортировали в Photoshop.Поэтому просто нажмите «Выбрать» -> «Все слои» .
6. Чтобы импортировать все выбранные изображения на «Временной шкале» щелкните поле, я выделил красный и выберите «Создавать кадры из слоев» .
7. Все изображения теперь импортированы на «Временную шкалу». Следующим шагом является , щелкните еще раз на поле, которое я пометил красным , чтобы выбрать «Выбрать все кадры» .
8. Изображения, которые мы сейчас имеем на «Временной шкале», находятся в обратном порядке , поэтому нам нужно снова щелкнуть по полю, которое я помечен красным, и просто выбрать «Обратные кадры» , чтобы получить правильный порядок.
9. Хорошо, мы почти закончили с нашим GIF, теперь мы должны решить, как долго должен отображаться кадр, прежде чем он переключится на следующий кадр. Просто щелкните время и установите желаемое время, Я бы рекомендовал установить время на 0,1 с — 0,5 с .
10. Убедитесь, что ваши GIF повторяются навсегда 🙂
11. Теперь нам нужно сохранить наш GIF, нажмите «Файл» -> «Сохранить для Интернета…» .
12. Итак, мы наконец закончили с нашим GIF, чтобы сохранить GIF, просто нажмите «Сохранить…» .

Как видите, GIF очень легко сделать , и вам потребуется всего пара минут на создание.

Здесь вы можете увидеть результат нашего GIF.

Надеемся, вам понравился этот урок !!

Все изображения сделаны Джулианом Радом.

Прежде чем вы уйдете, вот краткий обзор того, как добавлять птиц к вашим фотографиям в Adobe Photoshop.

Рейтинг: 012345 5.00 на основе 1 Рейтинг

Следующие две вкладки изменяют содержимое ниже.

Джулиан Рад — фотограф-самоучка, получивший множество наград, родился в Вене, Австрия в 1991 году. Когда он купил свою первую камеру в возрасте 20 лет, он нашел выражение своего восхищения природой и дикой природой. У него уже было много публикаций в национальных и международных журналах и газетах (New York Post, Daily Mirror, Daily Express, The Times, GEO, Digital Photographer Magazine …). Он выиграл несколько фотоконкурсов, в том числе награду за комедийную фотографию дикой природы в 2015 году.

Самые популярные сообщения в марте

Как легко создать анимированный GIF в Photoshop

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

Оглавление [Скрыть] [Показать]

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

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

Выживаемость формата файлов изображений GIF достойна восхищения. В основном используемые для уродливых страниц MySpace и раздражающей анимированной баннерной рекламы, анимированные GIF-файлы были очень популярны в 1990-х и начале 2000-х годов.В то время GIF не был признанным типом файлов. Это был символ плохого дизайна, и многие люди предсказывали и даже надеялись, что такие технологии, как Adobe Flash и HTML5, раз и навсегда убьют GIF.

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

Создание анимированных файлов GIF с помощью Adobe Photoshop или альтернативы Photoshop

Существует множество веб-сайтов и приложений, которые помогут вам создавать анимированные GIF-файлы.Среди моих любимых — GIF Brewery (Mac) и GIPHY. Многие из этих сервисов даже позволяют загружать видеоклипы и конвертировать их в GIF. Если вы не знакомы с Adobe Photoshop , попробуйте воспользоваться одной из этих служб.

Изучить Photoshop непросто, но если вы разбираетесь в Adobe Photoshop и вам нужно создать анимированный GIF, то это руководство для вас. Это руководство было создано с использованием Adobe Photoshop 2020 версии Creative Cloud. Если у вас другая версия Photoshop, не волнуйтесь.Основные шаги создания анимированного GIF-изображения в Photoshop будут аналогичны другим версиям приложения.

Создайте многослойное изображение в Photoshop

Окно слоев Photoshop

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

Открыть окно временной шкалы

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

Создание анимации кадра

Окно временной шкалы Photoshop

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

• Окно> Временная шкала> Создать анимацию кадра

Создание нового кадра для каждого кадра в анимации GIF

Добавить новый кадр

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

• Окно> Временная шкала> Создать кадр

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

• Окно> Временная шкала> Создание кадров из слоев

Регулировка длительности задержки кадра

Длительность кадра

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

Вы хотите зацикленный GIF?

Настройки цикла GIF

Вы хотите, чтобы ваш GIF зацикливался? В нижней части панели инструментов временной шкалы есть опция, где вы можете выбрать, сколько раз вы хотите, чтобы анимированный GIF повторялся. Выберите «Навсегда», если хотите, чтобы изображение повторялось бесконечно. Если вы создаете анимированный баннер в формате GIF, выберите 3 раза для цикла. Большинство рекламных сетей требуют, чтобы объявления в формате GIF повторялись не более 3 раз или длились не более 30 секунд.

Нажмите «Воспроизвести» и просмотрите свой анимированный GIF

Предварительный просмотр анимированного GIF

Протестируйте свой анимированный GIF в Photoshop, нажав значок «Воспроизвести».Вернитесь и внесите изменения, выбрав рамку, которую вы хотите изменить. Затем просмотрите еще раз, пока не будете довольны.

Сохраните ваш проект Photoshop в формате GIF

Если вы еще этого не сделали, сейчас самое время сохранить анимированный GIF в Photoshop. Вы можете сохранить редактируемый файл как файл PSD или многослойный файл TIF. Оба этих типа файлов сохранят данные покадровой анимации.

Экспорт вашего анимированного GIF

Сохранить для Интернета

Довольны ли вы своей анимационной последовательностью? Давайте экспортируем его как файл анимации GIF, используя параметр «Сохранить для Интернета».

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

Настройте параметры экспорта файла GIF

Параметры экспорта Gif в Adobe Photoshop

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

• Тип файла: Вы должны выбрать GIF, а не JPG, WBMP или PNG. Если вы не выберете GIF, вы получите неподвижное изображение, которое не анимируется.
• Цветовая палитра: Вы, вероятно, получите наилучшие результаты с адаптивной или перцепционной цветовой палитрой, но вы можете попробовать поэкспериментировать с другими вариантами.
• Дизеринг: Если в вашей анимации много градиентов, выберите «Диффузия», «Узор» или «Шум» в качестве одного из вариантов дизеринга.Это попытается создать эффект градиента с помощью точек. Но если ваш GIF сплошной цвет, выберите «Без дизеринга».
• Цвета: Самый важный параметр на этом экране — количество цветов. Использование большего количества цветов увеличит размер вашего файла. Меньше значит меньше. Постарайтесь, чтобы это число было как можно меньше. Использование меньшего количества цветов уменьшит размер вашего файла.
• Web Snap: Простой способ уменьшить размер файла — ограничить цвета файла стандартными веб-цветами. Постарайтесь получить как можно более высокий процент веб-привязок, чтобы ваше изображение не выглядело дерьмом.
• Анимация: Не делайте все настройки файла на основе одного кадра анимации. Переключайтесь между кадрами, пока вы экспериментируете со своими настройками.

Сохраните анимацию GIF

Значок Methodshop с анимацией «масштабирования»

Вот и все! Вы только что создали анимированный GIF в Photoshop! Последний шаг — нажать кнопку «Сохранить» в правом нижнем углу экрана. Это сохранит ваш анимированный GIF-файл на вашем компьютере. Откройте свой GIF в веб-браузере и проверьте его.Затем, если необходимо, вернитесь и внесите какие-либо корректировки.

Где использовать после создания анимированного GIF-изображения в Photoshop?

Поздравляю! Вы только что создали анимированный GIF в Photoshop. Вот некоторые из мест, где вы можете использовать свой GIF:

• Социальные сети: Сайты социальных сетей, включая Facebook, Pinterest и Twitter, принимают файлы в формате GIF. Сначала они этого не сделали, но все начали принимать GIF в 2015 году.
• Презентации: Вы также можете использовать свой GIF в презентациях с помощью Microsoft PowerPoint или Google Slides.
• Электронные письма: В электронное письмо нельзя включать мультимедийный контент, например видео. Но вы можете использовать GIF. Добавление GIF-файлов в информационные бюллетени становится очень популярной тактикой.
• Веб-сайтов: Вы можете использовать GIF-файлы, чтобы оживить сообщения в блоге. Вот пример.
• Реклама: Баннеры в формате GIF, хотя и не так популярны, как объявления HTML5, все еще очень распространены в Интернете. Во многих рекламных сетях есть ограничения на рекламу в формате GIF. В общем, вы должны стараться, чтобы ваши баннерные объявления в формате GIF не превышали 150 КБ, а ваши анимации — менее 30 секунд с максимальным циклом 3x.

История формата файлов GIF

GIF — это аббревиатура от Graphics Interchange Format . Формат файлов изображений GIF был создан компанией CompuServe, предоставляющей услуги коммутируемого доступа в Интернет, в 1987 году. Хотя GIF-файлы могут выглядеть не такими чистыми или маленькими, как файлы JPG, GIF-файлы имеют два основных преимущества перед другими веб-совместимыми типами файлов изображений: прозрачность и анимация.

Статьи по теме:

Designlab | Photoshop 101, день 7

День 7: Сделайте гифки!

Это последний день Photoshop 101!

Вы уже достигли кучи на этой неделе.Вот обзор того, что мы рассмотрели:

• Начало настройки с копией Photoshop
• Обходим интерфейс
• Настройте наши предпочтения
• Основные сочетания клавиш (не забудьте шпаргалки!)
• Создание нового файла
• Изучение панели инструментов
• Профессиональные неразрушающие рабочие процессы (сохранение слоев в целости)
• Контроль версий файла (сохранение нового файла каждый день)
• Различные типы слоев (растр, форма, корректировка, заливка, тип)
• Создание и редактирование фигур
• Создание макета сетки с использованием фигур
• Блокировка и разблокировка слоев
• Увеличение и уменьшение
• Настройка цветов переднего плана / фона, обводки / заливки
• Создание и удаление направляющих
• Команды выравнивания и распределения
• Группировка и разгруппировка слоев
• Создание дизайна целевой страницы с использованием фигур и текстовых слоев
• Установка радиуса угла на прямоугольной живой форме
• Создание дизайна кнопки с использованием живой формы прямоугольника и текстового слоя
• Неразрушающий рабочий процесс для работы с фотографиями
• Использование инструмента заплатки для удаления нежелательной области изображения
• Использование инструмента штампа клонирования для дублирования области изображения
• Корректирующие слои (например, яркость / контраст)
• Экспорт изображений в формате JPEG, PNG или TIFF
• Размещение файла изображения в качестве смарт-объекта в другом файле
• Изменение размера и перемещение смарт-объектов
• Создание масок изображений с использованием смарт-объектов и живых фигур
• Команды размера холста и размера изображения

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

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

У нас есть два набора изображений, которые вы можете скачать и с которыми сегодня можно поработать. Одно из них — это серия изображений, которые мы можем собрать, чтобы создать гифку с кошкой. Другой — небольшое слайд-шоу, которое мы создали из одного из наших руководств в Instagram.Вы можете воссоздать это!

1. Загрузите сегодняшние файлы.

У нас есть 37 кадров для нашего первого GIF и 10 кадров для второго GIF — загрузите их здесь!

2. Откройте шкалу времени.

Затем нам нужно вызвать временную шкалу в Photoshop. Для этого перейдите в меню «Окно» и нажмите «Временная шкала». Он должен появиться внизу вашего интерфейса следующим образом:

3. Загрузите кадры для первого GIF.

Мы собираемся использовать специальную функцию в Photoshop, называемую скриптом.Вы можете создавать сценарии для автоматизации множества задач, но сегодня мы просто воспользуемся встроенным сценарием Photoshop под названием «Загрузить файлы в стек». Найдите его в меню «Файл» в разделе «Сценарии». Выберите «Загрузить файлы в стек», и Photoshop откроет этот диалог:

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

Нажмите «ОК», и Photoshop создаст отдельные слои из этих файлов.

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

4. Увеличить.

Давайте нажмем ⌘ 0 [ноль], чтобы увидеть, что мы делаем. Надеюсь, вы видите что-то вроде этого:

5. Сохраните файл.

Прежде чем мы продолжим, давайте сохраним это как файл PSD. Нажмите ⌘ Shift ⇧ S, чтобы открыть диалоговое окно «Сохранить как…», и сохраните его как GIF 1.psd (или как хотите).

6.Создайте временную шкалу анимации из кадров.

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

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

7. Просмотрите GIF.

Мы можем предварительно просмотреть, как выглядит анимация, используя элементы управления проигрывателем в нижней части временной шкалы. По умолчанию для каждого кадра установлено значение «без задержки», что означает, что он остается в GIF в течение времени по умолчанию. Это отлично подходит для этого первого GIF, поэтому оставим эту настройку как есть.

8. Экспортируйте GIF.

Для этого нам нужно перейти в меню «Файл»> «Экспорт»> «Сохранить для Интернета» (Legacy). Единственное, что нам нужно здесь изменить, это «Параметры цикла» в правом нижнем углу диалогового окна. Измените это значение с «Один раз» на «Навсегда» — это означает, что наш GIF будет повторяться. Затем нажмите «Сохранить…» и снова нажмите «Сохранить» в диалоговом окне имени файла. Ваш GIF готов! Не верите мне? Найдите файл, который вы только что сохранили, и перетащите его в веб-браузер. GIF должен воспроизводиться в вашем браузере.

9. Создайте второй GIF.

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

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

Все еще жаждете еще GIF-файлов? Попробуйте создать GIF из слайдов своей работы. Все, что вам нужно сделать перед началом, — это убедиться, что стопка импортируемых файлов одинакового размера. Делитесь с нами своими творениями в Twitter или Instagram!

Поздравляю! Вы закончили Photoshop 101.

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

Не стесняйтесь оставить нам сообщение в комментариях ниже или напишите нам.

Удачного проектирования!

+ Бонус: 2 стопки изображений для создания GIF
+ Бонус: Шпаргалка по анимированному GIF

Теперь, когда вы освоили основы Photoshop, почему бы не улучшить свои навыки, записавшись на один из наших 4-недельных курсов дизайна?

Все наши курсы проводятся одним из наших опытных наставников по дизайну, которые работают в таких компаниях, как Google, Facebook, Yelp и других.Вы получите персональные отзывы по всем своим проектам и получите до 4 часов видео с вашим наставником, чтобы задать любые ваши вопросы о дизайне и проникновении в отрасль. Наш самый популярный курс — «Дизайн 101» — отличный способ применить свои знания в Photoshop.

Как сделать GIF в Photoshop | Создание GIF за 7 шагов

Социальные сети, в том числе Pinterest, Twitter, Facebook и Reddit, вызвали ренессанс анимированных GIF-файлов: более чем несколько интернет-магазинов регулярно публикуют GIF-анимации для привлечения потенциальных клиентов.И угадай что. Оно работает. Анимированные GIF-файлы — это мощная форма мультимедиа, которая нравится клиентам и покупателям.

Итак, почему бы не научиться создавать свои собственные?

Если есть что-то более захватывающее, чем отличное изображение, но при этом не такое громоздкое, как видео, то это GIF.

Что такое GIF?

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

Количество цветовых тонов в GIF обычно ограничено 256. Однако возможность добавлять движение к изображениям и создавать контент, которым легко делиться, более чем компенсирует более низкое качество изображения.

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

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

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

Приступим.

Как создать GIF

Чтобы создать GIF, вам понадобится серия изображений и Photoshop.Для этого урока я использую Photoshop 2021, но вы можете использовать любую версию Photoshop, которая у вас уже есть.

Шаг 1. Загрузите файлы в стек

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

В верхнем меню Photoshop перейдите к File -> Scripts -> Load Files into Stack .

Шаг 2. Выберите изображения

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

После того, как вы выбрали изображения, нажмите ОК .

Photoshop затем начнет процесс создания слоя для каждого загруженного вами изображения.Вы можете найти их на панели Layers в правом нижнем углу.

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

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

Обрезать раму:

1. Щелкните значок Crop .

2. Щелкните и перетащите края кадрирования, чтобы сделать выбор.

3. Нажмите Введите , чтобы подтвердить урожай.

Шаг 3. Настройте временную шкалу

Из верхнего меню перейдите в Окно и отметьте опцию Временная шкала . Это заставит окно временной шкалы появиться под рабочей областью.

В окне Timeline щелкните Create Frame Animation .

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

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

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

Шаг 4: Установите время

Выберите первый кадр. Под уменьшенным изображением вы увидите « 0 sec. ”Это время, в течение которого этот кадр будет отображаться в GIF. Нажмите на раскрывающееся меню рядом с ним и выберите желаемую продолжительность, например 0,5 секунды. Повторите этот шаг для следующих кадров.

Шаг 5: Скройте верхние слои

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

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

Переходим к третьему кадру. Здесь скройте первые два слоя, чтобы открыть третий слой в кадре.

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

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

Просмотрите свой GIF, щелкнув значок Воспроизвести . Проверьте порядок и синхронизацию изображений, а также убедитесь, что GIF воспроизводится плавно.

Шаг 7. Экспорт вашего GIF

Довольны? Перейдите в Файл и нажмите Сохранить как .

В раскрывающемся меню выберите формат файла GIF . Нажмите Сохранить .

После этого откроется окно Параметры сохранения GIF . Выберите предпочтительные настройки и нажмите ОК .

Или перейдите в Файл -> Экспорт -> Сохранить для Интернета . Откроется окно предварительного просмотра GIF.

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

Нажмите Сохранить .

Готово! Теперь вы можете поделиться своими новыми навыками создания GIF с друзьями, коллегами и клиентами.

Хотите узнать больше советов и приемов редактирования фотографий?

Онлайн-курсы по графическому дизайну

Shaw Academy научат вас, как освоить Photoshop, от основ до более сложных методов и процессов.Присоединяйтесь к Shaw Academy сегодня и станьте профессионалом в Photoshop!

Примечание редактора: этот пост был первоначально опубликован в 2016 году и был обновлен для полноты.

Как создавать анимированные GIF-файлы в Photoshop

Анимированные GIF-файлы полезны для придания изображениям большего объема и повествования. Вы можете создавать анимированные GIF-файлы в Photoshop из видеофайлов, фотографий и иллюстрированных изображений. В Photoshop даже есть функция Onion Skinning, которая полезна для покадровой анимации, особенно если вы планируете рисовать кадры.

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

Сделано с помощью Astropad и Photoshop

Начиная с нуля: треки, частота кадров и воспроизведение

Если вы новичок в анимации и хотите попрактиковаться, лучший способ начать — открыть панель «Таймлайн».

В верхней строке меню перейдите в Окно , затем выберите Временная шкала .

В параметре Create Timeline выберите Create Video Timeline .

В меню Window выберите Timeline

На временной шкале видео , Слои организованы как дорожки и всегда могут быть перегруппированы. Пурпурные полосы представляют собой продолжительность каждого кадра на треке Track .

Пример временной шкалы видео : Дорожки расположены слева, длительность кадра выделена фиолетовым цветом.

Продолжительность каждого кадра можно увеличить, уменьшить или переместить в другую часть трека Track , отрегулировав конечные точки и перетащив весь клип по горизонтали на шкале времени .

Продолжительность можно настроить, щелкнув и перетащив их на шкалу времени видео

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

Перемещение курсора воспроизведения.Красная линия указывает, откуда начнется воспроизведение видео.

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

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

Настройка частоты кадров шкалы времени

Сгладьте переходы с помощью Включив Onion Skins

Onion Skinning позволяет вам видеть несколько ключевых кадров одновременно, располагая предыдущий кадр с меньшей непрозрачностью позади выбранного кадра в последовательности. Таким образом, вы можете предварительно просмотреть изменение между каждым кадром и лучше понять, нужны ли какие-либо промежуточные изображения для сглаживания этого изменения.

Если у вас уже есть готовые изображения

Если у вас уже есть серия изображений, начните с перехода к Файл , выберите Сценарии, затем выберите Загрузить файлы в стек.Этот метод загружает все отдельные изображения на один холст как отдельные слои. Каждый слой представляет собой рамку.

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

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

При использовании Frame Animation каждый кадр выстраивается в последовательном порядке

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

Установите определенные секунды для задержки каждого кадра

Если вы

не можете найти вариант луковой кожи, используйте Tween

Этот параметр недоступен, если для параметра Timeline установлено значение Frame Animation , но вместо этого можно использовать Tween .Как и в случае с Onion Skinning , вы можете видеть основу предыдущего изображения в вашей последовательности, однако с Tween, вы можете настроить непрозрачность, чтобы показать, как кадры входят в последовательность и выходят из нее. Эта возможность дает лучшее представление о смене кадров по секундам, а не только между изображениями.

Если вы используете видеофайл

Если вы используете видеофайл в Photoshop, есть разные способы работы.

Перейдите к файлу , затем выберите Импортировать кадры видео и в слои .Это разделит видеокадры на отдельные слои Photoshop. В зависимости от вашего проекта или предпочтений откройте Video Timeline или Frame Animation .

Чтобы разделить каждый кадр вручную, откройте файл в Video Timeline .

Сохраните свой шедевр

Когда ваши кадры будут готовы, самое время сохранить файл в формате GIF. Перейдите в Файл , Экспорт , затем Сохранить для Интернета .

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

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

Что вы думаете об анимированных GIF-файлах? Как вы используете эту функцию в Photoshop? Поделитесь с нами на нашем форуме Astro Community!

.

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

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

Комментарий *

Имя *

Email *

Сайт