 |
| ||||||||
|
|
|
|
|
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
| Главная » Файлы » уроки Photoshop » Анимация |
Анимация загрузки аккумулятора для телефона
| 16.12.2010, 22:41 | |
Привет всем, вот решил написать очередной урок. Урок очень прост – никаких фильтров только стандартные, примитивные инструменты, стили слоя и немного Вашего терпения и трудолюбия. На это раз мы будем делать анимацию в виде заполнения зарядки аккумулятора или батарейки, как кому угодно. При внимательном чтении и конечно же при подключении Вашей фантазии, в итоге Вы можете получить вот такие батарейки:   Ну что, приступим... Шаг 1. Открываем новый документ любого размера (естественно в приделах разумного) с разрешением не менее 300 pixels / inch. Выбираем инструмент Rounded Rectangle Tool [U] в режиме Shape цвета #000000 и радиусом скругления края 2 pix и делаем боковую часть батарейки:   Шаг 2. Затем в центральной части фигуры, инструментом Pen Tool [P] добавляем два узла:   Шаг 3. Выберите эти два узла инструментом Direct Selection Tool [A] с зажатой клавишей Shift и перемещаете в лево стрелочками на клавиатуре до желаемого результата:  Шаг 4. Затем в верхней и нижней частях инструментом Pen Tool [P] удаляем узлы, как показано на скрине ниже, а 2-а других перемещаем вверх:  Шаг 5. Применим следующие стили слоя:     Шаг 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. Применим следующие стили слоя:    Шаг 15. Тем же способом сделайте блики и на остальных частях стеклянной поверхности. У меня получилось так:  Шаг 16. Собственно батарея уже готова осталось сделать индикатор загрузки. Создаём новую группу. Выбираем инструмент Rectangle Tool [U] в режиме Shape цвета #ff0000 и делаем первый индикатор:  Шаг 17. Чтоб он не казался плоским - применим следующие стили слоя:     Шаг 18. Затем добавим некоторых деталей. Тот же инструмент Rectangle Tool [U] в режиме Shape цвета #ff0000 и делаем полоски, как показано на скрине ниже (в результате у Вас получится 2-а слоя). Наклоните один из углов – по очереди на верхней и нижней полосках путём выбора инструментом Direct Selection Tool [A] и перемещения в нужное место один из узлов. После чего задайте слоям с полосками Fill=70% (можно этого не делать - я сделал для наглядности чтоб части отличались по цвету):  Шаг 19. Применим к обои слоям следующие стили слоя:    Шаг 20. Добавим ещё несколько деталей к индикатору. Опять инструмент Rectangle Tool [U] в режиме Shape на этот раз белого цвета и делаем полоски, как показано на скрине ниже. Углы наклона делаете так же, как и в шаге выше:  Шаг 21. Применим к этим частям (слоям) следующие стили слоя:    Шаг 22. Теперь сделаем внутреннюю часть индикатора. Выбираем инструмент Ellipse Tool [U] в режиме Shape цвета #520101 и делаем внутреннюю часть:  Шаг 23. Применим следующий стиль слоя:   Шаг 24. Я переместил индикатор на передней план, чтоб было отчётливо видно. Теперь мы перемещаем его в палитре слоёв так, чтоб он находился «за стеклом» и копируем группу несколько раз и перемещаем индикаторы так, чтоб они стояли в ряд друг за дружкой:  Шаг 25. Чтоб индикаторы небыли одинаковыми я их сделал тремя цветами – фазами загрузки батареи тем же самым способом, только изменяя цвет слоёв в настройках стилей слоя. Здесь можете фантазировать как Вам угодно. В результате у меня получилось так:   Шаг 26. Добавим процентное содержание зарядки батареи. Для этого вспомним математику, подсчитаем сколько у нас индикаторов и разделим на 100 (100-это 100% зарядки батареи) в итоге получим процентное содержание зарядки батареи на одном индикаторе. В моём случае это цифра 7 (Но есть один момент, желательно, чтоб у Вас было 50% зарядки даже если ваша цифра не кратная 50-ти). А далее на каждом новом слоё вписываете инструментом Horizontal Text Tool [T] числа. Чтоб число не смотрелось одиноким, добавьте обычную тень из стилей слоя:   Шаг 27. Ну что ж всё готово чтоб сделать анимацию. Здесь уж всё просто и опять же всё зависит от вашей фантазии. На первом кадре устанавливаете пустую батарею с нулевой зарядкой (0%), делаем новый кадр на нём устанавливаете (включаете видимым в палитре слоём) первый индикатор и процентное содержание зарядки для данного индикатора и так далее. После чего выбираете все кадры и устанавливаете время через сколько будут изменятся кадра, я установил одну секунду:  Шаг 28. После того, как Вы заполните всё батарею сохраняем анимацию через File>Save For Web & Devices или через сочетание клавиш Alt+Ctrl+Shift+S и выбираете Gif формат. Всё анимация готова: Экспериментируйте... | |
| Просмотров: 1253 | Загрузок: 0 | Рейтинг: 0.0/0 | |
| Всего комментариев: 0 | |
|
|
|
|
|
|
|