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

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

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

  • программа Photoshop

Инструкция

  • Создайте в Photoshop документ с параметрами аватарки, которую вы собираетесь делать. Можете сделать это «горячими клавишами» Ctrl+N. Такой же результат у вас получится, если вы используете команду New («Новый»), которую можно обнаружить в меню File («Файл»). В открывшемся окне введите величину высоты и ширины в пикселях. Цвет фона выберите прозрачный. Нажмите на кнопку ОК.
  • Нарисуйте объект, который будет двигаться на аватарке. Для этого выберите инструмент Custom Shape Tool. Щелкните по треугольнику справа от надписи Shape в панели под главным меню. В открывшемся окне с полосой прокрутки выберите фигуру Left hand («Левая рука»). Установив указатель курсора на поле документа, потяните его в сторону, зажав левую кнопку мыши. У вас получилось изображение отпечатка ладони.В том же окне выберите фигуру Right hand («Правая рука»). Нарисуйте отпечаток правой ладони чуть правее и выше.
  • Слейте слои с контурами в один. Для этого щелкните по верхнему слою в палитре «Слои» правой кнопкой мыши. В контекстном меню выберите команду Merge visible («Слить видимые»). Из двух слоев с фигурами у вас получился один слой. Он будет основой для первого кадра анимации.
  • Сделайте основу для второго кадра анимации. Продублируйте слой с отпечатками ладоней, кликнув правой кнопкой мыши по этому слою и выберите команду Dublicate Layer («Дублировать слой»).Отразите слой по горизонтали. Это можно сделать при помощи команды Flip Horizontal («Отразить горизонтально») из Edit («Редактирование»).
  • Соберите кадры в анимированное изображение. Откройте палитру «Анимация», выбрав команду Animation из меню Window.Сделайте первый кадр анимации, отключив видимость второго слоя в палитре «Слои». Щелкните для этого по картинке в виде глаза слева от верхнего слоя.Сделайте второй кадр. Для этого щелкните по кнопке Duplicate Selected Frames («Дублировать выбранные кадры»). Выглядит она как лист бумаги с загнутым углом и находится в нижней части палитры «Анимация».
  • Включите видимость второго слоя с отраженными горизонтально ладонями, отключив при этом видимость первого слоя.

  • Укажите продолжительность кадров в анимации. Для этого выделите оба кадра, зажав клавишу Ctrl. Щелкните по стрелочке рядом с числом, обозначающим продолжительность кадра, под любым кадром. В выпадающем меню выберите нужную длительность. Включив проигрывание анимации кнопкой Play, которая находится в нижней части палитры «Анимация», посмотрите на результат. Если нужно, сделайте кадры длиннее или короче.
  • Командой Save For Web («Сохранить для сети») из меню File сохраните движущуюся аватарку в формате GIF.
  • Оцените статью!