Делаем анимированный аватар - Уроки - Уроки в Photoshop'е - Каталог статей и материалов

Очень часто нахожу вопросы "Как создать анимированный автар?", поэтому в этом уроке мы научимся их делать, это на много проще, чем Вы могли себе представить. Задействуем Adobe Photoshop и Image Ready, не волнуйтесь, он у Вас есть :) Я покажу на примере эффекта падающего снега, сделаев его, у Вас не вызовет никаких затруднений сделать любую другую автару :)

1. Возьмем фон для аватарки, размером 100х100px, как его сделать надеюсь рассказывать не надо? :) У меня вот такой пингвиненок:

Далее рисуем "снежинки", лишние вытираем ластиком, должно получиться вот так:

3. Теперь создадим еще один слой для маленьких снежинок, изменим диаметр кисти, например до 4px и нарисуем более мелкие:

4. Черный слой нам больше не пондобится, снежинки расположены как нам надо, поэтому можем его удалить.

5. Теперь увеличим размер холста, идем Image > Canvas Size (Alt+Ctrl+C) и увеличим холст по высоте в 3 раза, т.е. если у нас была картинка 100px, то будет 300px и обратите внимание, чтобы ваша картинка при увеличении осталась внизу, смотрите на скриншоте:

Должно получиться вот так (цвет холста не имеет значения, но лучше темный):

6. Перейдите на слой с большими снежинками и скопируйте его. Теперь переместим его на 100px вверх, это легко сделать выбрав инструмент Move Tool

и удерживая клавишу Shift нажать по клавише стрелки вверх на клавиатуре 10 раз. Переместили? Теперь сливаем эти 2 слоя в один.

7. Теперь копируем слой с маленькими снежинками, перемещаем на 100px вверх, снова копируем уже копию и перемещаем еще на 100px вверх. Затем сливаем все 3 слоя с маленькими снежинками в 1 (жмем 2 раза Ctrl+E).

8. Теперь снова меняем размер холста, идем Image > Canvas size (Alt+Ctrl+C) и задаем размер по высоте прежний, т.е. 100px, жмем Ок, если появилось окошко с предупреждением жмем Proceed. Вот так должна выглядеть наша аватарка:

9. Переведем ее в Adobe ImageReady для создания анимации. Жмем на кнопочку в Adob Photoshop на панели инструментов:

10. Теперь мы находимся в ImageReady и нам понадобится вкладка Animation, если у Вас ее нет на экране, то зайдите в меню Window > Animation, появится снизу прямоугольное окошко с первым кадром. Скопируйте его:

11. Оставайтесь на 2м кадре, нам нужно будет передвинуть снежинки в их конечное положение. Т.е. находим на палитре слоев (она идентична той, что в photoshop) слой с большими снежинками и снова берем инструмент Move Tool и перемещаем слой на 100px вниз (зажав Shift нажимаем по стрелке вниз на клавиатуре 10 раз). Затем переходим на слой с маленькими снежинками и передвигаем слой на 200px вниз ( Shift+стрелка вниз 20 раз).

12. Отсаемся на 2м кадре, находим на панели Animations кнопку Tween:

и выставляем такие значения:

Количество фреймов (кадров) можете по желанию выстваить больше или меньше, но учтите, что чем больше кадров будет, тем больше вес аватарки. У Вас должно было теперь получиться всего 17 фремйов, учитывая первый и последний, удалите последний №17, т.к. первый и последний кадры у нас одинаковые, и если мы его не удалим, в анимации на этом месте образуеися задержка. Значек изображения корзинки находим без труда :)

13. Теперь зададим задержку, с которой программа должна менять кадры, Вы можете поставить значение больше, я взяла 0,1sec. Для этого выбираем все фреймы (кадры) на панели Animations, делаем клик под изображением, там где указано время в секундах правой кнопкой мыши, появится выпадающее меню и там выбираем нужную величину:

14. Теперь можем просмотреть наш ролик в действии, нажав на кнопку Play на панели Animations. Если все получилось, сохраняем рузльтат File > Save Optimized As... в формате .gif. Вот и все! Не сложно правда? :)