Фотошоп для фотографа 2013

Создаем анимированный танцующий каваий в Фотошопе

| Категория: Уроки по созданию анимации в Фотошопе | Сложность урока: Высокая

В данном уроке Фотошопа мы рассмотрим процесс создания анимированного танцующего каваий.
Внимание: Сложный урок. ВНИМАНИЕ: Урок предназначен для уже продвинутых пользователей Фотошопа.


Финальный результат

Создаем анимированный танцующий каваий в Фотошопе

Приступаем к уроку Фотошопа


Урок несколько трудоёмкий. Возможно сгодиться что бы потренироваться на выносливость.


Пояснение к названию: kawaii - это японское слово, обозначающее "милый", "прелестный".


Часть I. Photoshop.


Первым делом нам надо рассмотреть какие движения совершает танцующая девочка (рисунок будет внизу). Тут можно воспользоваться либо моим примером, либо взять подобный аватар и, увеличив его, на новом слое прорисовать движение (что в первый раз я и сделала) (Image Ready раскадрирует, остаётся лишь нажать Print Screen и вставить - так с первого по 4 кадры).


Итак, берём Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") (кисть размером 2px) и осторожно обводим нашу героиню.


Создаем анимированный танцующий каваий в Фотошопе

Всего там 4 различных движения – рисуем их все.


Создаем анимированный танцующий каваий в Фотошопе

Теперь мы её раскрасим каким вам угодно способом – кистью или выделяя и заливая. Думаю, цвета для кожи, волос и одежды, вы выберете сами, я же просто рисовала свою подругу, и раскрашивала в соответствии с реальными цветами ^.^


Создаем анимированный танцующий каваий в Фотошопе

Тени не будут у нас грустно-серыми. Легче всего воспользоваться тем же Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") создать выделение, залить его чёрным цветом и поставить режим наложения на Overlay (Перекрытие) и поиграться с Opacity (Непрозрачность). Так как она будет двигаться, от этого ничего не теряется. Тени можно подсмотреть на моём примере, можно нарисовать самому, только надо запомнить, какая нога в тени – от этого зависит реалистичность.


Блик на волосах делается тоже просто. Возьмём более светлый цвет, чем волосы, берём Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P"), выделение сначала идёт по линии челки, а потом резко сворачивает к её середине и утоньшается. Делаем выделение – Make Selection (Создать выделение), заливаем – Alt+Delete. Не снимая выделения, создаём новый слой поверх, берём Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"), выбираем Radial (Радиальный градиент) в верхней строке под главным меню, и от середины чёлки растягиваем до конца волос. Blend Mode (Режим наложения) меняем на Overlay (Перекрытие) и так же выстраиваем Opacity (Непрозрачность) по своему усмотрению.


У меня получилось вот так: ↓


Создаем анимированный танцующий каваий в Фотошопе

Помните – все движения должны быть раскрашены!


Каждый спрячьте в отдельную папочку способом перенесения на иконку «Create a new group» (Создать новую группу), и сделайте для каждого белую подкладку: new layer (новый слой) – (кому нужно, сбрасываем цвета, нажав D) - Cntrl+Delete, пряча этот слой под слоём с движением девочки.


Активируем первую белую плашку, берём Polygonal Lasso Tool Инструмент - Многоугольное лассо (Инструмент Многоугольное лассо / Клавиша "L") и небрежно, делая резкие углы, вырезаем по фигуре девочки, отступив от неё на 3-4px.


Далее, к этому получившемуся слою применяем Layer style (Стиль слоя) => Drop Shadow (Тень) с такими установками:↓


Drop Shadow (Тень): ↓

Создаем анимированный танцующий каваий в Фотошопе

С остальными подкладками делайте тоже саоме. Чтобы не возиться с Layer style (Стилями слоя) у оставшихся, щёлкаем правой кнопкой по первой подкладке с уже сделанным стилем Drop Shadow (Тень) => Layer > Layer Style > Copy Layer Style (Слой > Стиль слоя > Скопировать стиль слоя). Ну, и соответственно, щёлкаем правой на следующей подкладке без стиля и выбираем Layer > Layer Style > Paste Layer style (Слой > Стиль слоя > Вклеить стиль слоя).


Итак, у нас есть один наклон в правую сторону (со стороны девочки, конечно)! Самое трудоёмкое закончилось. Чтобы продолжить танец, сделав наклон в левую, мы копируем слои с правым наклоном, выделяя их и перенося на иконку «new layer» (новый слой). Потом, не снимая выделения со слоёв, Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали). Тут у нас возникает проблемка: отображается не по оси движения, а по середине картинки. Лёгкий способ: докопировать движения с 5 по 8, используя Print Screen, в Image Ready и расставить по местам в соответствии. Но можно и по-другому: сделать копию изначальных первых 4 движений, для каждого изготовить подкладку, так же, как мы делали с белой, слить по отдельности движения со своей подкладкой (щёлкаем по слою с движением, выбираем Merge Down (Объединить слои)). Далее, выделяем все получившиеся слои (их 4), и идём Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали). По удавшемуся трафарету выставляем наши настоящие движения с наклоном влево. Удаляем ненужные слои.


Должно получиться что-то вроде этого, если активировать видимость всех слоёв: ↓


Создаем анимированный танцующий каваий в Фотошопе

Ну и делаем фон, под всеми слоями. Он должен быть неброским, не отвлекающим от самой девочки.


Часть II. Image Reader.


Наконец-то переходим в Image Reader (Shift+Cntrl+M)!


У нас сразу появляется первый кадр, активирован и виден первый слой, и так же он уже добавлен в палитру анимации. Надо только выставить время смены кадра с 0 sec. на 0.1 sec. в «Select frame delay time» (Выбрать время задержки для кадра), а, проще говоря, нажать на маленькую стрелочку в палитре Animation (Анимации) под первым кадром и выбрать нужное время.


Итак, наше дело – добавить все остальные кадры. Для этого нажимаем на иконку, аналогичную с «new layer» (похожу на кнопку "новый слой") в палитре Animation (Анимации), только называться она будет «Duplicates current frame» (Дублировать выделенные кадры). У нас появился одинаковый кадр с первым. Так что выключаем активный слой с первым движением, нажав на глаз, и делаем видимый следующий. Потом создаём опять новый кадр, снова выключаем активный и включаем следующий. И так до конца.


Внизу, в палитре Animation (Анимации) меняем «Once» (Единожды) на «Forever» (Навсегда).


А теперь, нажимаем на «Play» … Та-да! Она танцует.


Создаем анимированный танцующий каваий в Фотошопе

Дело осталось за малым: File > Save Optimized As (Файл > Сохранить оптимизированный как...). Называем её как-нибудь, выбираем формат Gif и готово.


Поняв суть движений, вы сможете рисовать сами, без помощи аватаров или моих подсказок. После такой практики это не будет трудно!


Я, например, не выдержала и создала ещё одну, уже с несколько другим типом движения, не столь болтающимся в разные стороны. Правда, хвост чуток не вышел.


Альтернативный результат

Создаем анимированный танцующий каваий в Фотошопе

Финальный результат

Создаем анимированный танцующий каваий в Фотошопе

Автор: Stupid_fox;

Текст доработан командой сайта PhotoshopPro.ru