СОЛНЫШКО (анимированный аватар)

ЗДРАВСТВУЙТЕ, УВАЖАЕМЫЕ ЧИТАТЕЛИ!

Сегодня я хочу представить Вам еще один урок по созданию анимации. Мы будем делать анимированный аватар. Поскольку анимация для меня самой новый раздел в Фотошоп, то и уроки, соответственно будут пока простые. Для работы я буду сегодня использовать Photoshop CS3, но перевод команд, как всегда, будет.

Итак, ШАГ 1: создаем в Фотошоп новый документ  размером 150х150px  (это стандартный размер аватара на форумах) с белым фоном. Давайте для примера нарисуем солнышко, "играющее" своими лучами.  Создайте новый слой (SHIFT+CTRL+N) и назовите его ЛУЧИ_1. Затем возьмите инструмент Произвольная фигура (Custom Shape Tool) (U) , в настройках инструмента ставите опцию Заливка пикселей (Fill pixels)  и выбираете из набора программы фигуру в форме звезды с десятью лучами  

 Цвет переднего плана ставим желтый, примерно такой #ffff33. Зажмите клавиши ALT+SHIFT, чтобы Ваша фигура была нарисована равномерно и от центра, и рисуете вот такую желтую звезду 

ШАГ 2: дублируем слой ЛУЧИ_1 (CTRL+J) и  назовем копию ЛУЧИ_2.Клавишами CTRL+T вызываем команду Свободная трансформация (Free Transform), зажимаем клавиши SHIFT+ALT и немного увеличиваем лучи в размере и чуть поворачиваем их в любую строну. Должно получиться так :

 

ШАГ 3: нарисуем нашему солнышку что-то вроде головки с улыбающимся личиком. Для этого создаем новый слой (SHIFT+CTRL+N) с названием ГОЛОВКА. Берем инструмент Овал (Ellipse) с теми же настройками, что и Произвольной фигуры (Custom Shape). Цвет переднего плана можно взять оранжевый, например такой #ffcc66 и  рисуете в центре наших лучиков круг, при этом не забудьте о клавишах-помощницах SHIFT+ALT. А чтобы долго не искать центр картинки, можно установить направляющие горизонтальную на 75 пикселей и вертикальную также на 75 пикселей. Получим нужный нам центр 

ШАГ 4:  начинаем рисовать личико нашему солнышку. Но для начала добавим еще одну горизонтальную направляющую, установив ее приблизительно на 55 пикселей:  Создаем новый слой ГЛАЗА, в настройках инструмента Овал (Ellipse) указываем опцию Paths (Контуры)  и рисуем такой овал (для удобства можно увеличить изображение до 600% клавишами CTRL+"+"):

 Затем берем инструмент Выбор Контура (Path Selection Tool) , щелкаем по нарисованному овалу и, зажав клавишу ALT, перетаскиваем наш контур вправо. Вы заметили, что при нажатии указанной клавиши рядом с курсором в виде черной стрелки появился маленький плюс? Это значит, что Вы сейчас создали точную копию контура:

 Щелкните мышкой в любом месте документа, чтобы Фотошоп понял, что мы не собираемся редактировать контуры. Теперь в Палитре слоев перейдите на вкладку Контуры (Paths) и щелкните внизу Палитры значок Создать выделение из контура (Load Path as Selection) 

 Таким образом наши контуры превратились в выделения, которые нам нужно обвести. Для этого идем в меню Редактирование/Выполнить обводку (Edit/Stroke) и в открывшемся окне ставим такие настройки 

 Не снимая выделения, ставим цвет переднего плана белый и нажимаем клавиши ALT+BACKSPACE. Все, выделение залито нужным цветом.  Наш результат на этом этапе примерно такой 

ШАГ 5: продолжаем рисовать глаза. Создаем еще один слой ГЛАЗА_2 (SHIFT+CTRL+N) и повторяем все, описанное в ШАГЕ 4 только на этот раз овалы рисуем меньшего размера (это будут зрачки глаз) и можно пропустить обводку контура и сразу выполнить заливку наших зрачков любым цветом. Я использовала такой #0000ff. Можно еще добавить блеска нашим глазкам, поставив белые точки инстррументом Кисть (Brush)размером 1-2 пикселя и средней мягкости. Результат:

 

ШАГ 6: осталось нарисовать носик и улыбку нашему солнышку. носик мы рисуем  также инструментом Овал (Ellipse) и заливаем его светло-розовым цветом #fff2f4 (см. ШАГ 4). Чуть пониже рисуем рот. Сначала создаем такой контур 

Затем берем инструмент Редактирование Контура или в простонародье Стрелка (Direct Selection Tool) 

 и просто проведите им вокруг левого края овала. Обратите внимание на то, что из появившихся опорных точек, серая только одна. Это значит, что мы можем работать только с ней. Несколько раз нажмите на клавиатуре клавишу со стрелкой вверх. Видите, что происходит? Наша опорная точка "уползла" вверх, как бы приподнимая уголочек рта 

 Точно также поступаем и с правым уголком. Теперь щелкните по нижней центральной точке и нажмите несколько раз клавишу со стрелкой вниз. Получается такая вот улыбка: 

 Осталось залить ее красным цветом (снова см. ШАГ 4) и мягкой кистью добавить румянец на щечки. У меня получилось так 

     

ШАГ 7: солнышко готово. Но лучиками оно пока не играет.  Самый раз перейти к созданию анимации. У кого Photoshop CS2 и ниже, в Палитре инструментов нажмите кнопку Редактировать в Imadge Ready (Edit in Imadge Ready)  В моем случае я вызывала окно Анимация (Animation) через меню Окно/Анимация (Window/Animation) открывается окно анимации с первым кадром. Теперь в Палитре слоев скроем слой ЛУЧИ_1, нажав на "глаз" слева от иконки слоя 

В окне Анимация нажимаем на кнопочку Дублировать текущий  кадр

 и получаем копию первого кадра, который выделен цветом, а значит его содержимое можно менять, что мы и сделаем. В Палитре слоев включите слой ЛУЧИ_1  и скройте слой ЛУЧИ_2.  Так можно сделать несколько кадров. Я ограничилась пятью и каждому кадру поменяла частоту смены, то есть то, с какой скоростью мои кадры будут менять друг друга. Как это делать, я уже рассказывала в уроке ДЕЛАЕМ АНИМАЦИЮ . На всякий случай смотрите рисунок (чтобы было более понятно, сделала в Imadge Ready русский) 

 

Теперь достаточно нажать на кнопку Воспроизведение внизу окна и смотреть на результат. Сохраняем наш труд через меню Файл/Сохранить оптимизированный как... (Save optimised as... ) для Imadge Ready, или Файл/Сохранить для Вэб (File/Save for Web and divice) в формате GIF.   То, как я применила эту анимацию, смотрите здесь.  

Удачи и до новых встреч!!!