Создание красивой анимации аватара в Photoshop

Аватар - это важный атрибут для пользователя форума или онлайн-игры. А если этот самый аватар будет анимационным и, самое главное, оригинальным, то престиж пользователя форума, естественно, увеличивается.

В конце статьи имеется видео, выполненное по материалам урока в Adode Photoshop CS6. Также, для лучшего понимания урока, по ссылкам в конце статьи Вы можете скачать файл PSD по созданию анимационного аватара.

Ознакомившись с этим уроком по анимации, Вы без особого труда создадите собственный аватар, в котором изображение постепенно проявляется из белого фона.

Сейчас мы создадим анимационный аватар, в котором изображение постепенно появляется из белого фона. Посмотрите готовый результат:

Создание красивой анимации аватара в Photoshop

Итак, открываем в Photoshop изображение, из которого мы хотим сделать анимацию. Само появление изображения мы будем осуществлять с помощью инструмента "Узорный штамп" (Pattern Stamp Tool), поэтому, определим всё изображение, как узор. Идём по вкладке главного меню Редактирование --> Определить узор(Edit --> Define Pattern), в открывшемся окне вводим какое-нибудь имя, хотя можно оставить дефолтное, жмём ОК.

На панели инструментов выбираем "Узорный штамп", вверху рабочего окна программы, на инструментальной панели, кликаем по кнопке открытия палитры узоров и выбираем наш новый узор. Не забываем поставить галку у опции "Выравнивание" !

выбор узора для аватара

Теперь создадим кисть, с помощью которой мы будем создавать узор.

Чтобы создать кисть, нам потребуется новый слой. Создаём новый слой нажатием на комбинацию клавиш Ctrl+Shift+N, затем отключаем видимость слоя с изображением. Сейчас должен быть активен новый пустой слой. Инструментом "Прямоугольное выделение" (Recangular Marquee Tool) создаём выделенную область размером примерно 8 на 80 пикселей (размеры не важны, важны пропорции) и заливаем выделение чёрным цветом, нажав клавишу D, затем Alt+Delete

Создание кисти из выделения

Теперь нам необходимо сохранить выделение, как кисть. Идём во вкладку Редактирование --> Определить кисть (Edit --> Define Brush Preset), в открывшемся окне нажимаем ОК.

Вновь берём инструмент "Узорный штамп". Теперь нам необходимо уточнить настройки кисти штампа, для чего нажимаем на кнопку:

выбор палитры кистей узорного штампа

Открывается обычная палитра настройки кистей.
Сначала вводим параметры отпечатка кисти:

настройка отпечатка кисти

Затем настройки рассеивания кисти:

настройка рассеивания отпечатков кисти

А теперь анимация!

Вначале, подготовка слоёв анимации.

Слой, где мы создавали прямоугольное выделение, заливаем белым цветом, нажав Ctrl+Delete, перед этим не забудьте снять выделение, нажав Ctrl+D. Это будет фон нашей анимации.

Затем создаём новый слой, нажав на иконку создания нового слоя внизу панели слоёв, или же можно нажать комбинацию клавиш Ctrl+Shift+N. Это будет наш второй кадр анимации. Наносим на него первые штрихи узорным штампом, должно получиться примерно вот так:

начало анимации аватара

Создаём новый слой. Рисуем штампом ещё фрагменты:

добавление штрихов

Я повторил действие по созданию слоя и рисованию на нём штампом несколько раз, восемь раз, пока не получилось такое изображение:

добавление штрихов узорным штампом

Теперь изменим настройки кисти штампа.
Сейчас следует уменьшить параметр "Рассеивание" примерно до 120%.

Опять создаю несколько новых слоёв, рисую в них кистью.

Теперь снова стоит изменить параметры настройки кисти, на этот раз в разделе "Форма отпечатка кисти" уменьшаю значение "Интервалов" примерно до 170-ти процентов. И снова повторяю действия по созданию слоёв и рисованию, пока изображение в документе не станет почти собранным:

последний слой анимации

Теперь начнём анимировать аватар. Отключаем видимость всех слоёв, за исключением белого фона. Открываем панель анимации Окно --> Анимация (Window --> Animation) или Окно --> Шкала времени (Window --> Timeline) в версии Photoshop CS6. На первом и на данный момент единственном фрейме анимации появится белый фон. Оставляем дефолтное время показа кадр 0,5 секунды. Создаём второй фрейм анимации, кликнув по кнопке "Создание копии выделенных кадров" (Duplicates selected frames), находящуюся внизу панели анимации. У нового кадра устанавливаем время показа 0,1 сек. В панели слоёв включаем видимость первого слоя со штрихами узорного штампа, он находится сразу над белым слоем. Обратите внимание на второй кадр в панели анимации, он теперь отображает только что включённый слой на палитре слоёв.

добавление слоёв на панель анимации

Далее создаём ещё один кадр анимации и включаем видимость слоя, расположенного выше в панели слоёв. И поторяем действия по созданию кадров анимации и включению слоёв, пока на дойдём до верха палитры слоёв.

Осталось завершить появление картинки. Для этого создаём ещё один кадр на шкале анимации и отключаем видимость всех слоёв, кроме нижнего слоя с изображением. Всё.

Сохраняем файл как GIF через Файл --> Сохранить для Web и устройств.

Видеоурок по анимации аватара:

Скачать файл PDS, выполненный по материалам урока:

Теги:

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

Преимущества: гибкие настройки. Вы можете задать в настройках, чтобы фонарик сразу включался при запуске приложения и автоматическое включение таймера при запуске приложения. Настройки позволяют отключить блокировку экрана и блокировку фонарика кнопкой включения телефона. Также вы можете самостоятельно установить время таймера.

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

простая анимация снегопада
Этот простой урок, который без проблем сможет выполнить даже начинающий пользователь Photoshop. Всё, что Вам потребуется - внимательно прочитать этот...
Оптимизация анимации файлов GIF
В этом уроке мы внимательно рассмотрим все доступные варианты для преобразования видео в GIF-анимацию, и как оптимизировать размер файла. Формат GIF...
Этот материал - продолжение статьи о создании 3D модели планеты Земля, где мы создали 3D-модель планеты, а здесь мы приступим конкретно к созданию...
Я придумал интересный способ конвертации видео в рисованный мультфильм с помощью программы Adobe Photshop, плагина Akvis Sketch и написания короткого...