Фотошоп для фотографа 2013

Создаем анимацию загрузки аккумулятора в Фотошопе

| Категория: Уроки по созданию анимации в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим процесс создания анимаци загрузки аккумулятора для телефона.


Финальный результат

Создаем анимацию загрузки аккумулятора в Фотошопе

Приступаем к уроку Фотошопа


Шаг 1.


Открываем новый документ любого размера (естественно в приделах разумного) с разрешением не менее 300 pixels / inch (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Выбираем инструмент Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") в режиме Shape (Фигуры) цвета #000000 и радиусом скругления края 2 pix и делаем боковую часть батарейки: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 2.


Затем в центральной части фигуры, инструментом Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") добавляем два узла: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 3.


Выберите эти два узла инструментом Direct Selection Tool (Редактирование контура) с зажатой клавишей Shift и перемещаете в лево стрелочками на клавиатуре до желаемого результата: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 4.


Затем в верхней и нижней частях инструментом Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") удаляем узлы, как показано на скрине ниже, а 2-а других перемещаем вверх: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 5.


Применим следующие стили слоя - Blending Options (Параметры наложения): ↓


Gradient Overlay (Наложение градиента): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Параметры градиента: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Stroke (Обводка): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 6.


Выбираем инструмент Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") в режиме Shape (Фигура) цвета #333333 и делаем внутреннюю часть батарейки, после чего устанавливаем слою Opacity (Непрозрачность) = 50%: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 7.


Применим те же стили слоя, что и к боковой части скопировав (Copy Layer Style / Скопировать стиль слоя) или перемещения пиктограммы Indicates Layer Effects (Включить эффект слоя) Создаем анимацию загрузки аккумулятора в Фотошопе с зажатой клавишей Alt со слоя боковой части батарейки на данный слой: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 8.


Опять выбираем инструмент Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") в режиме Shape (Фигур), но на этот раз цвета #dddddd и делаем ежё одно внутреннюю часть батарейки: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 9.


Выбираем все три слоя в палитре слоёв с зажатой клавишей Shift и копируем их. Переходим в меню Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали) и инструментом Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V") перемещаем вправо до желаемого размера Вашей батарейки: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 10.


Затем сделаем «плюсовой контакт». Выбираем инструмент Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") в режиме Shape (Фигура) цвета #000000 и радиусом скругления края 5 pix: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 11.


После чего применяем те же стили слоя что и для боковой части батарейки: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 12.


Теперь будем делать стеклянную часть. Выбираем инструмент Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) в режиме Shape (Фигура) цвета #dddddd и задайте слою Fill (Заливка) = 10%: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 13.


Добавим бликов на стеклянную поверхность в соответствии с бликами на боковых частях. Выбираем инструмент Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) в режиме Shape (Фигура) цвета #ffffff делаем блик и задаём слою Opacity (Непрозрачность) = 30%: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 14.


Применим следующие стили слоя - Blending Options (Параметры наложения): ↓


Gradient Overlay (Наложение градиента): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Параметры градиента: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Текущий результат: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 15.


Тем же способом сделайте блики и на остальных частях стеклянной поверхности. У меня получилось так: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 16.


Собственно батарея уже готова осталось сделать индикатор загрузки. Создаём новую группу. Выбираем инструмент Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) в режиме Shape (Фигура) цвета #ff0000 и делаем первый индикатор: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 17.


Чтоб он не казался плоским - применим следующие стили слоя: ↓


Gradient Overlay (Наложение градиента): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Параметры градиента: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Параметры градиента: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Stroke (Обводка)

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 18.


Затем добавим некоторых деталей. Тот же инструмент Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) в режиме Shape (Фигур) цвета #ff0000 и делаем полоски, как показано на скрине ниже (в результате у Вас получится 2-а слоя). Наклоните один из углов – по очереди на верхней и нижней полосках путём выбора инструментом Direct Selection Tool (Редактирование контура) и перемещения в нужное место один из узлов. После чего задайте слоям с полосками Fill (Заливка) = 70% (можно этого не делать - я сделал для наглядности чтоб части отличались по цвету): ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 19.


Применим к обои слоям следующие стили слоя - Blending Options (Параметры наложения): ↓


Gradient Overlay (Наложение градиента): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Параметры градиента: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Текущий результат: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 20.


Добавим ещё несколько деталей к индикатору. Опять инструмент Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) в режиме Shape (Фигур) на этот раз белого цвета и делаем полоски, как показано на скрине ниже. Углы наклона делаете так же, как и в шаге выше: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 21.


Применим к этим частям (слоям) следующие стили слоя - Blending Options (Параметры наложения): ↓


Gradient Overlay (Наложение градиента): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Параметры градиента: ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 22.


Теперь сделаем внутреннюю часть индикатора. Выбираем инструмент Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") в режиме Shape (Фигур) цвета #520101 и делаем внутреннюю часть: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 23.


Применим следующий стиль слоя - Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 24.


Я переместил индикатор на передней план, чтоб было отчётливо видно. Теперь мы перемещаем его в палитре слоёв так, чтоб он находился «за стеклом» и копируем группу несколько раз и перемещаем индикаторы так, чтоб они стояли в ряд друг за дружкой: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 25.


Чтоб индикаторы небыли одинаковыми я их сделал тремя цветами – фазами загрузки батареи тем же самым способом, только изменяя цвет слоёв в настройках стилей слоя. Здесь можете фантазировать как Вам угодно. В результате у меня получилось так: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 26.


Добавим процентное содержание зарядки батареи. Для этого вспомним математику, подсчитаем сколько у нас индикаторов и разделим на 100 (100-это 100% зарядки батареи) в итоге получим процентное содержание зарядки батареи на одном индикаторе. В моём случае это цифра 7 (Но есть один момент, желательно, чтоб у Вас было 50% зарядки даже если ваша цифра не кратная 50-ти). А далее на каждом новом слоё вписываете инструментом Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T") числа.


Чтоб число не смотрелось одиноким, добавьте обычную тень из стилей слоя - Blending Options (Параметры наложения): ↓


Drop Shadow (Тень): ↓

Создаем анимацию загрузки аккумулятора в Фотошопе

Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 27.


Ну что ж всё готово чтоб сделать анимацию. Здесь уж всё просто и опять же всё зависит от вашей фантазии.


На первом кадре устанавливаете пустую батарею с нулевой зарядкой (0%), делаем новый кадр на нём устанавливаете (включаете видимым в палитре слоём) первый индикатор и процентное содержание зарядки для данного индикатора и так далее. После чего выбираете все кадры и устанавливаете время через сколько будут изменятся кадра, я установил одну секунду: ↓


Создаем анимацию загрузки аккумулятора в Фотошопе

Шаг 28.


После того, как Вы заполните всё батарею сохраняем анимацию через File (Файл) > Save for Web (Сохранить для Web...) или через сочетание клавиш Alt+Ctrl+Shift+S и выбираете Gif формат.


Всё анимация готова: ↓


Финальный результат

Создаем анимацию загрузки аккумулятора в Фотошопе

Альтернативный результат

Создаем анимацию загрузки аккумулятора в Фотошопе

Автор: 2 Fingers;

Текст доработан командой сайта PhotoshopPro.ru