Делаем анимационные картинки для гостевых книг и блогов.
Очень многие имеют свой блог, дневник или личную страничку на разных сервисах. Посещая блоги друзей хочется добавить к своим сообщениям не только смайлик, но и забавную анимашку. Можно найти много анимационных картинок для гостевых книг на сайтах, но гораздо интереснее сделать анимацию самому.
Урок в фотошопе по анимации не сложный. Процесс создания анимационной картинки займет несколько минут.
Анимация представляет собой набор из нескольких кадров, которые показываются на короткое время. Кадр - это любой рисунок или фото.
Определимся в первую очередь с размерами анимационной картинки-кадра. Она должна быть небольшого размера и иметь разрешение 72 пикселя на дюйм.
Выбираем команду File > New… ( Файл > Новый) и устанавливаем ширину (Width) 450 pixels , высоту (Height) 250 pixels, разрешение (Resolution) 72 pixels/inch, Color Mode должен быть RGB Color и цвет фона белый (Background Contents - White).
На готовый шаблон переносим любой рисунок или фото, которое и будем превращать в красивую анимационную картинку.
Мне понравилась вот такая собачка. Я к ней добавлю надпись и сделаю так, чтобы глазки моргали.
На палитре слоев видим три слоя. Первый - наш шаблон 450х250 пикселей, второй - рисунок собачки, третий - текст.
Анимационная картинка будет состоять из двух кадров. На одном кадре исходное изображение собачки с полузакрытыми глазами, а на втором кадре глаза должны быть открыты.
Если Вы нашли рисунок забавной зверушки с открытыми глазами, то на втором кадре сделайте их, естественно, закрытыми.
Делаем активным слой с собачкой.
Командой Layer > New > Layer via Copy (Слой > Новый > Копия слоя) сделаем копию слоя . Можно просто на палитре слоев перетащить активный слой на кнопочку Create a new Layer (Создать новый слой) и получить копию этого слоя.
На копии слоя нарисуем открытые глазки.
Сделаем большое увеличение и поработаем кисточкой. Цвет - белый. Размер кисточки - 1 пиксель. Особых художественных способностей иметь не надо. Просто наносим несколько белых точек вокруг зрачка.
Результат работы можно посмотреть, если отключить и включить несколько раз копию слоя. Просто щелкаем на палитре слоев по символу в виде открытого глазика на копии слоя. Слой будет включаться и отключаться, а мы увидим эффект анимации в действии.
Чтобы смена кадров происходила автоматически, необходимо перейти в программу ImageReady, которая устанавливается вместе с Adobe Photoshop.
В последних версиях фотошопа окошко анимации открывается через команду меню Окно > Анимация.
Нажимаем кнопку Edit in ImageReady и наш многослойный файл оказывается на рабочем столе программы ImageReady.
Внизу в окошке анимации отражается первый кадр. Если Вы не видите этого, надо поставить галочку в пункте меню Window > Animation.
Анимация будет состоять из двух кадров, поэтому добавляем еще один кадр, нажав на кнопочку Duplicates current frame.
Теперь займемся анимацией. В кадре под номером один должен быть виден первый слой с собачкой и надпись. На палитре слоев отключаем слой-копию (закрываем "глазик").
В кадре под номером два должен быть виден слой-копия и надпись. На палитре слоев отключаем первый слой с собачкой.
Выставляем время показа каждого кадра и жмем кнопочку Plays \ stops animation. Анимационная картинка оживает.
Сохраняем готовый файл командой File > Save Optimized. Файл, будет иметь расширение gif.
Сделаем многослойную анимацию. Готовое изображение для будущей анимационной картинки со всеми включенными слоями выглядит следующим образом:
На палитре слоев видно будущее количество кадров.
Сделано пять копий слоя с бабочкой. На каждом скопированном слое размеры бабочки были уменьшены и изменено расположение на общем рисунке.
В окошке анимации программы ImageReady в первом кадре был включен только слой с розой. В каждом следующем кадре был включен слой с розой и только один из слоев с бабочкой. Эффект полета бабочки получился.
Помещаем свою ожившую анимационную картинку в гостевые книги или в блог. Успех гарантирован.
