Elite Games - Свобода среди звезд!

Звездный арт - Раздел уроков - GiF - анимация.



Разберем работу «Гиф-аниматора 4.0» на примере создания нового смайла из двух уже существующих (ну не умею я рисовать с нуля):





Поскольку основой будет являться первый, его первым и открываем.
Сразу переходим на вкладку Compose:



Видите, сколько кадров? казалось бы, всего три конфигурации волн и две — положения рук... Куда нам столько? для начала хватит и одного, скопируем его в Фотошоп:



Откроем второй гиф. Нам из него нужна только рамка (вот такой я лентяй, даже квадратную рамку не хотю руками рисовать). Скопируем в Шоп и этот кадр:



Вырежем рамку...



...и вставим новым слоем в кадр drowning...



...увеличив вертикальный размер холста так, чтобы рамка влезла точь-в-точь. Не хватило — повторим, перебрали — урежем... Background color должен быть белым.



Удалим лишнюю черноту, оставив кайму в один пиксел — границы рамки — и запишем файл как 1.psd, мало ли чего... Всё, теперь он у нас базовый.



Снова вернемся в Гиф-аниматор и откроем drowning. Анимация волн и тонущего нас полностью устраивает, поэтому... Отмотаем несколько кадров, пусть сперва помашет ручками просто так. Я остановился на кадре №8.
Скопируем его в Шоп, в базовый рисунок, и вставим на место layer 1 (а тот сделаем невидимым).

Сохраним результат как гиф: File => Save for web с параметрами Transparency-Diffusion (да любым, кроме No transparency...) и Colors-64, с именем a8.gif



Точно так же поступим со всеми кадрами drowning до 19-го включительно — не забываем про разные положения рук и волн; лучше не халтурить и сделать лишний кадр, чем получить рваный, сбивающийся ритм в анимашке.

Сделаем слой с рамкой невидимым (щелкнуть мышкой на пиктограмму глаза на панели слоев) и проделаем ту же операцию с кадрами 1-7.
Забегая вперед: почему нельзя обойтись теми кадрами, что уже есть в анимашке drowning? Размеры. При анимации изображения все кадры выравниваются по центру, и если у каких-то размеры нестандартные, при просмотре они будут «прыгать».

Далее. Разных конфигураций волн — всего три, найдем эти кадры и скопируем в разные окна Шопа:



Увеличим их размеры до размеров базового кадра (у меня — 43px), не забывая про белый фон.
Теперь в каждом — сотрем человечка нафиг! Замажем белым, пусть останутся одни волны. И сохраним как w1.gif, w2.gif и w3.gif.

Теперь длинный шаг:

Откроем файлы a1, a2 и a3. Сделаем каждому Image => Mode => RGB Color — иначе слои не будут работать.



У всех рисунков конфигурация волн одинаковая — у меня ей соответствует файл w2. Открываем w2, делаем следующее:
а. передним цветом на панели инструментов ставим белый;
б. к w2 применяем select => сolor range — выделяется вся белая область;



в. инвертируем выделение;
г. копируем результат в буфер, Ctrl-C, и вставляем в гифы a1, a2 и a3 — Ctrl-V;



д. в каждом по очереди делаем так: опускаем новый слой до полного совмещения волн с волнами на бэкграунде, удерживая Ctrl щелкаем мышой по вставленному слою в панельке слоев — волны выделяются, снова инвертируем выделение (теперь выделено всё, что не волны — поняли смысл операции?), и не снимая выделения — снова select => color range, inverse.



Теперь выделен человечек и волны, но — в слое, в котором есть только волны! Сменим активный слой в панельке слоев на бэкграунд, сделаем ему Ctrl-C + Ctrl-V, вернемся к слою с волнами, снова выделим его, вернемся к слою «человечек плюс волны», жмем del. Фффсё!!
Теперь в последнем слое остался только человечек.

Поменяем цвет на панельке инструментов: белый снова должен уйти на бэк. В каждом гифе перейдем на бэкграунд и, ни снимая выделения с человечка, жамкаем del.

Перейдем к рисунку a1, выберем слой с человечком и поместим его за слой с волнами (чтобы те его перекрывали). Затем опустим на раз, два, три, четыре... пять пикселов, чтоб лишь макушка торчала. Сохраним результат как а1а.gif. А2.gif не трогаем, берем а3 и повторяем операцию, но вместо опускания поднимем на 5 пикселов. Дорисуем рожицу попиксельно и сохраним как а3а.gif.



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



Теперь вернемся к тому, ради чего всё затевалось. Пипеткой наберем черный и серый цвета из слоя с рамкой, из рамки удаляем все символы и заполняем ее точками и черточками, чтобы создавалось впечатление текста. (Не забудьте заполнить промежутки между черными буквами и строчками серым полутоном — он создает тексту объем.)



Выделяем слой — волшебной палочкой вне рамки плюс inverse, иначе внутри него останутся дырки —



- копируем (Copy Merged) результат в буфер и вставляем в — помните? — а8.gif. Переводить его в RGB-mode уже не нужно, файл сохраняем как а8а.gif.

Возвращаемся к основе, дублируем слой (старый еще может пригодиться, его пока в инвизибл), выделяем прямоугольник текста и сдвигаем на два пиксела — одну строчку — вверх. Верхнюю стираем, нижнюю дописываем, чтобы создавалось ощущение последовательности текста. Вставляем в следующий гиф — а9.
И так далее, до а19...

Идем в Гиф-аниматор, жмем сначала New, затем Add Images.



Добавляем все, что с окончанием -а, и те, что по порядку между ними, но без -а.
а1а, а2, а3а, а4, а5... а20а.
Операции в окошке с кадрами можно осуществлять как с одним кадром, так и с несколькими подряд, выделив их мышкой. Разложим их по порядку — они должны скопироваться вразнобой, т.к. в самой исходной папке были перемешаны.
Выделим все и сделаем Delay = «1» и How to remove = «to background color».



Смотрим Preview, видим, что на утопленника не очень похоже — буревестник какой-то над волнами. Надо добавить несколько «пустых» волн.
Добавляем w1, w2 и w3 несколько раз вперемешку, затем долго играемся с delay, добиваясь чтоб было не слишком шустро. Возможно, придется нарисовать еще пару кадров...

Насладившись результатом, идем во вкладку Optimize и ставим нужные параметры.



Мне вполне хватает одниого изменения палитры — все наши смайлы и медальки в 64 цветах.
Жмем Optimize now:
Before: 11512
After: 7449
Saving: 4063

Гм... вообще-то могло быть и получше... килобайта эдак в два. Shit happens....
Записываем гиф, загружаем туда, куда дают — поскольку я лишен ныне возможности кидать прямо на ЕГ-сервак, няхай буде postcard.ru.
Смотрим:






Как вы, наверно, давно догадались — этот смайл посвящен нашим серийным писателям, не так часто радующим нас продолжениями, как нам того хотелось бы =)

В качестве домашнего задания — попробуйте сделать смайл для наших девушек, Agellare и KOVAD. Для этого достаточно подрисовать синий бантик каждому кадру; смайлики m/f я беру в игре Смутные Времена , их там два-три десятка...

К началу раздела | Наверх страницы Сообщить об ошибке
Звездный арт - Раздел уроков - GiF - анимация.
Все документы раздела: Урок9 | Контрасты | Объем и светотень (часть первая) | Принцип смальты (междусловие) | Как из скрина сделать картинку | Иллюстрация (процесс рисования) | Умирающее солнце | Солнце в астероидах | Вырезаем картинку из фона | Металлическая фактура на плоских объектах. | GiF - анимация. | Базовый лоу-поли моделинг | Реалистичная планета в 2д | Базовый лоу-поли моделинг | Создание текстурной развёртки в 3D Max 7 | Рисуем звезду Elite Games | Рисуем звёздное небо в фотошопе. | GiF - анимация. (Смайл) | Космический корабль при помощи фотошопа | Тайловые текстуры | Создание текстуры металла | Рисуем туманность 1 | Рисуем туманность 2 | Моделинг. Сборник трюков, хитростей и уловок. | Texporter - 2d эксортер. | Аниме персонаж. Вид спереди. | Аниме персонаж. Глаза. | Аниме персонаж. Причёски. | Аниме персонаж. Эмоции. | Рисование аниме персонажа в профиль. | Рисуем аниме персонажа в Фотошопе. | Рисуем просторы космоса | Красивая планета | Рисуем персонажа (скоростное рисование) | Создание концепта космического корабля в связке редакторов Google SketchUP + Photoshop | Создание персонажа в полный рост |


Дизайн Elite Games V5 beta.18
EGM Elite Games Manager v5.17 02.05.2010