• Авторизация


Аннимированный аватар...Урок, очень хороший! 04-11-2009 16:52 к комментариям - к полной версии - понравилось!

Это цитата сообщения Ikarus Оригинальное сообщение

Анимированный аватар, урок.



Он будет таким.

[показать]

 

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 и трансформируйте фигуру следующим образом:</B>
[показать]
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; или через меню: LayerMerge Down, тоже два раза).
Заходите в Layer Style и настройте некоторые эффекты. Сразу добавим внешнее свечение (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...) и получаем финальную версию аватара:
[показать]

откуда-то отсюда.

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Аннимированный аватар...Урок, очень хороший! | Natali_Gildt - Дневник Natali_Gildt | Лента друзей Natali_Gildt / Полная версия Добавить в друзья Страницы: раньше»