Бесплатно вставляйте фото в гифки или анимацию для фотошопа

Обновлено: 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 году. В нее добавлена новая информация и примеры.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для этого сначала выберите все слои, перейдя в верхнее меню навигации и выбрав «Выделить» > «Все слои».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте силу анимации, чтобы создать дизайн, который будет выделяться среди остальных. Выберите один из вариантов анимации фотографий, включая масштабирование, панорамирование, размытие или затухание, чтобы выделить свою фотографию захватывающим образом. Если вам не хватает идей, изучите библиотеку шаблонов Creative Cloud Express, в которой есть тысячи профессионально разработанных примеров, чтобы дать толчок вашему творчеству. Выберите шаблон, добавьте в него свои фотографии и индивидуальный подход и опубликуйте за считанные минуты.

Узнайте больше.

Как превратить изображение в анимацию.

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

Мгновенно загрузите анимированное изображение в виде видео в формате MP4, чтобы поделиться им по своим цифровым каналам и платформам социальных сетей. Creative Cloud Express сохраняет ваши дизайны, поэтому вы всегда можете вернуться и внести дополнительные изменения, если вам это понадобится в будущем.

Выберите стиль фотоанимации.

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

Отредактируйте свои изображения до совершенства.

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

Более 100 000 шаблонов и объектов для начала.

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

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