Анимированное изображение сохраняется в формате GIF (Graphics Interchange Format - Формат обмена графическими данными). Например, название файла выглядит так ЛЕС.gif, где ЛЕС - это имя файла, которое, конечно, может быть любым и далее идет .gif или .GIF - указание на формат файла или, как еще говорят, расширение файла. Вот эта часть названия файла и указывает вашему компьютеру, как работать с данным видом информации. Например, какой программой можно открыть данный файл, какими свойствами он обладает и т. д. Как открыть GIF- файл в программе фотошоп, я расскажу в одном из следующих уроков, а сегодня разберем возможности программы Photoshop CS3 и Photoshop CS4 в вопросе сохранения анимации.

Объёмная анимация

В этом уроке мы будем создавать анимацию, передающую объём пространства.

Волшебный лес…

Спасибо авторам интересных работ, наполняющих интернет )))) и вдохновляющих нас на подвиги….

Для создания такой анимации я скачала Детские фоны, их очень много – на любой вкус и цвет.
Анимация у нас будет трёхплановая: первый план,  второй и задний.
При выборе исходников я учитывала какие объекты где будут располагаться: что на переднем плане, что будет служить фоном и т.д.

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

Для начала, я поместила в рабочий документ картинку, которая будет фоном.

По моей  задумке, задний план – фон, станет приближаться и удаляться от нас.
Для того, чтобы это получилось нужно сделать несколько копий слоя (я сделала 6 шт – слоёв всего получилось 7) и пронумеровала их от 1 до 7 в соответствии с увеличением размера слоя.

Число копий берётся не с потолка, а продумывается заранее, как и весь сюжет анимации. Я опиралась на общее число кадров, чтобы сохранялась плавность движения.  То есть в моей анимации 12 кадров, и 7 копий как раз необходимо для плавного зацикливания движения «вперед-назад». Схему распределения я приведу позже.

Кстати, копии слоёв разного размера можно создать и потом, после покадрового создания анимации. Если сомневаетесь в нужном количестве кадров в самой анимации. Как удобнее.
Поехали дальше…..

Второй план.
Набираю нужные мне предметы.  Вырезаю, копирую, трансформирую….

При необходимости корректирую цвет, насыщенность и др. свойства объектов.

И передний план:

Два объекта на переднем плане я разместила на разных слоях.
Вот что получилось:

Будем оживлять лес!
Теперь, подготовим слои для анимации переднего и второго плана.
По моей задумке первый и второй планы движутся в противоположные стороны.
Для создания движения нужно немного увеличить размер объектов второго плана по горизонтали, чтобы их размеры выходили за границы документа.
Объекты переднего плана просто раздвигаем и смещаем в одну сторону. После этого соединяем  в один слой.

Такое положение слоёв переднего и второго плана мы  оставим для первого кадра анимации.
Подготовительный этап закончился.

Переходим к созданию мультика.
Как я уже сказала в моей анимации 12 кадров.
Объясню почему. За основу я взяла движение переднего и второго планов «туда-сюда».
Это движение я создавала при помощи серии из 5 кадров.

Поясню на конкретном примере.
Для 1-го кадра (задний план пока не трогаем) я сдвинула, в одну строну цветочки и грибочки, в другую дерево.

Потом создала  2-ой кадр (1).
Для этого кадра я сдвинула каждый из этих слоёв в противоположную сторону.
Затем сделала серию из 5 кадров (2).

Получилось движение в одну сторону, теперь нужно вернуть всё к исходной точке и зациклить движение.
Делаем копию первого кадра и перетаскиваем его в самый конец  ленты кадров, чтобы он стал 8-м кадром.
Находясь на этом кадре, опять создаём серию кадров (так же из 5 шт).
Получилось в итоге 13 кадров.
Последний удаляем и получается движение без задержек.

Теперь переходим к заднему плану. Он будет приближаться и удаляться, как мы уже обсудили.
Я распределила слои заднего плана по кадрам следующим образом:
1 кадр – 1 задн. план
2 кадр – 2 задн. план … по возрастающей
…7 кадр – 7 задн. план
8 кадр – 6 задн. план
9 кадр – 5 задн. план … по убывающей
…12 кадр – 2 задн. план
…а первый задний план у нас на первом кадре стоит.

На все кадры я поставила время 0,2 сек, но можно сделать медленнее, с задержками и т.д.
Если нужно  изменяем размер анимации. Ставим постоянное проигрывание и сохраняем в формате GIF (Ctrl+Alt+Shift+S – Save for Web&Devices).

В настройках я выбрала (Specify the dither algorithm) Определение алгоритма сглаживания - (Noise) Шум;  Colors – 256 естественно.
Вот и всё!

Совет: если Вы хотите внести изменения в документ (новые копии, удаление слоев и т.д.), где уже создана анимация, работать лучше на первом кадре. Тогда изменения затронут все кадры, но ничего не перепутается.

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

Ещё я  добавила огоньки…. ))) чтобы лес стал по настоящему волшебным.
А это, по традиции фантазии на тему:

Удачи и всего наилучшего!
PIROGOVADESIGN

Данный урок подготовлен для Вас командой сайта http://www.photoshop-master.ru

Серия сообщений "уроки по анимации":
Часть 1 - Jasc animation Shop
Часть 2 - Программа Fanta Morph с инструкцией
...
Часть 12 - Анимация с нуля.Урок первый.
Часть 13 - Анимация с нуля.Урок второй.
Часть 14 - Объёмная анимация
Часть 15 - Блеск драгоценностей
Часть 16 - Уроки анимации с программой FantaMorph
...
Часть 20 - Урок Sothink SWF Easy (Луна)
Часть 21 - УЧИМСЯ ПОЛЬЗОВАТЬСЯ ФИЛЬТРОМ Alien Skin Xenofex 2 - Constellation
Часть 22 - Большой каталог полезных сайтов

Серия сообщений "уроки по анимации":
Часть 1 - Блестяшки с помощью фильтра Lens Flare (Блик)
Часть 2 - Украшаем текст и картинку с помощью готовой анимации.
...
Часть 5 - Анимация с нуля.Урок второй.
Часть 6 - Урок. Мерцающие звездочки
Часть 7 - Объёмная анимация
Часть 8 - Блеск драгоценностей
Часть 9 - УЧИМСЯ ПОЛЬЗОВАТЬСЯ ФИЛЬТРОМ Alien Skin Xenofex 2 - Constellation
...
Часть 15 - Анимация горящей свечи
Часть 16 - Совершенствуем анимацию в Photoshop
Часть 17 - 10 способов оптимизации GIF

Пробежавшись по некоторым дневникам я увидела, что многие любят украшать дневники разными забавными анимашками, размещать свои посты в рамочки или на красивых фонах. К 8 Марта я уже делала фоны для постов и многим они понравились. Теперь очередь за анимашками. Из моего ника видно, что я люблю семейство кошачьих, а стало быть первый пост с анимашками будет посвящен именно им.

Краткая инструкция:

1) Для размещения картинки необходимо скопировать код из формы (та, что под каждой картинкой);

2) Вставить этот код в ПРОСТОМ редакторе в ваш новый пост или кому-нибудь в комментарии.

Котята - Анимашки

<img src="//i061.radikal.ru/0903/09/00abb716e33b.gif" width="122" height="85" alt=" (122x85, 18Kb)" />	<img src="//s58.radikal.ru/i162/0903/d1/e254e3e3b5c3.gif" width="250" height="200" alt=" (250x200, 7Kb)" />
<img src="//s44.radikal.ru/i103/0903/7f/5c6b6797f5ee.gif" width="199" height="164" alt=" (199x164, 8Kb)" />	<img src="//s60.radikal.ru/i170/0903/95/b3485bb70b51.gif" width="130" height="150" alt=" (130x150, 12Kb)" />
<img src="//i071.radikal.ru/0903/16/02a598683c8a.gif" width="150" height="173" alt=" (150x173, 18Kb)" />	<a href="//www.liveinternet.ru/users/jaguarra/" target="_blank"><img src="//i042.radikal.ru/0903/cb/242ee5dec3fc.gif" width="162" height="191" alt=" (162x191, 12Kb)" /></a>
<img src="//s60.radikal.ru/i168/0903/33/56798a0cc8a8.gif" width="104" height="116" alt=" (104x116, 25Kb)" />	<img src="//s46.radikal.ru/i114/0903/e6/1cde40167841.gif" width="121" height="113" alt=" (121x113, 21Kb)" />
<img src="//i031.radikal.ru/0903/82/cc4044005067.gif" width="230" height="100" alt=" (230x100, 20Kb)" />	<img src="//s53.radikal.ru/i142/0903/fc/71099d47a4da.gif" width="161" height="140" alt=" (161x140, 5Kb)" />
<img src="//s56.radikal.ru/i154/0903/21/d49ecde12acc.gif" width="150" height="136" alt=" (150x136, 300Kb)" />	<img src="//s51.radikal.ru/i134/0903/7b/775e21635061.gif" width="150" height="150" alt=" (150x150, 28Kb)" />

Рамочка для текста
 

.....Здесь будет ваша запись....

.....Здесь будет ваша запись....