Рисуем подмигивающую анимированную аватару в Adobe Photoshop

Вопросы по созданию «подмигивающих» аватарок задаются регулярно. Эффект пользуется популярностью. Во избежание дальнейших ответов написан этот урок.

Попробую все пояснить подробно, но надеюсь, что Photoshop у Вас под рукой и Вы им иногда пользуетесь. Итак. Выбираем изображение для аватары и «вгоняем» ее в нужный размер. Пусть будет 100×100. Мой любимый размер. (Вообще, анимировать глаза стоит только на достаточно крупных изображениях. На среднем и дальнем планах эффект практически не виден).

Берем картинку (рис.1) и открываем ее в Photoshop. Сразу же создаем новый документ рис.2 — прообраз будущей аватары нужного размера. У меня — 100×100 пикселей. Перетаскиваем исходную картинку в документ-аватару и удаляем в нем слой заднего плана активировав слой (просто нажать на нем) и нажав на мусорку (рис.3).

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

Теперь масштабируем изображение как нам нужно. Для этого — смотрим рис.4 и 5. Цифрами отмечена очередность операций и менюшки — где-чего жать и в каком порядке.

Рис.1

Рис.2

Рис.3

Рис.4

Не забываем поставить галку (рис.5) на сохранении пропорций, а то картинка исказится. Масштабируем. Создаем дубликат отмасштабированной нами картинки (рис. 6). Создаем новый чистый слой (рис.7), обзываем его ГЛАЗА_100. На нем мы и будем рисовать закрытые глаза. Я (как человек в рисовании педантичный) вообще люблю ясность в названии слоев. Когда их (слоев) штук 30–40 — становится ясно, что это просто необходимо. Иначе легко запутаться и пустить псу под хвост готовую работу. Первый слой я называю «исходник», второй (дубликат первого) — так же как и третий — ГЛАЗА_100. В конце работы я их сведу вместе командой «объединить с предыдущим». Приступаем непосредственно к рисованию. Сильно увеличиваем изображение лупой. Выбираем инструмент «пипетка» и берем образец цвета для «закраски» глаза (рис.8).

Рис.5

Рис.6

Рис.7

Рис.8

Берем кисточку с размытым краем — мягкую круглую 5 пикс (рис.9), устанавливаем для нее нужный размер (2–5 пкс в зависимости от размера глаза, сейчас — конкретно 3 пикселя) и прозрачность (я обычно ставлю — 5–12%). Закрашиваем глаз цветом взятого образца. Постепенно меняем цвета для получения реалистичного (более-менее) изображения (рис.10). Меняем размер до минимального 1пкc при прорисовки ресниц. При необходимости, подтираем почти прозрачным ластиком. В общем-то процесс творческий. Это сугубо — рисование с примитивным знанием анатомии. Научить этому я не могу. Поэтому только посоветую.

Смотрим рис.11. Сначала цветом образца со лба (светлым, короче) закрашивается весь глаз, до полной непрозрачности — помечено синим цветом — цифра 2. Но глаз имеет сферическую форму, а не плоский как доска. Поэтому — в центре области — цвета более светлые, к краям — потемнее. Дело тонкое. Неспешное.

Красная область с цифрой 1. Область нахождения ресниц. Понятно, самая темная часть закрытого глаза. Для мужских аватар — более светлая, для женских, понятно, темнее — тушь и все дела.

Зеленая область, цифра 3. Когда глаз открыт — в этой области находятся ресницы. Закрывая глаз — ресницы идут вниз. Красим, осветляя эту область, делая границу почти или совсем незаметной. Полезно (для общего развития) посмотреть на образец в зеркало или на картинку с закрытым или полузакрытым глазом и сделать как там — рис.12—13. Макияж лишь меняет цвет, но не принцип.

Рис.9

Рис.10

Рис.11

Рис.12

Надо добиться максимально реалистичного изображения. Хотя можно и примерно. Учитываем, что картинка все же — всего 100 пикс и время она будет занимать — 0.1 сек. в анимации. Но — лучше постараться. Я вот пока не очень доволен результатом. Зеленая область у меня темнее (так мне кажется), чем следует. Я ее немного осветляю. Меняю масштаб на более мелкий — смотрю. Сойдет. Мне нравится, но вопрос конечно спорный. Пропускаем споры и продолжим.

С грехом пополам будем считать, что глаз мы закрыли. Но это не все. Для анимации — процесс закрывания лучше разбить на два (а еще лучше — на три) кадра. Дублируем слой ГЛАЗ_100 и обзываем его ГЛАЗ_50. Берем ластик (в форме кисти 3–4 пикселя и прозрачностью 3–8%. Убираем половину нарисованного (см. рис.15), выключив пока видимость слоя ГЛАЗА_100 (помечено красным). Надо только дорисовать ресницы.

Дорисовываем — рис.16. Работа тонкая, переходим на кисть и ластик размера 1 пиксель и на минимальную (3–6%) прозрачность. Можете покритиковать, но я результатом почти доволен. Неплохо. Итак. С рисованием глаз покончено. Я обычно сохраняю этот вариант — как контрольный и делаю еще одну копию. При ошибках в дальнейшем — ведь еще нужно будет делать на аватарке спецэффекты, писать ник-нейм и т.п. — всегда можно вернуться на шаг назад (мне удобней так, хотя есть масса других способов вернуться). Что дальше. Сводим слои.

Рис.13

Рис.14

Рис.15

Рис.16

Делаю еще один слой из «Исходника» и располагаю все получившиеся слои — так: рис.17. Делаю активным нужный мне слой и объединяю его с предыдущим (рис.18). С Глаз_50 поступаю аналогично. В результате — у меня 3 слоя (рис.19). Можно анимировать.

Если у Вас нет Adobe ImageReady — придется сохранить три слоя по отдельным файлам gif и потом уже подгружать их по очереди в аниматор. В моем случае — я просто перехожу в аниматор ImageReady.

Смотрим рис.20. Надо открыть окно анимации через меню «Окна». Если оно у Вас открыто (по умолчанию) — сразу выбираем в меню анимации — создать кадры из слоев. Копируем кадр 2 (через то же меню анимации) и вставляем его после кадра 3. Через тоже меню анимации — «вклеить кадр...»

Рис.17

Рис.18

Рис.19

Рис.20

Получилось четыре кадра, что мы и анимируем — назначая им время отображения кадра — рис.21. Первый кадр я ставлю — 1 сек, три следующих — 0,1 сек. Жму play и наслаждаюсь. Можно ограничится этим. Хотя, конечно, возможности приема много больше. Итог — сохраняю как gif — рис.22.

Вкратце про настройки публикации — рис 23. Откройте (если не открыто) окно «Оптимизация». Выставьте параметры — как на рисунке. Почему именно такие — тема совсем другого урока. Пока — просто выставьте их так, поверьте на-слово. И как на рис.22 — сохраняйте готовый гиф — рис.24. Понятно, что можно делать так же — полуопущенные ресницы, подмигивание и т.п. Хоть целый спектакль. Ну а я на этом — закругляюсь.

Рис.21

Рис.22

Рис.23

Рис.24

Примеры анимации «глаза моргают»

Надеюсь, что это было нудно, но понятно. С пожеланиями творческих успехов — san_san.