Как сделать анимированную аватарку в фотошопе
Аватар - это важный атрибут для пользователя форума или онлайн-игры. А если этот самый аватар будет анимационным и, самое главное, оригинальным, то престиж пользователя форума, естественно, увеличивается.
В конце статьи имеется видео, выполненное по материалам урока в Adode Photoshop CS6. Также, для лучшего понимания урока, по ссылкам в конце статьи Вы можете скачать файл PSD по созданию анимационного аватара.
Ознакомившись с этим уроком по анимации, Вы без особого труда создадите собственный аватар, в котором изображение постепенно проявляется из белого фона.
Сейчас мы создадим анимационный аватар, в котором изображение постепенно появляется из белого фона. Посмотрите готовый результат:
Итак, открываем в 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 и устройств.
Видеоурок по анимации аватара:
Решил написать этот урок у себя в блоге и продублировать тут в связи с частыми просьбами друзей нарисовать юзербар на форум. Надеюсь урок окажется полезным хабросообществу.
В этом уроке мы рассмотрим приемы создания анимациии в фотошопе на примере юзербара.
Итак, приступим!
Сразу скажу, что урок ориентирован на новичков. Гуру фотошопа могут постоять, покурить и посмотреть мельком (а вдруг пропустили чего интересного =))
Часть 1. Создание юзербара
Для начала необходимо создать заготовку для создания анимации.
Шаг 1. Создание документа
Создаем новый документ. Я взял размеры 350х20.
Шаг 2. Градиент.
Берем Gradient Tool (G) и заливаем градиентом наш будущий юзербар.
Результат:
Шаг 3. Текстура
Далее я решил добавить нашему юзербару текстуру.
Рисуем текстуру карбона
Для этого нарисуем текстуру карбона которую мы сможем использовать в дальнейшем.
Создаем новый документ размером 8х8 пикселей и закрашиваем его следующим образом. Можно брать произвольные оттенки серого. Главное здесь — порядок.
Далее идем в Bleding Options слоя с юзербаром.
Результат:
Шаг 4. Текст.
Осталось добавить текст. Для этого нам понадобится шрифт Visitor.
Берем Visitor TT1 BRK устанавливаем размер в 10 пунктов. Я написал “Adobe Photoshop CS4 User”.
Шаг 5. Рамка.
Добавим рамку. Для этого выделим весь юзербар с помощью Rectangular Marquee Tool. Заходим в Edit -> Stroke и ставим там:
Результат:
Часть 2. Анимация юзербара в фотошопе
Шаг 1. Добавление иконки к анимации.
Теперь добавим иконку и перейдем к анимации.
Я добавил классическую иконку четвертого фотошопа и провел масштабирование.
Шаг 2. Разбираемся с палитрой анимации.
Заставим ее двигаться.
Для это настроим сначала наше рабочее место выбрав Window > Workspace > Video или просто включив палитру Animation.
Перейдем в режим покадровой анимации.
Разберемся с палитрой анимации.
Шаг 3. Анимируем юзербар.
Что дальше? Теперь я выделяю слой с иконкой и двигаю ее немного вверх, после этого создаю новый кадр (смотри шаг 2). И повторяю пока не прокрутится вся иконка. Это основной принцип создания анимации в фотошопе.
При ошибках вы можете удалить не понравившийся кадр кнопкой удаления (корзина).
Также выставим нужную задержку. Я поставил 0,1 секунду на все кадры кроме последнего. У него стоит задержка 2 секунды.
Шаг 4. Сохранение в Gif – анимацию.
Когда анимация готова мы должны сохранить ее. Выбираем File > Save for Web & Devices… (Alt+Shift+Ctrl+S). Выбираем формат файла GIF.
Заключение
Итак, мы создали стильный юзербар. Затем на основе него мы создали gif – анимацию. И все это средствами великого и могучего фотошопа. Не правда ли круто?
Большинство пользователей привыкли воспринимать Adobe Photoshop как программу, в которой можно редактировать изображения или рисовать статичные картинки. Однако с помощью этого редактора можно делать и анимацию. В этом материале мы расскажем, как создать GIF-анимацию двумя максимально простыми способами.
Покадровая анимация
Покадровая анимация — один из самых легких способов работы с анимацией в Photoshop . Однако стоит быть готовыми к тому, что этот несложный процесс окажется довольно долгим и трудоемким.
Для начала нужно создать новый документ, а затем зайти в меню Window («Окно») и установить галочку напротив пункта Timeline («Шкала времени») . После этого появится окошко, напоминающее видеоредактор. В нем будут отображены все слои, которые на данный момент открыты в документе.
Далее нужно кликнуть на кнопку Create Video Timeline («Создать шкалу времени для видео») , перейти в меню Layers («Слои») , выбрать пункт Video Layers («Слои видео») и создать пустой видеослой.
Теперь ваша задача — нарисовать анимацию покадрово. Это можно делать с нуля либо рисовать поверх готовой картинки, открытой в отдельном слое.
Берем кисть и создаем первый кадр анимации. Далее передвигаем ползунок времени и рисуем содержимое следующего кадра. Чтобы видеть свои действия на предыдущем этапе, нужно кликнуть по меню в правом верхнем углу и выбрать Enable Onion Skins («Перейти в режим кальки») .
Из таких простых, но монотонных действий состоит процесс создания покадровой анимации: шаг за шагом вы должны добавлять очередной элемент будущей движущейся картинки. В данном случае в каждом новом кадре мы рисуем цветной кружок.
Чтобы сделать плавную анимацию, поделите изображение на максимально короткие отрезки. Скорость каждого кадра можно изменить, кликнув по нему правой кнопкой мыши.
Когда основная работа будет закончена, можно поработать над эффектами. Например, добавить на шкалу времени слой с надписью или картинкой. Если понадобится изменить цвет анимации, делайте это так же, как у обычных слоев. Дважды кликните по слою, выберите команду Color Overlay («Наложение цвета»), возьмите нужный цвет, скопируйте стиль слоя и вклейте его на все остальные слои.
В конце нужно сохранить полученную анимацию как видео. Для этого перейдите в меню File («Файл») → Export («Экспортировать») → Render Video («Экспорт видео»). Если нужен формат GIF, выбираем пункт Save for Web («Сохранить для Web»). В открывшемся окошке можно поменять настройки, а затем нажать Save («Сохранить»).
Анимация при помощи «Марионеточной деформации»
GIF-анимацию в Photoshop можно создавать при помощи инструмента Puppet Warp («Марионеточная деформация») . Этот способ гораздо быстрей, чем рисовать анимацию вручную. Вы можете просто взять фотографию или картинку в формате PNG из интернета или личных архивов. Главное — проследить, чтобы у изображения не было фона. Если он все-таки есть, объект придется вырезать.
Итак, откройте изображение в Photoshop и перейдите в панель слоев. Кликните правой кнопкой мыши по созданному нулевому слою и преобразуйте его в смарт-объект. Если собираетесь использовать какие-то эффекты, например, тень или обводку, — примените их с самого первого кадра. Это будет гораздо проще и быстрее, чем позже добавлять что-то на все созданные слои. Далее в том же меню кликните Duplicate Layer («Создать дубликат слоя»).
Потом жмем на меню Edit («Редактирование») и выбираем пункт «Марионеточная деформация». В этот момент картинка покроется сеткой, состоящей из треугольников, а значок курсора превратится в кнопку.
Перед тем, как оживить нашу картинку, нужно «приколоть» ее с помощью кнопок и оставить свободной только те части, которые будут двигаться на GIF-анимации.
Теперь начинается самое интересное: левой кнопкой мыши зажимаем ту часть картинки, которая должна находиться в движении, и слегка тянем в нужную сторону. Затем отпускаем мышь и жмем Enter.
Чтобы анимация была плавной и реалистичной, придется двигать картинку постепенно. Для этого нужно несколько раз повторить весь процесс: копируем слой → двигаем изображение → жмем Enter. В нашем случае понадобилось создать 14 слоев, чтобы «поднять» ухо персонажа и вернуть его в исходное положение.
После того, как вы закончили двигать картинку, нужно выделить все слои, кликнуть по ним правой кнопкой мыши и нажать Rasterize («Растрировать слой») .
Далее начинается работа со «Шкалой времени». Кликаем на Create Frame Animation («Создать анимацию кадра»), переходим в меню, расположенное в правом верхнем углу, и выбираем команду Make Frames From Layers («Создать кадры из слоев»).
Итак, все слои собраны на одной шкале. Если щелкать по ним поочередно, можно увидеть, как картинка движется по заданной траектории. Далее нужно установить время для каждого движения и способ воспроизведения (однократно, постоянно или несколько раз). Можете выбрать из предложенных вариантов или добавить свои параметры. Чтобы посмотреть, как все работает, жмем кнопку воспроизведения.
Если все устраивает — сохраняем нашу анимацию в формате GIF. Для этого в меню «Файл» выбираем пункт «Сохранить для Web».
Теперь вы умеете делать анимацию в Photoshop двумя простыми и доступными способами. Их можно применять при создании баннеров или логотипов, которые помогут украсить любую веб-страницу и сделать ее более запоминающейся.
Если вы всерьез заинтересовались анимацией и дизайном — присмотритесь к профессии веб-дизайнера. Освоив ее, вы будете на профессиональном уровне создавать анимацию для сайтов и приложений, а при желании сможете углубить знания и получить специализацию моушн-дизайнера. Сделать первый шаг к интересной и востребованной профессии поможет курс «Веб-дизайн с 0 до PRO» от Skillbox.
Читайте также: