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

Пример: создание анимированного gif.

Создадим новый документ File-> New с прозрачным фоном и размерами, например, 300 на 300 пикселей.

Мы решили нарисовать прямоугольник с закругленными углами и залить его розовым цветом. Это будет фон нашего изображения. Выбираем цвет, выбираем инструмент «закругленный прямоугольник» и рисуем.

 

 

Обратите внимание, что в списке Слоев появился наш фон.

Если окошко со списком слоев не отображается, нажмите F7 на клавиатуре или отметьте в меню «Окно» пункт «Слои».

 

 

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

Что будет на новом слое – решать вам. Можно скопировать туда какую-нибудь картинку, можно нарисовать узор специальными кистями. Мы просто добавим в новый кадр сердечко, которое тут же отобразится на слое в окошке Слоев.

 

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

 

Далее добавим еще несколько сердечек – каждое на новом слое. Принцип везде один и тот же – создаем слой и добавляем объект. Помните: каждому объекту – свой слой! Если добавленный слой вас не устраивает, его можно удалить – щелкните по нему правой кнопкой мыши и выберите «Удалить слой». Можно просто перетащить слой в корзинку, которая находится в нижней части окошка Слои.

В результате у нас получилась валентинка со следующими составляющими: фон, 6 слоев с картинками и 3 текстовых слоя.

 

 

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

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

Наши кадры готовы. Отправляем их в программу Adobe ImageReady, которая поставляется совместно с Adobe Photoshop. Сделать это можно через меню «Файл» - «Редактировать в ImageReady»…

 

…или нажав соответствующую кнопку на Панели.

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

В Adobe ImageReady нам предстоит оживить слои и превратить наше изображение в полноценную gif-анимацию. Для комфортной работы у вас обязательно должны быть открыты окошки Слои, Оптимизация и Анимация: отметьте соответствующие пункты в меню «Окно» («Window») ImageReady.

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

В окошке Animation мы будем настраивать последовательность кадров и время показа каждого из них. В окошке Layers мы будем включать и выключать слои для их отображения в кадрах. Окошко Optimize служит для оптимизации готовой анимации и её сохранения в приемлемом качестве в формате gif. И, наконец, в самом главном окошке просмотра с вкладками Original и Optimized мы будем наблюдать кадры нашей анимации в оригинальном и оптимизированном виде соответственно.

Пока в окошке Animation мы видим единственный кадр – нашу картинку в полный рост. Чтобы создать новые кадры, прежде всего, отключим ненужные слои. Делается это в окошке Layers. Если напротив слоя вы видите значок глазика, значит, слой видим. Чтобы сделать его невидимым просто щелкните по глазику левой кнопкой мышки. Мы отключим все слои кроме Слоя 1.

.

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

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

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

 

 

В окошке Animation кадры можно менять местами: наведите курсор мышки на кадр, нажмите левую кнопку и, не отпуская её, перетяните кадр в нужное место анимации.

Теперь зададим время показа каждого кадра. Для этого щелкните стрелочку рядом с надписью 0 sec (0 секунд) и выберите нужное время. Если требуемого времени показа кадра нет в списке, выберите «Other…» и введите в поле необходимое количество секунд.

 

Мы задали для всех кадров время показа 1 секунду, выбрав в списке «1.0».

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

«Forever» означает, что анимация будет повторяться бесконечно,

«Once» – один раз,

«Other» – вы сами устанавливаете количество повторений.

 

На этом подготовка анимации завершена. Чтобы просмотреть полученный результат в окне просмотра ImageReady нажмите кнопку «Preview Document».

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

Для просмотра анимации в окне браузера Internet Explorer нажмите кнопку рядом.

Анимация будет показана в окне браузера. Ниже вы увидите html-код, который вставляет данное изображение на веб-страничку.

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

 

Заметим, что указанные опции индивидуальны для каждого изображения. Если качество оптимизированной анимации вас не устраивает, есть смысл поиграться с настройками. С изображениями, которые не вмещаются в палитру 256 цветов формата gif, придется попрощаться. С черно-белыми изображениями нет смысла использовать все 256 цветов, достаточно оставить 128 или оттенки серого. Здесь у вас большое поле для экспериментов. Наконец, сохраним анимацию в формате gif, выбрав в меню «File» пункт «Save Optimized» или «Save Optimized As». После этого программу можно закрыть.

 

Создание gif-анимации завершено.

 

Задание: необходимо создать анимированный gif на тему дня Победы.

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

Жду от вас два файла psd и gif.