sashko sashkovich

Для создания анимации в фотошопе нам потребуется фотошоп. Все описанное ниже будет относиться к версии CS4, но и в предыдущих все будет, в общем–то точно так же.
Все, что нам нужно — это включить панель анимации: Windows > Animation
Ее нам необходимо настроить на анимацию по кадрам — кнопкой с изображением пленки внизу справа на панели включите режим animation (frames), если до этого у вас панель была в режиме animation (timeline)


Что можно анимировать с помощью одного и того же слоя, а что нельзя
Изменять содержимое одного слоя в одном кадре без изменения его в других кадрах можно, если:
а) содержимое слоя перемещается вправо/влево/вверх/вниз (только перемещается, масштабирование или поворот вызовут изменение содержимого слоя во всех фреймах);
б) вы изменяете прозрачность слоя.
в) вы изменяете тип наложения слоя (normal, multiply, difference и т.д.)
г) вы применяете к слою стили (Layer style). Например, один и тот же слой от кадра к кадру может у вас играть всеми цветами радуги, ну или еще что–нибудь.

Важный момент: вышеперечисленные изменения слоя будут иметь силу только в текущем кадре, в остальных кадрах слой не изменится. Это действует для всех кадров, кроме первого. Если вы, скажем, на первом кадре подвинете содержимое слоя вправо на 100 точек, вы увидите, что на всех остальных кадрах, где этот слой включен, изображение тоже сдвинется. Это можно отключить. Обратите внимание, на панели слоев вверху справа есть галочка "Propagate Frame 1". Если ее снять — описанный эффект исчезнет. В новом фотошопе эта галочка вынесена прямо на панель слоев, а в старых версиях и в ImageReady ее можно было найти, щелкнув правой кнопкой мыши по слою.


Кнопки на панели анимации (вон они, на первом рисунке)
Под каждым кадром указано время в секундах, которое этот кадр виден на экране. Если это время равно нулю — задержки нет. Это значит, что кадр сменится сразу после отображения и сколько он реально будет виден зависит только от того, чем вы эту картинку смотрите и насколько тормозной ваш комп. Щелкнув по этому полю, вы можете изменить время. Одно и то же время сразу для группы кадров можно выбрать, если предварительно эти самые кадры выделить (Shift+клик или Ctrl+клик)
Под линейкой кадров есть кнопки. Они, в принципе, все понятны, но на всякий случай по порядку слева направо:
— выпадающее меню с выбором, сколько раз будет проигрываться цикл анимации: бесконечно, один раз или какое–то число раз.
— кнопки со стрелками — проигрывание анимации взад–перед, это понятно.
— кнопка с изображением движущихся квадратиков разной прозрачности. Это вставка нужного числа кадров с плавным изменением. Сейчас поясню. Предположим у вас есть два кадра: первый и второй. На втором что–то поменялось. Если выделить его и нажать эту кнопку — вам предложат ввести число промежуточных кадров и указать, что именно анимировать: текущий слой или все сразу, прозрачность, эффект или положение. Нажмите Ok и перед вторым кадром появится указанное число промежуточных с плавным изменением того, что вы выбрали. Очень удобная штука, если разобраться.
— кнопка "создать новый кадр" и кнопка "удалить выбранные кадры"
Все. Кончились кнопки.

Кадры
Перед тем, как вы начнете нашпиговывать свой проект фреймами неплохо для начала содержимое этих самых фреймов нарисовать. То есть, пока не трогая закладку "Animation", на первом кадре, по очереди, слой за слоем, создайте всю графику. Потом отключите все слои кроме тех, где содержимое первого кадра и тогда уже начинайте фигачить фреймы и включать/выключать в каждом тот или иной слой.
Не ленитесь переименовывать, нумеровать слои, если создаете более или менее длинную и сложную анимацию — времени уйдет чуть больше, зато сами не запутаетесь.

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


Сохранение GIF–файла
Лезем в File > Save for Web and devices. Выбираем формат сохранения GIF.
Теперь нам надо определиться с количеством цветов. Чем их меньше, тем легче будет файл анимации.
Имейте в виду: максимальное количество цветов у формата gif — 256. Причем, палитра цветов одна для всех кадров.
Не забудьте перед сохранением убедиться, что у вас включено нужное количество циклов анимации (на панели сохранения это внизу справа).
Вот так выглядит сама панель:


при сохранении в самом низу, на поле Animation нужно выбрать в меню Looping Options — Forever. А если выберешь по умолчанию Once — то проиграется только один цикл.

Несколько триков с gif–ами:
1. "Объясняя на пальцах", формат gif "сканирует" изображение по горизонтали, и чем больше у вас участков с пикселами одинакового цвета в ряд, тем легче файл. Например, если вы зальете квадратную картинку градиентом сверху вниз, она будет весить меньше, чем такая же, но залитая таким же градиентом справа налево.
2. Если цветов очень много, например вы делаете gif'ку из отрывка видео — можно попробовать уменьшить количество цветов, но включить при сохранении Dither. Точки на картинке станут "разбросанными", файл должен стать тяжелее, но за счет резкого уменьшения количества цветов эффект может стать обратным — анимация станет весить меньше.
3. Полезная галочка "Transparency" (прозрачность). Один из цветов палитры станет прозрачным. Это нужно не только для того, чтобы делать картинки с прозрачным фоном, но и для уменьшения веса в некоторых случаях. Попробуйте, например на фоне неменяющегося слоя с фотографией сделать анимацию чего либо, а потом сохраните с одинаковым количеством цветов со включенным transparency и без. Со включенным картинка будет легче, а если анимация достаточно сложная и длинная — то намного легче.
Огромное спасибо за статью автору tigerart

Возвращение Шевченко, влёт Спартака, удачная игра Тимощука...