Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Скачать шаблон для ucoz на тему ВАРЕЗ пОртаЛ CS icons for Ucoz Скачать игровой шаблон Скачать шаблон на тему RAP Как сделать Стильный анимированный аватар в фотошопе Как сделать "Красивая иконка папки в фотошопе" Иконки для УКОЗ Шаблон форума Invision power board pro2 (под uCoz) Как добавить фотографиям реалистично ярких цветов Как сделать макияж в Adobe Photoshop Голубые иконки для сайтов Иконки групп для форума СКАЧАТЬ кнопки для форума Скачать Кисти для PhotoShop в виде различных силуэтов... Скачать голубой шаблон для сайта Скачать бесплатно Новый Шаблон для UcoZ (от Web-Masteru.Net.Ru) эффект ePlastic Шаблон для музыкального портала СКАЧАТЬ ШАБЛОН ДЛЯ UCOZ cs ! Скачать шаблон DLE for ucoz Как делать панораму в Photoshop Шаблон UCOZ на тему cs by bannerkz Скачать кисть Пятна краски Создание композиции в фотографиях Скачать бесплатно шаблон на тему Counter Strike
Главная » Статьи » Уроки Adobe Photoshop » Анимация

Анимация в PhotoShop, создание аватара в Photoshop

« Анимация в PhotoShop, создание аватара »

Урок по анимации в фотошопе (PhotoShop). Создание анимированного аватара. Изображение фигур в перспективе...

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

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

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

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

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

как делается анимация

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

анимация в фотошопе

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

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

анимация в PhotoShop

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

как сделать аватар

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

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

анимированный аватар

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

анимированный аватар в фотошопе

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

анимированный аватар в PhotoShop

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

работа в перспективе

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

изображение фигур в перспективе

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

работа с перспективой в фотошопе

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

работа с перспективой в PhotoShop

В моём примере вы можете заметить горизонтальную штриховку поверх логотипа. Добавил я её не подумав, а сейчас понял, что при последующем уменьшении изображение (мы же делаем аватар размера 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:

создание логотипа

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

3D логотип

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

трёхмерный логотип

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

логотип в перспективе

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

изображение логотипа в перспективе

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

создание анимации

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

как создаётся анимация

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

как создаётся анимация в фотошопе

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

как создаётся анимация в фотошоп

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

как создаётся анимация в PhotoShop

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

урок по анимации

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

урок по созданию анимации

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

Заходите в Layer Style и настройте некоторые эффекты. Сразу добавим внешнее свечение (Outer Glow):

анимация в фотошопе

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

анимация в PhotoShop

Можно жать Ok:

как в фотошопе делается анимация

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

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

урок по анимации в фотошопе

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

урок по анимации в PhotoShop

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

урок по анимации в фотошоп

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 и переместите нашу «волну» влево (до начала нового сегмента):

анимация в PhotoShop CS3

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

куда делся ImageReady в PhotoShop CS3

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...) и получаем финальную версию аватара:

анимация в фотошоп

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

Спасибо за внимание!



Категория: Анимация | Добавил: cinemania (20.12.2008)
Просмотров: 26814 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Пятница, 29.03.2024, 09:36
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Логин:
Пароль:
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz