Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Граффити Как менять цвет глаз в Photoshop Шаблон сайта для ucoz Шаблон для сайта КС Скачать шаблон для ВАРЕЗА Soft Portal By avdey =) Шаблон на тему кино Как сделать оригинальный логотип в PhotoShop? Шаблон для дизайн студии Шаблон для онлайн кинотеатра скачать Шаблон для uCoz в стиле "VISTA" Скачать иконки ucoz Текст на жидкости Скачать кнопки для форума Скачать голубой шаблон для сайта Набор иконок для форумов в системе UcoZ - Лиловые иконким Иконки для форума UCOZ - Круглые янтарные иконки Скачать Адаптация из DLE под ucoz AllForYou Скачать иконки групп Шаблон uCoz музыкального портала Crfxfnm valve portal shablon Глянцевая навигационная панель для сайта Огненные иконки для форума UCOZ Красивый шаблон для ucoz Скачать бесплатно шаблон Design Vista Иконки групп для ucoz by CкРиПтЕг
Главная » Статьи » Уроки Adobe Photoshop » Анимация

Как нарисовать вращающуюся шестерёнку в PHOTOSHOP

« Урок по анимации в PhotoShop: вращающаяся 3D шестерёнка на аватаре... »

Как нарисовать вращающуюся шестерёнку, повёрнутую в 3D. Анимация в фотошопе...

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

Ну вот и всё предисловие, можно приступать к творчеству...

Вращающаяся 3D шестерёнка в фотошопе, использование в качестве аватара

1. Создаём новое изображение, размер побольше (чтобы лучше было с ним работать, уменьшим потом), в моём примере 400x400 px.

Начнём рисовать шестерёнку. Выбираем Rectangle Tool и рисуем такой прямоугольник (в примере я нарисовал прямоугольник размером 56x295 px):

вращающаяся шестерёнка

2. Теперь нужно сделать три копии этого прямоугольника и повернуть каждую относительно предыдущей на 45 градусов. Но для этого не нужно повторять одну и ту же операцию 4 раза, можно сделать проще...

Перейдите на панель Actions и нажмите кнопку Create New Action:

шестерёнка в фотошопе

3. Введите название и жмите кнопку Record:

эффект вращение

4. Сделайте дубликат слоя с прямоугольником, для чего нажмите сочетание клавиш Ctrl + J (или перетащите изображение слоя на иконку для создания слоя; или кникните на изображении слоя правой клавишей и выберите пункт Duplicate layer).

Поверните дубликат на 45 градусов, для чего используйте произвольную трансформацию: в меню выберите Edit —> Free Transform (или нажмите сочетание клавиш Ctrl + T) и в поле Rotate введите число 45:

анимированная шестерёнка

5. Примените трансформацию, нажав клавишуEnter и в окошке Actions нажмите кнопку Stop Playing/Recording.

Сейчас кликните по только что созданному (записанному) экшену (Action) и нажмите два раза кнопку Play Selection. Вот что должно произойти:

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

6. Создайте новый слой. Сейчас выберите инструмент Ellipse Tool и, зажав клавиши Shift (для рисования круга, а не овала) и Пробел (для перемещения фигуры во время рисования), нарисуйте по центру круг:

аватар с анимацией

7. Сейчас будем учиться работать с альфа каналом. Перейдите на панель Channels и там нажмите кнопку Create new channel, должен создаться новый канал (это и есть альфа канал):

аватар с шестерёнкой

8. Теперь зажмите клавишу Ctrl и кликните по любому другому каналу чтобы создать выделение. Инвертируйте выделение (через меню: Select —> Inverse или комбинацией клавиш Shift + Ctrl + I), выберите Paint Bucket Tool и залейте выделение белым цветом:

аватар с вращающейся шестерёнкой

9. Размойте альфа канал, применив фильтр: Filter —> Glur —> Gaussian Blur со следующими настройками:

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

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

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

11. Теперь сделаем изображение более чётким. Для этого зайдём в меню: Image —> Adjustment —> Levels и в открывшемся окошке выставим следующие параметры:

анимация в PhotoShop

12. Жмём Ok и получаем чёткую шестерёнку:

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

13. Шестерёнка у нас нарисована в альфа канале, а нужно сделать её на слое. Для этого зажмите Ctrl и кликните по альфа каналу с шестерёнкой, перейдите в окошко Layers, создайте новый слой и залейте выделение чёрным цветом (с помощью Paint Bucket Tool):

урок об анимацие

14. Все остальные слои уже можно удалить, чтобы они нам не мешали (ну или хотя бы отключить).

Теперь начнём создавать эффект вращения шестерёнки. Нам нужно повернуть её так, чтобы первый зубец встал на место второго, второй на место третьего и т.д., т.е. чтобы казалось что она вращается.

Т.к. у неё 8 зубцов, то нужно повернуть её на 45 градусов. С углом определились, теперь нужно определиться с колличеством кадров.

Чтобы анимация казалась более плавной, разобъём её на 6 кадров, т.е. на каждом кадре шестерёнка будет поворачиваться на 7,5 градусов (45 / 6 = 7,5).

Делать мы это будем по такому же принципу, как и во 2м пункте: создайте новый экшен (на панели Actions), создайте копию слоя и поверните её на 7,5 градусов (используя произвольную трансформацию), остановите запись:

анимированная шестерёнка в фотошопе

15. Теперь выберите только что созданный экшен и 4 раза нажмите кнопку Play Selection (напанели Actions). Вот что мы получим:

анимированная шестерёнка в PhotoShop

Вот так будет выглядеть панель слоёв (Layers):

анимация шестерёнки

16. Отключите отображение всех слоёв, кроме первого слоя с шестерёнкой. Кликните по нижнему слою, зажмите клавишу Shift и кликните по верхнему слою, чтобы выделить все слои:

как сделать анимированный аватар

17. Разместим шестерёнки в перспективе. Для этого примените трансформацию: Edit —> Transform —> Distort, исказив фигуру следующим образом (не обязательно точно так, можно и подругому):

аватар в фотошопе

18. Начнём украшать шестерёнки. Выберите нижний слой. Зайдите в Layer Style (кликните правой клавишей по изображению слоя на панели слоёв Layers и выберите пункт Blending Options...) на вкладку Drop Shadow и настройте параметры отбрасывания тени:

анимация в PhotoShop

19. За тем перейдите на вкладку Inner Glow и там настройте внутреннее свечение:

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

20. Вкладку Bevel and Emboss настройте следующим образом:

как нарисовать анимацию

21. На вкладке Gradient Overlay настройте параметры градиента:

как сделать анимацию

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

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

Теперь жмём везде Ok и смотрим на результат проделанных операций:

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

Это же эффект нужно применить ко всем остальным слоям с шестерёнками. Для этого на панели слоёв кликните правой клавишей по слою с готовой шестерёнкой и выберите пункт Copy layer style, потом кликните правой клавишей на другой шестерёнке и выберите пункт Paste layer style, повторите это для каждого слоя с шестерёнками.

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

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

Нажмите клавишу Enter чтобы применить обрезание изображения.

23. Теперь, если вы хотите сделать аватар, уменьшите изображение до размеров 100x100 px. Делается это через меню: Image —> Image Size (или комбинацией клавиш Alt + Ctrl + I):

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

24. Вот что произойдёт после нажатия кнопки Ok:

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

25. Теперь создайте новый слой, разместите его под всеми остальными слоями и залейте любым цветом (с помощью Paint Bucket Tool):

как делать анимацию в фотошопе

26. Примените к этому слою несколько эффектов, зайдя в Layer Style. Сразу самозатенение (Inner Shadow):

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

27. За тем цветной оверлей (Color Overlay):

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

28. И обводку (Stroke):

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

Жмём Ok и вот что получаем:

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

29. Продолжим работу с фоном. Давайте на нём нарисуем ещё несколько шестерёнок, но не вручную, а используя фигуры (Shapes).

Выберите инструмент Custom Shape Tool, в качестве фигуры выберите шестерёнку (это не стандартная фигура, скачать её можно в конце урока):

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

30. Создайте новый слой и нарисуйте несколько шестерёнок различных размеров (при этом зажимая клавишу Shift):

работа в ImageReady

31. Каждая шестерёнка получилась на отдельном слое. Давайте их украсим. Будем работать с одной шестерёнкой, а потом скопируем её эффекты для каждой.

Сразу непрозрачность заливки (Fill) выставьте в 0%:

как делать анимацию в ImageReady

32. За тем зайдите в Layer Style на вкладку Outer Glow и настройте свечение:

как работать в ImageReady

33. Вкладку Color Overlay настройте следующим образом и жмите Ok:

как создать анимацию

34. Вот что у нас получилось:

анимация в ImageReady

35. Скопируйте эти эффекты и примените их для других шестерёнок (как это мы делали ранее, в пункте №21):

ImageReady и PhotoShop

36. Напишите ниже какой-нибудь текст, например, название сайта или ник и примените к нему те же эффекты:

анимация с помощью фотошопа

37. Создайте новый слой и разместите его под слоем с самой нижней вращающейся шестерёнкой (не путайте с шестерёнками, которые мы использовали в качестве фона!). Залейте этот слой любым цветом (с помощью Paint Bucket Tool), непрозрачность заливки Fill выставьте в 0% и переходите в Layer Style на вкладку Pattern Overlay (в качестве текстуры Pattern выберите такую, как показано ниже; как её сделать написано, например, вот в этом уроке):

анимация с помощью PhotoShop

После нажатия на Ok должно получиться как у меня:

анимация с помощью ImageReady

38. Теперь всё готово непосредственно для создания самой анимации. Если у вас Adobe PhotoShop CS2, то перейдите в ImageReady (для чего в меню выберите пункт File —> Edit in ImageReady), если у вас Adobe PhotoShop CS3 Extended, то откройте окошко с анимацией (Window —> Animation).

Вот как выглядит окошко редактирования в ImageReady:

как нарисовать аватар

39. На панели Animation нажмите кнопку Duplicates Current Frame чтобы создать новый кадр (точнее дубликат кадра):

аватар в фотошоп

40. Теперь отключите отображение первой шестерёнки и включите вторую:

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

Вот она:

как делают аватарки

42. Продолжайте последние операции пока не дойдёте до последней шестерёнки:

в какой программе делают аватарки

43. теперь можете нажать кнопку Play/Stop Animation чтобы просмотреть анимацию, а чтобы сохранить сделайте следующее:

Если у вас Adobe PhotoShop CS2, то в меню выберите: File —> Save Optimized As....

Если у вас Adobe PhotoShop CS3, то в меню выберите: File —> Save for Web.

Ну вот и всё. Вот что у меня получилось:

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

Если у вас возникли какие-либо трудности, то идите на наш форум и спрашивайте. Так же там показывайте что у вас получилось — оценим и дадим советы...

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

.: Дополнительно :.

Скачать фигурку « Шестерёнка » | ZIP, 1,38 Кб

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


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

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

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