Как сделать, чтобы аватарка двигалась

Как сделать, чтобы аватарка двигалась

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

Вам понадобится

  • программа Photoshop

Инструкция

1. Создайте в Photoshop документ с параметрами аватарки, которую вы собираетесь делать. Можете сделать это «горячими клавишами» Ctrl+N. Такой же результат у вас получится, если вы используете команду New («Новый»), которую можно обнаружить в меню File («Файл»). В открывшемся окне введите величину высоты и ширины в пикселях. Цвет фона выберите прозрачный. Нажмите на кнопку ОК.


2. Нарисуйте объект, который будет двигаться на аватарке. Для этого выберите инструмент Custom Shape Tool. Щелкните по треугольнику справа от надписи Shape в панели под главным меню. В открывшемся окне с полосой прокрутки выберите фигуру Left hand («Левая рука»). Установив указатель курсора на поле документа, потяните его в сторону, зажав левую кнопку мыши. У вас получилось изображение отпечатка ладони.В том же окне выберите фигуру Right hand («Правая рука»). Нарисуйте отпечаток правой ладони чуть правее и выше.

3. Слейте слои с контурами в один. Для этого щелкните по верхнему слою в палитре «Слои» правой кнопкой мыши. В контекстном меню выберите команду Merge visible («Слить видимые»). Из двух слоев с фигурами у вас получился один слой. Он будет основой для первого кадра анимации.

4. Сделайте основу для второго кадра анимации. Продублируйте слой с отпечатками ладоней, кликнув правой кнопкой мыши по этому слою и выберите команду Dublicate Layer («Дублировать слой»).Отразите слой по горизонтали. Это можно сделать при помощи команды Flip Horizontal («Отразить горизонтально») из Edit («Редактирование»).

5. Соберите кадры в анимированное изображение. Откройте палитру «Анимация», выбрав команду Animation из меню Window.Сделайте первый кадр анимации, отключив видимость второго слоя в палитре «Слои». Щелкните для этого по картинке в виде глаза слева от верхнего слоя.Сделайте второй кадр. Для этого щелкните по кнопке Duplicate Selected Frames («Дублировать выбранные кадры»). Выглядит она как лист бумаги с загнутым углом и находится в нижней части палитры «Анимация».Включите видимость второго слоя с отраженными горизонтально ладонями, отключив при этом видимость первого слоя.

6. Укажите продолжительность кадров в анимации. Для этого выделите оба кадра, зажав клавишу Ctrl. Щелкните по стрелочке рядом с числом, обозначающим продолжительность кадра, под любым кадром. В выпадающем меню выберите нужную длительность. Включив проигрывание анимации кнопкой Play, которая находится в нижней части палитры «Анимация», посмотрите на результат. Если нужно, сделайте кадры длиннее или короче.

7. Командой Save For Web («Сохранить для сети») из меню File сохраните движущуюся аватарку в формате GIF.


Image