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


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

Примечание.

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

В приложении Photoshop для создания кадров анимации используется панель «Шкала времени». Каждый кадр представляет собой структуру слоев.

Пример анимации. Изображение одноколесного велосипеда находится в собственном слое. Положение слоя меняется в каждом кадре анимации.

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

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

Добавьте слой или преобразуйте слой заднего плана

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

Добавьте содержимое к анимации

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

Добавьте кадр к панели «Шкала времени»

Отредактируйте слои выбранного кадра

Выполните одно из следующих действий.

  • Включите или отключите видимость для разных слоев.

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

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

  • Измените режим наложения слоев.

  • Добавьте к слоям стили.

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

По мере необходимости добавьте кадры и редактируйте слои

Количество новых кадров ограничивается только системной памятью, доступной для Photoshop.

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

Задайте параметры времени отображения кадра и повторов

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

Для воспроизведения анимации используйте элементы управления панели «Шкала времени». Затем с помощью команды Сохранить для Web просмотрите ее в веб-браузере. См. раздел Просмотр оптимизированных изображений в веб-браузере.

Оптимизируйте анимацию для эффективной загрузки.

Предусмотрены разные варианты сохранения анимации кадра.

  • Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды «Сохранить для Web».

  • Сохраните файл в формате Photoshop (PSD) для дальнейшей работы с анимацией.

  • Сохраните последовательность изображений, видео в формате QuickTime или как отдельные файлы. См. также раздел Экспорт видеофайлов и последовательностей изображений.

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

  1. Убедитесь, что панель «Шкала времени» находится в режиме покадровой анимации.

  2. Нажмите кнопку «Создание копии выделенных кадров» .

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

На панели «Шкала времени» на текущий кадр указывает узкая граница миниатюры кадра (внутри затененной подсветки выделения). Выделенные кадры обозначены затененной подсветкой вокруг миниатюры кадра.

  1. Выполните одно из следующих действий на панели «Шкала времени»:

    • Щелкните кадр.

    • Чтобы выбрать следующий кадр последовательности в качестве текущего, нажмите кнопку «Выбрать следующий кадр».

    • Чтобы выбрать предыдущий кадр последовательности в качестве текущего, нажмите кнопку «Выбрать предыдущий кадр» .

    • Чтобы выбрать первый кадр последовательности в качестве текущего, нажмите кнопку «Выбрать первый кадр» .

  1. На панели «Шкала времени» выполните одно из предложенных ниже действий.

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

    • Чтобы выбрать непоследовательные кадры, щелкайте кадры, которые нужно добавить к выделенным, с нажатой клавишей «Ctrl» (Windows) или «Command» (Mac OS).

    • Чтобы выбрать все кадры, в меню панели выберите команду «Выделить все кадры».

    • Чтобы отменить выделение одного кадра из нескольких выбранных, щелкните этот кадр с нажатой клавишей «Ctrl» (Windows) или «Command» (Mac OS).

  1. На панели «Шкала времени» выберите один или несколько ключевых кадров.

  2. Выполните одно из следующих действий.
    • Содержимое объектов в кадрах анимации редактируется с помощью панели «Слои», в которой можно изменять слои изображения, влияющие на этот кадр.
    • Чтобы изменить положение объекта в кадре анимации, на панели «Слои» выберите слой, содержащий этот объект, и перетащите его в новое положение.

    Примечание.

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

    • Чтобы изменить порядок кадров анимации, в меню панели выберите команду «Обратный порядок кадров».

    Примечание.

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

    • Чтобы удалить выделенные кадры, в меню панели «Шкала времени» выберите команду «Удалить кадр» или щелкните значок «Удалить»  и нажмите кнопку «Да», чтобы подтвердить удаление. Можно также перетащить выделенный кадр на значок «Удалить».

Кнопки унификации («Унифицировать положение слоя», «Унифицировать видимость слоя» и «Унифицировать стиль слоя») на панели «Слои» определяют, как изменения атрибутов в активном кадре анимации применяются к остальным кадрам того же слоя. При выбранной кнопке унификации этот атрибут меняется во всех кадрах активного слоя, если кнопка не выбрана, изменения применяются только к активному кадру.

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

  1. На панели «Шкала времени» измените атрибут для одного кадра.

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

  1. На панели «Слои» установите флажок «Распространить кадр 1».
  2. На панели «Шкала времени» измените атрибут для первого кадра.

    Измененный атрибут применяется (относительно) ко всем последующим кадрам слоя.

Примечание.

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

  1. На панели «Слои» выберите пункт «Параметры анимации», а затем один из следующих параметров.

    Отображает кнопки унификации слоев, если панель «Шакала времени» открыта.

    Отображает кнопки унификации слоев независимо от того, открыта или закрыта панель «Шкала времени».

    Скрывает кнопки унификации слоев независимо от того, открыта или закрыта панель «Шкала времени».

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

  1. На панели «Анимация» выберите один или несколько кадров для копирования.

  2. В меню панели выберите команду «Скопировать кадры».
  3. Выберите один или несколько целевых кадров в текущей или другой анимации.
  4. В меню панели выберите команду «Вставить кадры».
  5. Выберите метод вклеивания.

    Заменяет выделенные кадры копируемыми. Новые слои не добавляются. Свойства всех существующих слоев в целевых кадрах заменяются свойствами копируемых слоев. При вставке кадров между изображениями новые слои добавляются к изображению, но в целевых кадрах видны только вклеенные слои (существующие слои скрыты).

    Вклеить поверх выделенной области

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

    «Вставить перед выделенной областью» или «Вставить после выделенной области»

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

  6. Чтобы связать вклеенные слои, на панели «Слои» выберите команду «Связать добавленные слои» (необязательно).

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

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

Команда «Создать промежуточные кадры» используется для автоматического добавления или изменения последовательности кадров между двумя существующими, равномерно меняя параметры слоя (положение, непрозрачность или параметры эффекта) между новыми кадрами, чтобы создать впечатление движения. Например, если нужно, чтобы слой постепенно исчезал, установите непрозрачность слоя в начальном кадре 100 %, а в конечном — 0 %. При создании промежуточных кадров между этими двумя кадрами непрозрачность слоя снижается равномерно во всех новых кадрах.

Использование промежуточных кадров для анимации положения текста

  1. Чтобы создать промежуточные кадры в конкретном слое, выберите его на панели «Слои».
  2. Можно выбрать один или несколько смежных кадров.
    • При выборе одного кадра можно выбрать, между каким кадром создавать промежуточные кадры — предыдущим или последующим.

    • Если выделить два смежных кадра, новые кадры создаются между ними.

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

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

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

    • В меню панели выберите команду «Создать промежуточные кадры».

  4. Укажите слой или слои, которые будут меняться в добавленных кадрах.

    Меняются все слои в выбранном кадре или кадрах.

    Меняется только текущий выделенный слой в выбранном кадре или кадрах.

  5. Укажите свойства слоя, которые будут изменены.

    Равномерно меняется положение содержимого слоя в новых кадрах между начальным и конечным кадрами.

    Равномерно меняется непрозрачность новых кадров между начальным и конечным кадрами.

    Равномерно меняются значения параметров эффектов слоев между начальным и конечным кадрами.

  6. Если на шаге 2 выделен один кадр, в меню «Промежуточные кадры» выберите, куда добавлять новые кадры.

    Добавляются кадры между выделенным и следующим кадром. Этот параметр недоступен, если на панели «Шкала времени» выделен последний кадр.

    Добавляются кадры между последним и первым кадром. Этот параметр доступен, только если на панели «Шкала времени» выделен последний кадр.

    Добавляются кадры между выделенным и предыдущим кадром. Этот параметр недоступен, если на панели «Шкала времени» выделен первый кадр.

    Добавляются кадры между первым и последним кадром. Этот параметр доступен, только если на панели «Ш» выделен первый кадр.

  7. Введите значение в окне «Добавить кадров» или выберите количество кадров с помощью стрелок вверх и вниз. (Этот параметр недоступен, если выделено несколько кадров.)

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

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

    Флажок показывает, что параметр выбран.

При создании нового слоя он по умолчанию виден во всех кадрах анимации.

  • Чтобы новые слои отображались только в активных кадрах, снимите флажок «Новые слои видимы во всех кадрах» на панели «Шкала времени».

  • Чтобы скрыть слой в определенном кадре, выберите этот кадр и скройте нужный слой на панели «Слои».

Можно указать время отображения кадра — время, в течение которого отображается кадр — для одиночного кадра или нескольких кадров в анимации Время отображения кадра указывается в секундах. Доли секунды отображаются как десятичные значения. Например, одна четвертая часть секунды задается как «,25». Если время отображения устанавливается в текущем кадре, оно запоминается и применяется к каждому созданному после этого кадру.

  1. Выберите один или несколько слоев на панели «Шкала времени».

  2. Щелкните значение времени отображения под выбранным кадром, чтобы вывести всплывающее меню времени отображения.
  3. Задайте время отображения.
    • Выберите значение в раскрывающемся меню. (Последнее использованное значение появляется внизу списка.)

    • Выберите «Другое», введите значение в диалоговом окне «Задать время отображения кадра» и нажмите кнопку ОК. Если выбраны несколько кадров, указание времени отображения для одного кадра применяется ко всем кадрам.

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

Режимы отображения кадров

A. Кадр с прозрачным задним планом с параметром «Восстановить фон» B. Кадр с прозрачным задним планом с параметром «Не располагать» 

Значок «Режим отображения» указывает, какой параметр установлен: «Не располагать»  или «Располагать» . (Значок не отображается, если установлен автоматический режим отображения кадра).

  1. Выберите один или несколько кадров, для которых нужно выбрать режим отображения.
  2. Щелкните миниатюру кадра правой кнопкой мыши (Windows) или щелкните, удерживая клавишу «Control» (Mac OS), чтобы вывести контекстное меню.
  3. Выберите режим отображения.

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

    Примечание.

    Чтобы сохранить кадры, включающие прозрачность, выберите параметр «Автоматически» при использовании параметра оптимизации «Удаление лишних пикселов».

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

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

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

  1. Щелкните поле «Выбор параметров цикла» в левом нижнем углу панели «Шкала времени».

  2. Выберите параметр повтора: «Один раз», «Три раза», «Всегда» или «Другое».
  3. Если выбран параметр «Другие», введите значение в диалоговом окне «Задание числа повторов» и нажмите кнопку ОК.

  1. В меню панели «Шкала времени» выберите команду «Удалить анимацию».

helpx.adobe.com

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

Приветствую вас друзья! Иногда я встречаю вопрос, можно ли сделать анимацию в фотошопе? Так вот, в этом уроке я покажу что это возможно, и что это совсем не сложно. После этого вы поймете, что совсем не обязательно скачивать и ставить себе программки, если вам вдруг понадобиться сделать анимированный банер или другую какую-нибудь анимацию. И поверьте, это совсем просто. В качестве примера, давайте сделаем свой простенький прелоадер или как правильно указади в комментариях – троббер (throbber). И так, за дело!

Откройте фотошоп, и создайте файл размер 9х9 пикселей.

Зумом увеличим наш маленький квадрат по максимуму (клавиша Z). Увеличить можно несколькими способами. Первое – правым кликом на рисунке из выпадающего меню, выбираем Fit on screen. Второе, просто щелкаем несколько раз до тех пор пока изобращение не увеличится до максимального значения, и третье, самое простое на мой взгляд, нажав в левом верхнем углу полотна и удерживая левую кнопку мыши, проводим ее вниз и вправо пока не пересечем наш квадратик.

Теперь самое главное что нам понадобится для создания GIF-анимации, это рабочее пространство с нужными инструментами. Идем в меню Window -> Workspace -> Video. Должно получится что-то вроде как на скриншоте, но могут быть и отличия. Нас будет интересовать панель анимации внизу.

Создание Gif-анимации

Внизу мы как раз и можем увидеть выделенный наш первый кадр анимации.

Теперь нарисуем карандашом (B) влевом нижнем углу допустим оранжевым цветом квадратик 3х3 пикселя.

создание Гиф-анимации

Дублируем наш слой (хватаем и перетаскиваем наш слой на иконку создания нового слоя.

создание Гиф-анимации

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

Создание анимации в Photoshop

Снова дублируем верхний слой и передвигаем квадратик вверх вправо. Затем еще один дубль с переивжением квадратика влево вверх. Должно получится так:

Photoshop анимация

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

Gif в фотошопе

В принципе наша анимация почти готова. Нажав на значок Plays animation можно увидеть что у нас получается. Теперь добавим немножко плавности за счет промежуточных кадров. Для этого выделяем первый и второй кадр (зажав клавижу Ctrl) и щелкаем по значку на котором нарисованы шарики -Tweens. Жмем Ок.

Photoshop Gif

Проделвыем тоже самое с кадрами 2-3, 3-4, 4-1.

Photoshop Gif

Теперь выделяем все наши кадры и на любом кадре выбираем понравившееся вам время перехода между кадрами. Допустим 0.1 сек.

Настройка анимации в фотошоп

Проверьте что ваша анимации зациклена:

Gif банер Photoshop

Вот и все. Осталось сохранить наш баннер в формате gif, для этого в фотошопе надо пройти в меню файл и выбрать пункт меню “сохранить для Web и устройств” (Save for Web & Devices) или, что удобнее, нажать комбинацию клавиш Ctrl+Shift+Alt+S. В диалоговом окне выбираем формат Gif. Тут можно поиграться с настройками, которые влияют на качество и размер получаемого Gif файла.  После сохранения нашей Gif-анимации как файл с расширением Gif, наслаждаемся нашим собственным прелоудером! Можно например в итоге получить такие вот красивые Loading Preloader ы:

Просмотреть Gif банер, который мы сделали в фотошопе в наше время можно наверное любой программой для  просмотра графики, самые распространенные из которых это IrfanView, XNView, FastStone Image Viewer и многие другие.

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

Если же вам нужны именно тробберы/снипперы, то для их генерации существуют специальные java script библиотеки. Подборка для создания анимации загрузкии можно почитать в моей статье CSS3 и JQuery варианты создания анимации загрузки (спиннер – spinner)

labdes.ru

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

Fotoredactor.com » Уроки и курсы » Как сделать гифку из фото?

Если у вас накопилось внушительная коллекция из серий снимков с несколькими кадрами одного сюжета, можно сделать из них gif-анимации для соцсетей, личного блога, излюбленных форумов и так далее. Ответ на вопрос, как сделать гифку из фото в Фотошоп CC, не такой уж сложный. Впрочем, это необязательно должны быть фото, можно использовать любые изображения, например, рисунки. Освоив эту технику, вы сможете создавать уникальные «живые» открытки, коллажи и другие интересные вещи. Это занятие исключительно увлекательное.

Шаг 1: подбираем и подготавливаем фотографии Снимки лучше выбрать с одинаковым фоном и с такой композицией, где главный объект примерно одного масштаба. Общие размеры изображений тоже не должны слишком отличаться, это может сказаться на качестве. Лучше взять 3-5 фото. С большим количеством работать можно, но сложнее. На первый раз лучше сделать самый простой вариант, чтобы попрактиковаться. Мы взяли три фотографии девочки с разными размерами и масштабом, рис.1, поэтому сначала мы сделаем подготовительную работу: 1. Обрежем фотографии с помощью инструмента «Рамка», чтобы расположение модели было примерно одинаковым, рис.2. 2. Наши фото великоваты – более 2 тысяч пикселей по ширине, работать с анимацией будет затруднительно, поэтому изменим ширину всех трех на 500 пикселей, высота подберется автоматически. Сделать это можно через меню «Коррекция», далее «Размер изображения». Получилось вот так, рис.3, хотя размеры у них все равно отличаются, но это мы исправим позже. 3. Можно немного улучшить снимки с помощью настройки «Уровни» или увеличить насыщенность, используя подменю «Цветовой тон/насыщенность». Обе настройки находятся в меню «Изображение» и «Коррекция». Шаг 2: соединяем все фото в одно изображение 1. Открываем окно «Слои». 2. Выбираем фото, которое будет первым кадром анимации. Инструментом «Перемещение» перетаскиваем на него изображение с другой фотографии, после чего появляется два слоя, рис.4. 3. Открываем меню «Редактирование» и выбираем «Свободное трансформирование». Подгоняем размер второго слоя под первый. 4. Третье фото переносим точно так же, теперь главное изображение состоит из трех слоев, рис.5, остальные фото лучше закрыть, чтобы они не мешали. Шаг 3: делаем gif-анимацию 1. Откройте меню «Окно» и выберите «Анимация». Появится окно со шкалой, где первый кадр будет добавлен автоматически. Если вместо кадров у вас открылась временная шкала, то нажмите значок в правом нижнем углу окна анимации. 2. Откройте настройки анимации, кликнув на значок в верхнем правом углу того же окошка (под крестиком для закрытия), выберите «Создать кадры из слоев» - на шкале появятся все ваши кадры, рис.6. 3. Теперь забудьте про окно «Слои», работаем только со шкалой анимации. Нажмите SHIFT и, удерживая клавишу, выделите мышкой все кадры. Можно сделать это через настройки, нажав «Выделить все кадры». Измените время проигрывания кадров, эта опция находится под превью каждого из них и выглядит как цифра со стрелочкой. Мы поставили 0,5 секунды. 4. В нижнем меню окошка выберите «Постоянно» или другой способ воспроизведения, если нужно. 5. Нажмите Play и посмотрите, что получилось. При необходимости можно поменять кадры местами, перетащив мышкой. Шаг 4: сохраняем гифку После того как удалось успешно сделать gig-анимацию в Фотошопе, нужно ее грамотно сохранить, делается это особым образом. 1. Выберите в меню «Файл» не как обычно «Сохранить как», а «Сохранить для Web и устройств» чуть ниже. 2. Откроется окно с настройками. Лучше оставить их по умолчанию, изменив только размер анимации внизу окошка. Мы поставили ширину 300, высота определилась автоматически. Можно просто указать процент от оригинального размера изображения. Рис.7. 3. Нажмите кнопку «Сохранить». Гифка готова. Чтобы открыть ее в браузере используйте правую кнопку мыши и команду «Открыть с помощью», выбрав браузер. Дата публикации: 6-01-2016, 15:28 «|» Просмотров: 5533 «|» Автор статьи: Фотограф Поделиться с друзьями ссылкой на статью в соцсетях: Похожее:
  • Всем, кто любит перерисовывать портреты или рисунки, станет полезным этот урок. В уроке речь идет о том, как с помощью программы Photoshop разбить любое изображение на равные квадраты, чтобы легче было его...

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

  • В данном уроке на примере красивой фотографии розы объясняется, как в программе Photoshop добавить на лепестки цветка капли росы....

  • В статье рассказывается, как нарисовать в Photoshop горящую спичку. Урок иллюстрирован красивыми яркими картинками, созданными мною в процессе написания...

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

Комментарии:

fotoredactor.com

Как создать анимированное GIF-изображение с помощью Photoshop

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

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

Как создать и сохранить GIF-анимацию в фотошопе (Photoshop)?

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

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

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

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

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

После этого Photoshop создаст отдельный слой для каждого добавленного изображения. Далее перейдите к шагу 2.

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

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

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

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

Профессиональный совет: Если хотите объединить слои так, чтобы они отображались в 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 в фотошопе  для последующего использования. Для этого нужно перейти в верхнее меню и выбрать в нем пункт Файл> Сохранить для Web.

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

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

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

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

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

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

В электронных письмах

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

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

В постах на блоге

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

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

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

Перевод статьи «How to Make an Animated GIF in Photoshop [Tutorial]» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru


Смотрите также