Меню сайта
Форма входа
Уроки Photoshop
Эффекты
Анимация
Текст
Работа с фото
Web-дизайн
Поиск







Вторник, 14.01.2025, 14:21ГлавнаяРегистрацияВход
Best Photoshop
Приветствую Вас Гость |
Главная » 2011 » Февраль » 24 » Создаем анимированные смайлики
17:28
Создаем анимированные смайлики
В этом уроке описан процесс создания анимированных смайликов, которые могут использоваться на форумах, в качестве аватара и т.п.
                  
Часть 1. Создание общего рисунка.

Шаг 1.
Создайте новый файл размером 50 на 50 px, с RGB Colour и прозрачным задним слоем. Назовите слой Outline (Внешняя обводка).
Выберите цвет #565656.
Приблизьте картинку на 1600%. Возьмите Pencil tool  (размером 1px) и сделайте горизонтальную линию длиной 5px. Далее опуститесь вниз и сдвиньтесь на 1px вправо. Нарисуйте линию длиной 2px. Сделайте всё, как показано на рисунке:



Шаг 2.
Создайте новый слой. Назовите его Fill (заливка). Сейчас мы должны приступить к окрашиванию. 
Возьмите цвет #A1A1A1 и закрасьте им те точки,которые показаны на рисунке:



Далее возьмите цвет #AEAEAE и повторите тоже самое:



Потом по очереди #C2C2C2:



#D2D2D2:



#D8D8D8:



#DEDEDE:



#E7E7E7:



#F0F0F0:



Шаг 3.
Создайте новый слой и назовите его Left hand (левая рука).
Возьмите цвет #565656 и нарисуйте им горизонтальную линию размером 2px. Проделайте всё так, как показано ниже:



На том же самом слое закрасьте верхний левый угол цветом #E7E7E7. Затем #D2D2D2 для верхнего правого угла и нижнего левого. Цвет #AEAEAE для нижнего правого угла:



Продублируйте слой Left hand и назовите его Right hand (Правая рука). Используйте Move Tool (V) и переместите слой на правую сторону:



Объедините слои Outline и Fill. Назовите новый слой Body (Тело):



Шаг 5.
Создайте слой-папку Exp​ressions (Выражения лица). Для нашего рисунка существует два выражения лица: открытые глаза и закрытые глаза.
Создайте в папке слой Open eyes (Открытые глаза) и на этом фоне цветом #565656 нарисуйте глаза, как показано на рисунке (3px в высоту и 2px между глазами):



В этой же папке создайте слой Closed eyes (Закрытые глаза). Спрячьте слой Open eyes и нарисуйте цветом #565656 горизонтальную линию размером 6px:



Шаг 6.
Если вы хотите поменять цвет,то зайдите в Layer > New Adjustment Layer > Hue/Saturation (Ctrl, U). Пометьте Colorize и поменяйте Hue and Saturation. Сохраните:



Далее проделайте тоже самое с другими слоями,нажимая на кнопку Load:




Часть 2. Анимация.

Шаг 7.
Переходите в Adobe Image Ready (Ctrl, Shift, M). 
(анимация в ФШ CS3 и выше: Window>Animation)

Шаг 8.
Если вы хотите сделать нормальную анимацию, например просто движение руки, добавляйте по 1px всё время:



Тоже самое можно сделать с глазами, телом и т.д.
Если хотите быстрее, добавляйте больше, чем 1px.

Шаг 9.
Убедитесь, что вы сделали нашему смайлу мигающие глаза. Для этого нужно сначала сделать видимым слой Open eyes, а потом Closed eyes. Должно получиться примерно так:



Шаг 10.
Чтобы заставить наш смайл двигаться, не стоит делать его просто скользящим: это выглядит не слишком реалистично.
Заставьте смайл "прыгать" вверх на 1px. Пусть в то же время он двигается вперёд на 1px.
Продолжайте до того, пока не захотите его остановить:



Шаг 11.
Теперь для закрепления материала попробуйте сделать своего смайла со его собственными эмоциями и действиями. Например:

Категория: Анимация | Просмотров: 2500 | Добавил: Zander94 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Copyright MyCorp © 2025