Всем привет! Сегодня я расскажу, как из обычной картинки создать анимированную аватарку.

Выберите картинку, из которой хотите сделать аватар. Я взяла вот такого миленького котенка и сейчас его буду делать ещё милее.

Открываем картинку в фотошопе.Примеры привожу на Фотошопе CS5 (портативная русская версия.)
Нажимаем на инструмент кроп (кадрирование.) Вверху выводим значения в пикселях размер аватара, какой вы хотите создать. Я создам задам параметры 150 px и 150 px. Берем инструментом кадрирование тянем по картинке в том месте, где хотим создать аватар.

Смотрим, что получилось: поля, которые в будущем отрежутся и станут темнее. Если нас все устраивает, нажимаем клавишу Ввод или щелкаем по картинке и заготовка нужного нам размера готова. Если – нет, то идем Редактирование – Шаг назад и делаем кадрирование заново.
В последних версиях фотошопа шаг назад делать не обязательно при неудачном кадрировании, так как имеется возможность перемещать  картинку внутри кадрирования.

Отложим нашу полученную заготовку и поищем украшение для котенка, например цветок.
Но чтобы его не вырезать из картинки, как это делать я расскажу как-нибудь потом, мы берем готовый цветок в формате png на прозрачном фоне. Набираем в поисковике – цветы клипарт png и можно найти кучу подходящих для вас цветочков. Вот я нашла такой.

Переносим его в поле фотошопа и, естественно он не подходит по размеру. Перетаскиваем его прямо на нашего котенка инструментом Перемещение и подгоняем при помощи трансформации – Редактирование – Свободное трансформирование.

Должно быть так.

Теперь идем в панель слоев и копируем наш цветок, Наведите на слой с цветком и правой клавишей мыши — Создать дубликат слоя, либо перетащить этот слой с цветком на квадратик с загнутым уголком внизу панели слоев. Отключаем глазик в панели слоев, чтобы нам не мешала предыдущая копия цветка, выделяем второй цветок, нажав на слой в панели слоев. Идем — Редактирование Свободная трансформация — поворачиваем инструментом трансформация (по часовой стрелке или наоборот, как удобно), зажав клавишу Shift, чтобы цветок не трансформировался, как попало, мы как бы фиксируем его пропорции.

Поворачиваем буквально на угол квадрата инструмента трансформация. Поставили как надо, нажали клавишу Ввод. Опять копируем, отключаем предыдущий слой и трансформируем опять на величину угла следующую копию цветка. Всего четыре угла, значит будет четыре цветка — копии в панели слоев, но под разными углами. (Или приблизительно)
Цветок на первый раз старайтесь брать правильной формы, чтобы излишне не подгонять, хотя это не сложно, инструментом перемещение можно передвигать вручную, а можно по пикселям вверх, вниз, вправо, влево клавишами-стрелками на клавиатуре, так будет точнее.

Теперь отключите все цветы – уберите глазики с панели слоев. Оставьте только на заготовке. Котенок должен быть без цветка. Всего у вас должно быть пять слоев. У меня первый слой – фон, затем идут четыре слоя цветка.
Идем в панель анимации ( если её нет, вверху в панели настроек её можно включить в разделе Окно.) Нажимаем на квадратик четыре раза, и получается четыре кадра. Выделяем первый и включаем глазик на первом цветке – фон с котенком не трогаем.

Затем переходим на второй кадр, отключаем предыдущий цветок в панели слоев, включаем второй цветок.

Затем идем на третий кадр – глазики включены — котенок и третий цветок.

И затем четвертый кадр делаем аналогично – первый и последний слой (котенок и последний цветок).
Далее включаем анимацию и смотрим что получилось. Если кажется, что очень быстро, то можно поставить время.

Так же ставим повторение кадров, чтобы анимация картинки была постоянной.

Можно сделать котенка немного гламурнее, добавив яркость и контрастность. Идем в панель Окно – коррекция, включается панелька – создать новый корректирующий слой.

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

Кому не нужно, могут этот пункт пропустить.
Теперь нам нужно сохранить анимацию. Идем Файл – Сохранить для Web и устройств.

Открывается окно. Делаем в нем примерные настройки как на скриншоте, проверяем анимацию – включаем её внизу окна.

Иногда скорость анимация не совпадает со скоростью интернета, потом можно её будет перед закачкой аватара на форум, кинуть её просто в поле браузера и она отобразит реальную скорость анимации. Вписываем имя файла, например, котенок, сохранить и сохраняем на рабочий стол. Аватар готов!

Урок расписан до мелочей. Кому не понятно – задавайте вопросы.
Удачи в освоении фотошопа!

(8 голосов, средний: 5,00 из 5)

Загрузка...