ТВОИ ЛИЧНЫЕ СМАЙЛИКИ!

коллекция смайлов для вставки на форумах, в блогах, гостевых книгах и чатах

Наша кнопка
Наша кнопка

Код кнопки:

Другие кнопки и баннеры

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

Часть 1. Создание рисунка

Шаг 1

Создайте новый файл размером 50х50 px, с Mode 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 (Тело):

Шаг 4

Создайте слой-папку Expressions (Выражения лица). У нашего смайлика будет два выражения лица: открытые глаза и закрытые глаза (моргающие).

Создайте в папке слой Open eyes (Открытые глаза) и на этом фоне цветом #565656 нарисуйте глаза, как показано на рисунке (3px в высоту и 2px между глазами):

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

Шаг 5

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

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

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

Шаг 6

Перейдите в Adobe Image Ready (Ctrl, Shift, M) (анимация в Photoshop CS3 и выше: Window > Animation).

Шаг 7

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

То же самое можно сделать с глазами, телом и т. д.

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

Шаг 8

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

Шаг 9

Чтобы заставить наш смайл двигаться, не надо делать его просто скользящим: это выглядит некрасиво.

Заставьте смайл "прыгать" вверх на 1px. Пусть в то же время он двигается вперёд на 1px.

Продолжайте до тех пор, пока не захотите его остановить:

Шаг 10

Вскоре вы поймёте, что можете сделать своего смайла со своими собственными эмоциями и действиями. Например, вот такого:

Другие примеры:

 

 

Оригинальная статья (на английском языке) располагалась на (ныне несуществующем) сайте tutorialfx.com.

 

Статьи о смайлах