Как нарисовать Gif?

Случилось так, что вы захотели создать свой собственный гиф, но совершенно не знаете, как это делается? Тогда вам поможет эта статья, где я расскажу вам, каким образом рисую гифы сама. Для этого вам понадобятся бумага и карандаш (+ чёрная гелевая ручка или фломастер), сканер или фотоаппарат, программа Photoshop, и, конечно, желание творить и немного старания. Приступим?

Этап 1. Эскиз

Для начала представьте, что именно вы хотите изобразить. Мне, например, понадобилась картинка для Пасхи, и я решила нарисовать аквариуса с пасхальными яйцами. Берём бумагу и делаем на ней набросок будущей картинки. Набросок станет нашим "фундаментом" в последующих этапах создания гифа. Доводим набросок "до ума" и, когда он будет полностью нас удовлетворять, обводим его контур (это можно сделать как мягким карандашом, так и чёрной ручкой или фломастером, чем вам будет угодно). Стираем ненужные карандашные линии, чтобы они не мешали потом, и сканируем или фотографируем получившийся эскиз и переправляем снимок в компьютер (рис.1). Открываем изображение в Photoshop.

Этап 2. Размеры и слои

Решите, какого размера должна быть ваша картинка. Для Gif-чар я делаю гифы "стандартного" размера 150*150. Выбрав размер, создаём новый лист (Файл -> Новый), указывая при создании желаемые высоту и ширину холста (рис.2). Перетаскиваем наш эскиз на новый лист и масштабируем его (Редактирование -> Трансформация -> Масштабирование), так, чтобы он как раз умещался в пространстве для рисования (рис.3). Во вкладке слои уменьшаем прозрачность слоя с эскизом: он должен быть достаточно бледным, чтобы не мешать нам делать пиксельный контур, но и достаточно ярким, чтобы его было хорошо видно, и мы нигде не ошиблись при обводке (рис.4). Теперь всё готово для начала работы в Photoshop.

Этап 3. Контур

Создаём новый слой (рис.5), называем его Контур и размещаем выше слоя с эскизом. Выбираем инструмент карандаш (рис.6), настраиваем его толщину на один пиксель и переносим наш взгляд на холст с полупрозрачным эскизом. Настал момент создать контур (рис.7)! Это - несложно, но при создании контура нужно быть аккуратным и внимательным. Очень полезно периодически выводить картинку в реальный размер (если вы контурите под увеличением), прятать слой Эскиз и проверять, всё ли правильно, всё ли ровно получилось в пиксельных линиях, не торчат ли где неподобающим образом ненужные "квадратики". Удобно создавать разные части контуры на разных слоях: слой Контур тела, слой Контур Гривы, слой Контур Корзинки. (Совет: старайтесь, чтобы пиксели не соприкасались друг с другом своими гранями - это добавляет грубости и небрежности. Конечно, бывают места на картинке, где без такого соединения пикселей не обойтись, но контур выглядит намного лучше и аккуратнее, если пиксели соприкасаются друг с другом лишь своими уголками). Контуры завершёны? (рис.8) Отлично! Если вы делали их чёрными, то заприте прозрачность всех контуров (рис.9) и придайте им цвета, которые будут соответствовать цветам окраски того или иного места (рис.10), только намного темнее. По завершению обводки слои контуров можно слить друг с другом (рис.11).

Этап 4. Покраска

Для покраски создаются отдельные слои. Я называю их по аналогии с контурами: Слой Тело, Слой Грива и т.д., так как это удобно. Начнём со слоя Тело, создаём его и помещаем под слоем Контура (рис.12). Генерируем желаемый нам цвет, выбираем инструмент "Заливка" и закрашиваем с его помощью нужную нам область (рис.13). Будьте внимательны, заливка может пропустить тот или иной кусочек картинки, который был закрыт контуром. Теперь, когда тело полностью закрашено базовым цветом, запираем прозрачность слоя Тело (это не позволит вам случайно поставить ненужный пиксель вне закрашенной области),возвращаемся к инструменту "карандаш" и начинаем наносить с помощью него тени, выбирая для них цвета, более тёмные, чем базовый. После нанесения теней добавляем несколько бликов. Слой Тело завершён (рис.14). По аналогии прокрашиваем все остальные участки картинки, каждый на своём слое. Стоит заметить, что при наложении теней закрашиваемые области не всегда должны иметь ровные границы. Например, чтобы создать эффект шероховатой поверхности корзинки, нам нужно разбросать пиксели на расстоянии друг от друга (рис.15).

Этап 5. Анимирование

Вся картинка закрашена (рис.16) и готова к тому, чтобы замерцать, заблистать или научиться совершать какое-то другое действие! Для начала, удаляем фоновый, самый нижний слой, представляющий из себя белый лист (рис.17). Он нам не нужен. Удалив фон, соединяем друг с другом все слои картинки, чтобы она стала одним целым. Готово? Перейдите во вкладку "Выделение", выберете пункт "выделить всё" (рис.18). Скопируйте изображение, создайте новый лист (этот лист в точности подстроится под вашу картинку) и вставьте гиф на новое место (рис.19). Здесь также удаляем фоновый белый слой и приступаем к анимированию. Я хочу сделать так, чтобы пасхальные яйца мерцали. Для этого нужно создать несколько новых слоёв и прорисовать на них кадры анимации. На первом слое закрашиваем первое яйцо более светлым оттенком. На втором слое оттенок станет ещё светлее. На третьем и четвёртом слое я проделаю то же самое со вторым яйцом и так далее. В конце концов, у нас получается набор из различных "миганий" (рис.20), которые мы будем комбинировать в наиболее понравившихся вариантах (я собираюсь сделать так, чтобы яйца мерцали по очереди). Откройте панель анимации (Окна -> Анимация (рис.21)). Чтобы создать новый кадр, нажмите на значок в виде листа бумаги (рис.22). Чтобы выбрать, что будет отображаться в конкретном кадре, щёлкните на него, а затем во вкладке "слои" сделайте видимыми только те слои, которые должны показываться именно в этом кадре. Для регуляции длительности кадра нажмите на маленький треугольничек в его нижнем правом углу. Здесь начинается простор вашей фантазии, и вы можете выбирать такие комбинации мерцания, какие придут вам в голову. Замечу лишь, что для плавного мерцания первого яйца (а, по аналогии, и всех остальных) в первом кадре выберите сначала первый слой анимации (светлый цвет), во втором кадре - второй слой (самый светлый оттенок), в третьем кадре возвратиться к первому слою.

Этап 6. Сохранение

Всё готово? Просмотрите свою анимацию (кнопочка "плей" в окне Анимация (рис.23)). Вам нравится? Замечательно. Осталось только сохранить (рис.24): Файл -> Сохранить для Web и устройств (это сделает размер гифа минимальным и наиболее удобным для интернет-страничек). Жмём «Save» (рис.25). Готово! Загрузите свой гиф на любой хостинг картинок и украшайте им свои странички. 8)