Сегодня перед вам такой вот комбинированный урок: в нём вы научитесь создавать анимацию в фотошопе, изображать фигуры в перспективе, ну и делать аватары :)

Что в этом уроке есть такое, чего не было в прошлых уроках про анимацию: создание анимации с применением маски слоя.

Надеюсь, что никаких трудностей данный урок у вас не вызовет. Вот, собственно, и всё предисловие...

Анимированный аватар в PhotoShop (фотошоп)

1. Создаём новое изображение размером, примерно, 450x450 px (с изображением такого размера легче работать) и заливаем серым цветом (#969696):

2. Выбираем Ellipse Tool и рисуем эллипс белого цвета:

3. Растрируем слой с эллипсом (для этого на панели слоёв Layers кликните по изображению слоя правой клавишей мыши и в появившемся меню выберите пункт Rasterize Layer).

После этого размойте изображение, применив следующий фильтр: Filter —> Blur —> Gaussian Blur с такими настройками:

Вот что должно получиться:

4. Теперь создайте новый слой и вставьте туда какой-нибудь логотип, букву, фигуру или ещё что-нибудь (если это буква или фигурка (Shape), то её нужно будет растрировать таким же образом, как было сказано выше).

Изображение обязательно должно быть одноцветным, чёрного цвета:

5. Зайдите в Layer Style (для чего на панели слоёв Layers кликните правой клавишей мыши по изображению слоя и в появившемся меню выберите пункт Blending Options...) и перейдите на вкладку Outer Glow (внешнее свечение), выставьте там следующие параметры:

6. Теперь перейдём на вкладку Inner Glow и добавим внутреннее свечение:

7. Переходим на вкладку Stroke и добавляем обводку:

8. Раскрасим нашу фигуру, залив её градиентом. Для этого перейдём на вкладку Gradient Overlay и настроим параметры градиента следующим образом:

А вот так выглядит окошко с подробными настройками градиента (оно открывается по нажатию на полосу с градиентом):

Всё. Теперь кликаем везде Ok и получаем что-нибудь похожее на вот это:

В моём примере вы можете заметить горизонтальную штриховку поверх логотипа. Добавил я её не подумав, а сейчас понял, что при последующем уменьшении изображение (мы же делаем аватар размера 100x100 px) она заметна вообще не будет. Но, если вам интересно как она делается, то прочесть об этом можно в уроке о создании логотипа для сайта.

9. Теперь, чтобы фигура казалась размещённой в пространстве, трансформируем её. Для этого в меню выберите пункт: Edit —> Transform —> Distort и трансформируйте фигуру следующим образом:

10. Нарисуем отражение фигуры.

Создайте копию слоя с логотипом (для этого просто переместите изображение слоя на иконку создания нового слоя, или кликните по изображению слоя правой клавишей и выберите пункт Duplicate Layer) и отразите её по вертикали (Edit —> Transform —> Flip Vertical):

11. Выберите произвольную трансформацию (Edit —> Free Transform) и разместите фигуру следующим образом:

12. Сожмите немного фигуру, чтобы отражение было более реальным:

13. Создайте из слоя с отражением смарт-объект (на панели слоёв Layers кликните правой клавишей на изображении слоя и выберите пункт Group into New Smart Object). Добавьте к нему маску. Для этого на панели слоёв нажмите кнопку Add layer mask...:

14. За тем выберите чёрно-белый (или т.н. чёрно-прозрачный) градиент и залейте им маску снизу вверх, немного под наклоном:

Вот что должно после этого получиться — довольно правдоподобное отражение:

15. Начнём создание тени.

Создайте копию слоя с логотипом и разместите её под слоем-оригиналом.

Отключите все эффекты слоя, чтобы фигура стала снова чёрной (для этого кликните правой клавишей на этом слое и выберите пункт Clear Layer Style).

С помощью трансформации (Edit —> Transform —> Distort) трансформируйте фигуру следующим образом:

16. Размойте изображение, применив фильтр Filter —> Blur —> Gaussian Blur:

Вот что должно произойти с тенью:

17. Чтобы картинка выглядела ещё реальней, доработаем тень. Добавим к слою маску и зальём её чёрно-белым градиентом сверху вниз, немного под углом:

А вот что должно у вас получиться:

18. Теперь, чтобы приукрасить логотип, добавим к нему блик.

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

19. Теперь выбираем Elliptical Marquee Tool и, зажав Ctrl создаём выделение следующего вида:

20. Выделение должно вырезаться одно из другого. Теперь выбираем Paint Bucket Tool и заливаем выделение белым цветом:

21. Добавляем к слою маску и заливаем её снизу вверх чёрно-белым градиентом:

Вот что мы получим:

22. Теперь обрежим ненужную часть изображения. Для этого выберите Crop Tool, зажмите Shift (чтобы получить квадратное выделение, а не прямоугольное) и обрежите вот так:

23. Сейчас выделите всю картинку (Ctrl + A или в меню: Select —> All), скопируйте всё изображение в буфер обмена (Shift + Ctrl + C или в меню: Edit —> Copy Merged) и вставьте скопированное изображение (Ctrl + V или в меню: Edit —> Paste), разместив полученный слой выше всех слоёв. Уменьшите изображение до размеров 100x100 px:

Вот так оно выгладит в уменьшенном виде:

24. Применим к слою немного эффектов. Сразу добавим обводку. заходим в Layer Style на вкладку Stroke и там делаем так, как показано ниже:

25. А на вкладке Pattern Overlay добавим штриховку (если у вас такой текстуры нет, то её можно создать самому, как это сделать написано в уроке о создании логотипа в фотошопе — 1й и 2й пункты):

26. Ну вкладке Inner Shadow добавим самозатенение:

Теперь можно нажать Ok и посмотреть на результат:

27. Нужно расширить рабочую область — делается это с помощью Crop Tool (выделяем и растягиваем выделение):

Вот так должно получиться:

28. Теперь создайте новый слой и разместите его ниже всех остальных слоёв. Залейте его чёрным цветом (с помощью Paint Bucket Tool):

29. Выберите инструмент Custom Shape Tool, в качестве фигуры выбираем следующий орнамент:

И рисуем вот такую фигуру (её высота должна быть больше, чем высота логотипа, а ширина — больше ширины аватара):

30. Растрируйте слой с орнаментом (клик правой клавишей на изображении слоя, там выбрать пункт Rasterize), сделайте ещё две копии слоя и разместите их следующим образом:

31. Объедините три слоя с орнаментами в один (кликните по верхнему слою, потом два раза нажмите Ctrl + E; или через меню: Layer — Merge Down, тоже два раза).

Заходите в Layer Style и настройте некоторые эффекты. На вкладке Blending Options: Custom не забудьте выставить значение Fill Opacity в 0%. Сразу добавим внешнее свечение (Outer Glow):

32. После перекрасим изображение в оранжевый цвет (вкладка Color Overlay):

Можно жать Ok:

33. Теперь нам нужно сделать так, чтобы получившаяся у нас «волна» была видна только над нашим логотипом. Делается это с помощью маски слоя.

Нам нужно создать выделение нашего логотипа. Для этого зажмите клавишу Ctrl и кликните по изображению слоя с логотипом, получиться следующее выделение:

34. А теперь просто кликните на кнопку Add layer mask (не снимая выделения), после чего автоматически создастся маска слоя и всё, что не было выделено, станет невидимым:

Вот как это должно выглядеть:

35. Сейчас разъедините слой и маску (это нужно для того, чтобы при перемещении слоя маска за ним не двигалась), для этого кликните по изображению цепи между ними:

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

36. Всё для того, чтобы можно было сделать анимацию, уже готово. Осталось добавить саму анимацию.

В Adobe PhotoShop 10 CS3 Extended анимация делается прямо в нём, а в Adobe PhotoShop 9 CS2 (в котором я работаю и пишу все уроки) для создания анимации есть программка Adobe ImageReady CS2. Чтобы отправить изображение в ImageReady, в фотошопе в меню выберите пункт: File —> Edit in ImageReady.

В ImageReady окошко с изображением будет выглядеть следующим образом:

37. Выберите инструмент Move Tool и переместите нашу «волну» влево (до начала нового сегмента):

38. Создайте новый кадр, для чего на панели Animation нажмите на кнопку Duplicate Current Frame:

39. Переместите «волну» ещё влево, до начала следующего сегмента:

40. Ранее мы отключили маску слоя, теперь настало время всё вернуть на свои места.

Кликните по первому кадру, после чего кликните правой клавишей по маске слоя с «волной» и выберите пункт Enable Layer Mask. За тем повторите действие со вторым кадром:

41. Теперь нужно разбить движение «волны» от одной позиции до другой на много кадров.

Сейчас, на панели Animation кликните по второму кадру и затем кликните по кнопке Tween...

42. В появившемся окошке введите желаемое количество кадров (я использовал 30 кадров):

Добавилось 30 кадров. Последний (32й кадр) такой же, как и самый первый, по этому удалите его (чтобы избежать небольшой задержки при повторении анимации), кликнув по кадру и нажав на кнопку в виде корзины:

43. Анимация готова. Чтобы её просмотреть, нажмите на панели Animation кнопку Play/Stop Animation.

Теперь её нужно сохранить, для этого в меню выберите пункт File —> Save Optimized As.... В итоге получаем такую анимацию:

44. Теперь откройте только что сохранённый *.gif файл с анимацией в ImageReady, выберите инструмент Crop Tool и обрежьте изображение, оставив сам аватар:

Вот так должно получиться:

45. Снова сохраняем анимацию (File —> Save Optimized As...) и получаем финальную версию аватара:

Эффект получился довольно оригинальным. Похоже на какую-то химически активную жидкость. Вот если нарисовать пробирку и к ней добавить такую анимацию...

PS: ну, как Вам наш урок? :) Есть идеи, как сделать его проще или лучше? Есть вопросы, или заметили неточность? Оставьте свой комментарий! Спасибо за внимание!