Моргающие глаза анимация. Моргающие глаза

Учимся делать "моргающие глазки" в фотошопе.

Хотите знать как сделать эффект моргающих глазок в программе PhotoShop?

Оказывается, все очень просто.

Для начала ищем подходящую картинку или фотографию. С настоящей фотографией придется потрудиться побольше, поэтому для примера возьмем рисунок, а не фото.

Шаг 1.

Открываем картинку в фотошопе. Копируем ее еще на 3 слоя. (Правой кнопкой мыши щелкаем по слою и в открывшемся меню выбираем пункт "Дублировать слой " или "Duplicate Layers "). Переименовываем слои. Это необязательно, просто для того, чтобы лучше ориентироваться. Самый нижний слой "Глазки открыты", второй слой снизу "Глазки полузакрыты", третий слой - "Глазки закрыты", самый верхний слой - "Глазки полуоткрыты".



Шаг 2.

Выбираем самый верхний слой и начинаем с ним работать. С помощью инструмента "Пипетка" выбираем цвет. Лучше всего подходит цвет где-нибудь с переносицы или со щечек под глазками. Берем инструмент "Кисть" и аккуратно закрашиваем половинку каждого глаза. Затем опять с помощью пипетки берем образец краски с ресниц или бровей. Кисточкой рисуем реснички. Если Вы не уверены в себе, как в художнике:), можно скачать готовые кисти в форме ресниц.


Шаг 3.

Верхний слой делаем невидимым, для этого щелкаем по "глазику" слева от иконки слоя. Выделяем второй слой сверху. На этом слое с помощью пипетки и кисти рисуем полностью закрытые глаза.


Шаг 4.

Аналогично делаем очередной слой с полузакрытыми глазками. Впрочем, можно просто скопировать самый верхний слой и перетащить его на второе место снизу, предварительно удалив лишний слой.

Шаг 5.
Для этого даем команду Window - Animation. Внизу рабочего экрана откроется новая панель Animation (FRAMES) :

В правом верхнем углу (место указано красной стрелочкой) нажимаем на кнопку и в открывшемся меню выбираем пункт "Создать кадры из слоев " или "Make Frames From Layers ".


Задаем время для просмотра каждого из кадров. Для того, чтобы моргающие глаза выглядели естественно, мы должны для каждого кадра назначить свое время. Итак, первый кадр показываем 2 секунды, второй и четвертый - всего лишь по 0,1 секунды, третий кадр - 1 секунду. Впрочем, эти цифры можно поменять так, как вам кажется более правдоподобным.
Обязательно под первым кадром надо выбрать пункт "Forever", который означает, что наша анимация будет повторяться постоянно.

Анимированные глаза в Фотошопе

В этом уроке мы научимся создавать анимацию мигающих глаз в Фотошоп . Для начала откройте ту фотографию или картинку, которую хотите анимировать . Для этого выберем пункт меню «Файл» - «Открыть».

Далее сделаем слой с фотографией доступным для редактирования – для этого щёлкнем два раза по слою с фотографией. Увеличим нашу фотографию до такой степени, чтобы отчётливо был виден глаз редактируемого объекта. Затем на панели инструментов выберем инструмент «Лассо».

Выделим данным инструментом верхнее веко редактируемого объекта. После того, как нужная нам часть глаза будет выделена, следует нажать следующие комбинации клавиш: сначала «Ctrl + C», затем «Ctrl + V».

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

Щелчком правой кнопки мыши по слою выберем пункт «Свойства слоев». Назовём наш слой «Глаз» .

Назовём созданный дубликат «Слой 1».

Выберем пункт меню «Окно» - «Анимация».

В появившемся окне «Animation» создадим копию имеющегося кадра при нажатии на специальную кнопку. В окне анимации теперь два кадра.

На панели инструментов выберем инструмент «Перемещение». На панели «Слои» выберем слой с названием «Глаз», а в окошке «Animation» выберем второй кадр. Далее при помощи инструмента «Перемещение» опустим слой с названием «Глаз» таким образом, чтобы верхнее веко находилось на уровне нижнего.

Теперь следует изменить положение века. Для этого выберем пункт меню «Редактирование» - «Свободное трансформирование»

Повернём и подвинем слой «Глаз» таким образом, чтобы трансформируемое веко повторяло очертания нижней части глаза.

В окне анимации выберем второй кадр. На палитре слои следует выбрать «Слой 1». Теперь мы должны закрасить область открытого глаза. Для этого можно использовать инструмент «Штамп».

Инструмент «Штамп» работает так: переходите на чистый участок (который потом будет расположен на месте объекта), зажимаете клавишу Alt и кликаете левой кнопкой мыши по этому месту. Затем перемещаетесь на объект и кликаете по нему. Повторяете эти действия до тех пор, пока не будет закрашен необходимый участок.

Далее, в окне анимации выбираем первый кадр и делаем невидимыми слои с названиями «Глаз» и «Слой 1». Для того, чтобы сделать слой видимым или невидимым, нужно щёлкнуть мышью на «глаз», находящийся перед слоем в палитре слоёв. По умолчанию все слои являются видимыми. Потом выбираем второй кадр в окне анимации, и наоборот, делаем видимыми слои «Глаз» и «Слой 1».

И, наконец, зададим время смены кадров 0,2 секунды для каждого кадра.

Теперь мы можем проиграть нашу анимацию или сохранить её. Для того, чтобы сохранить анимированное изображение, выберем пункт меню «Файл» - «Сохранить для web».

(0)
1. Простая текстовая анимация 1:48 1 4175
2. Переливающийся текст 2:44 0 5811
3. Мигание картинки 1:51 0 2494
4. Сверкающие фары 2:26 0 4241
5. Анимация дождя 2:12 0 2095
6. Падающий Снег 2:33 0 5331
7. Анимация глаза 1:57 0 4251

Итак, мы воспользуемся данным референсом для проработки бровей и морганий. Я их сделаю, и посмотрю, хорошо ли они смотрятся с этим персонажем.

У нас есть контроллеры век, я их выберу, чтобы закрыть веко. У неё огромные ресницы… Я продолжу, и буду отображать это моргание, повторяя движение референса. Существуют некоторые правила, например – делать закрытие глаз в течении четырех кадров, а открытие в течении двух. Суть в том, что открываются глаза быстрее, чем закрываются. Как будто бы у неё томное моргание. Глаза открываются медленно, а открываются достаточно быстро. Обычно я удерживаю глаза персонажа закрытыми в течение двух кадров, но иногда у меня бывает бОльшая задержка, если это нужно для какой-то цели. Я пытаюсь сделать так, чтобы её огромные ресницы мне не мешали. И если они немного заходят на кожу – ничего страшного, но я хочу, чтобы этого нахлёста совсем не было. Я хочу сделать, чтобы при движении вниз ресницы выглядели красиво.

У меня есть небольшое отступление. Я подумала, неплохо было бы дать совет по анимации моргания. Допустим, у вас есть какой-то мультяшный персонаж, как в данном случае. Существует маленькая хитрость, как сделать, чтобы моргание выглядело более реалистичным и живым. Скажем, мы хотим, чтобы она моргнула в этот момент. Сделаем здесь ключ. А закроет она глаза здесь. Сейчас процесс у нас весь линейный и немного скучный, как нам сделать его более интересным? Обычно, закрытие глаз происходит равномерно, но мы сделаем так, чтобы в этот момент движение замедлилось. Мы меняем форму кривой, чтобы движение происходило более плавно. После этого глаза быстро открываются. И если вы посмотрите на форму этой кривой и представите мысленно, что мы перевернём её, то она будет похожа на плавник акулы. Пит Нэш, анимационный директор мультфильма «Облачно, возможны осадки в виде фрикаделек», дал несколько уроков по анимации морганий. И здесь мы воспользовались его подходом. Это так называемый «акулий плавник», и я считаю, что это отличный совет. Попробуйте тоже так сделать и проверьте, станет ли ваша проработка морганий лучше.

Но вернёмся к морганиям в данной анимации. Я промотала всю шкалу времени и сверяла моргания персонажа и референс. Вот здесь мне нужно будет немного опустить веки и нужно будет добавить ещё кое-что. Когда веки опускаются, то они заходят на радужку, и она немного уходит вниз. Когда веки возвращаются назад, то радужка тоже возвращается на место. Это довольно-таки слабозаметное явление, но подобные явления позволяют сделать текстуру анимации лучше. Давайте завершим моргание здесь. У нас есть контроллеры самих глаз. Это не тот, это тоже не тот… Да, вот это то, что нам нужно.

Когда веко идёт вниз, то вот здесь, например, можно оттеснить глаза вниз. Сначала край века движется на радужку, а затем движется и чёрный зрачок. Я обычно делаю это так. И также, когда веко поднимается наверх, проходит какое-то время перед тем, как радужка поднимется за веком. Глаза у меня обычно проработаны с линейной интерполяцией. Они обычно движутся быстро. Использование линейного типа кривых движения даёт больше текстуры. Но я знаю, что некоторые любят работать с другими типами кривых, однако на данном этапе лучше я их оставлю линейного типа. Так анимация у нас будет более энергичной.
Нужно убедиться, что движение начинается с глаз, а не с головы. Мы всегда сначала смотрим на какую-то точку, а потом уже поворачиваем туда голову. Сейчас я буду прорабатывать её взгляд. Она немножечко смотрит вверх вот здесь. Далее ее глаза смотрят вперед, а потом её взгляд переносится в сторону. Давайте убедимся, что мы всё это проработали. Я буду продолжать работать с линейным типом кривых.

Давайте проработаем брови. Сейчас у нас всё движется одновременно, но нужно, чтобы брови первыми шли вниз и как-бы надавливали на веки. У неё очень большие веки и это позволяет сделать более правильное моргание. Нужно начать движение бровей немного раньше. И вот брови идут вниз, а потом опускаются и веки. Она какое-то время стоит, поэтому мы продлим паузу с 4 кадров до 6. И у неё продолжительные эмоции на лице, как будто она долго не может поверить в то, что слышит и в принципе она остаётся с этим выражением до конца её реплики.
И наконец, мы все быстро промотаем все и посмотрим, что у нас получилось, для того, чтобы проверить, всё ли у нас в порядке. Это всё ещё сырой образец, но я продвигаюсь в своей работе как можно быстрее, чтобы успеть охватить все базовые вещи, которые нам нужны. Мы быстро проверим, работает ли моргание и если моргание и брови нормально работают, то мы перейдем к анимации положения тела. В целом, все движения лица происходят в нужное время, есть немного резкие переходы, но мы с ними поработаем в следующей части, на стадии окончательной шлифовки движений.