Очень красиво смотрятся шевелящиеся смайлики в аське, подмигивающие аватарки на форумах и почти живые фотографии. Что и говорить, статика в интернете давно уступила место динамике и анимации. Каждому из нас хочется удивить товарищей по всемирной паутине, нарисовав нечто «эдакое», непохожее на других. Если у вас есть программа Adobe Photoshop, то создать анимированную картинку в формате gif не составит труда. Рассматриваемый нами способ подойдет не только для аватар и смайликов, но и для любой анимации в формате gif: рекламных баннеров для сайтов, открыток и т.п.

{mosloadposition debug}

Для работы нам понадобится программа Adobe Photoshop и Adobe ImageReady. В первой мы подготовим кадры для будущей анимации, а во второй будем её оживлять. Но прежде скажем несколько слов о принципе работы анимации.
Все мы смотрели мультики и знаем, что анимация – это сменяющие друг друга статичные кадры. Многие даже баловались в блокнотиках, рисуя на каждом его листочке по кадрику и быстро перелистывая странички – получалось нечто, похожее на ранние примитивные анимашки. Тот же принцип действует в Adobe Photoshop: сначала необходимо создать статичные кадры для нашего мультика. Кадров этих может быть 2-5, а может быть и 50. Чем больше кадров, тем красочнее анимация, но тем больше размер получаемого анимационного файла.
Каждый кадр в Adobe Photoshop должен быть создан на отдельном слое. Слой – это как страничка блокнотика. В анимации все слои выстраиваются по порядку в логической последовательности, создавая законченное действие. Для каждого слоя-кадра определяется время его показа. Кроме того, анимацию можно просмотреть один или несколько раз, а можно сделать закольцованной – повторяющейся бесконечно. 

Единственный формат, в котором Adobe Photoshop сохраняет анимацию – это gif. GIF – от английского «Graphics Interchange Format» - формат для обмена изображениями. Формат gif хорошо сжимает графические файлы и широко используется в интернете, но способен качественно передавать изображения, содержащие только до 256 цветов. Обязательно учитывайте данную особенность при подготовке исходных изображений для анимации.

Пожалуй, с теорией мы на этом закончим, и перейдем к анимастроительству.
Прежде всего, подготовим кадры будущей анимации в программе Adobe Photoshop. Для этого создадим новый документ (меню «Файл» - «Новый») с прозрачным фоном и размерами, например, 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-анимации завершено. Конечно, мы рассмотрели самые основы работы в Adobe ImageReady, но уже этого достаточно, чтобы у вас получились красочные и интересные анимашки.

Специально для проекта Ячайник, Елена Карлтон

{mosloadposition cpanel}