Создаём анимированную иконку в Фотошоп

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

Программа – Photoshop CS3 Extended и выше.

Вот три основных раздела, которые мы будем создавать.

1. Создание форм загрузчика.
2. Стилизация форм.
3. Анимация загрузчика.

Давайте начнём.

Шаг 1. Создание форм загрузчика

Начнём с создания нового документа и добавления фона.
File>New (Файл - Новый документ)
Размер – 100рх на 100рх
Дважды щёлкните по слою и преобразуйте в обычный слой.
Залейте слой тёмно-серым цветом  #3d3d3d.

Шаг 2

Просто для интереса мы добавим на наш фон узор, а затем приступим к созданию загрузчика.
Создайте новый документ 7рх на 7рх с прозрачным фоном. Выберите Pencil Tool (Карандаш) 1рх цвет чёрный и нарисуйте диагональную линию. (Щёлкните в левом верхнем углу, зажмите Shift и щёлкните в правом нижнем углу).

Далее идём в меню Edit > Define Pattern (Редактирование-Определить Узор).
Вернитесь в рабочий документ.  Стоя на фоновом слое, меню  Layer> Layer Style> Pattern Overlay (Слой-Стиль Слоя-Перекрытие Узором). В наборе узоров выберите созданный узор, уменьшите непрозрачность до 20%.

Шаг 3

Теперь нужно установить несколько маркеров.  Для этого мы будем использовать Transform Again – Shift+Ctrl+T (Повторить Трансформацию), это ускорит процесс.
Выберите инструмент Line Tool (Линия) 1 рх в режиме фигур цвет белый и с зажатой Shift нарисуйте вертикальную линию.

Чтобы выровнять линию по центру, выделите оба слоя, выберите инструмент перемещения и на верхней панели нажмите на кнопку Align Horizontal Centers (Выровнять Горизонтальные Центры).
Вот так:

Поверните линию на 45 ° - меню Edit> Free Transform – Ctrl+T (Редактирование-Свободное Трансформирование)

Далее нажмите сочетание клавиш Ctrl+Shift+Alt+T. Нажимайте это сочетание клавиш несколько раз, пока не получится, как на скриншоте ниже.

Шаг 4

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

Добавьте несколько направляющих вокруг того места, где вы хотите, чтобы была первая форма. Убедитесь, что направляющие не пересекают пиксели.

Выберите инструмент Rounded Rectangle Tool (Прямоугольник со Скруглёнными Углами) радиус 1 рх и создайте прямоугольник по направляющим. Убедитесь, что включена опция Привязать к Направляющим (View-Snap to Guides).

Используя инструмент Direct Selection Tool  (Стрелка) переместите нижние углы (узлы) нашей прямоугольной формы внутрь, так чтобы форма сужалась.

Примечание переводчика: щёлкните Стрелкой по контуру формы, далее щёлкните по одной точке с какой либо стороны формы и с зажатой Shift щёлкните по второй. Обе точки выделятся. Далее стрелкой на клавиатуре сдвиньте эти точки. То же проделайте и с двумя точками с другой стороны формы, сдвиньте противоположной стрелкой на клавиатуре на такое же количество сдвигов.

Используйте тот же трюк с копированием и поворотом на 45 ° , который использовали выше, чтобы дублировать форму по всем линиям. При повороте на  45 ° следует установить центральную точку трансформации в центр пересечения линий. Для этого зажмите Alt и переместите точку.

Повторите эти действия несколько раз, пока форма не будет скопирована по всему периметру следующим образом.

Ваша панель слоев должна выглядеть следующим образом:

Шаг 5. Стилизация форм

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

Color Overlay (Перекрытие Цветом) цвет # 242424

Drop Shadow (Тень)

Inner Shadow (Внутренняя Тень)

Ваш загрузчик должен выглядеть так:

Шаг 6

Дублируйте слой с предварительной формой четыре раза. Затем начинайте удалять деления на каждом слое, оставляя только нужное, пока не закончите.  Для этого воспользуйтесь  инструментом Path Selection Tool (Выделение Контура).

Примечание переводчика: чёрной стрелкой выделяйте контур и нажимайте delete. Советую назвать слои так же, как у автора.

Шаг 7

Теперь добавим  стили для каждого слоя.
На слой под названием Shine-Active  добавим стиль слоя Outer Glow (Внешнее Свечение) цвет # 90dcfc:

К этому же слою добавим стиль слоя Inner Glow (Внутреннее Свечение) цвет # a2defd:

Затем изменим цвет в стиле Color Overlay (Перекрытие Цветом) на цвет #0087c6

На слой под названием Shine-Fading1  добавим те же стили, что выше, опуская стиль слоя Outer Glow (Внешнее Свечение) и отключим видимость стиля Inner Shadow (Внутренняя Тень).

На слое под названием Shine-Fading2 изменим цвет в стиле Color Overlay (Перекрытие Цветом) на цвет  # 0087c6 непрозрачность 80%.

Примечание переводчика: у автора скриншот не с тем стилем.

На слое Shine-Fading3 изменим цвет в стиле Color Overlay (Перекрытие Цветом) на цвет #0087c6 непрозрачность 25% (обратите внимание на изменение непрозрачности).

Примечание переводчика: если форма этого слоя белая, смените её цвет на  #242424

Ваш загрузчик должен выглядеть примерно так (настройки стиля слоя по своему вкусу)

Шаг 8

У нас есть база стилей, теперь пришло время, чтобы дублировать слои. Выделите все слои, кроме фонового и сгруппируйте их Layer > Group Layers (Слой-Группа Слоёв) или Ctrl+G.

Дублируем группу, а затем повернем на 45 ° Edit > Free Transform (Редактирование-Свободная Трансформация) или Ctrl+T. Снова дублируйте верхнюю группу и поверните на 45 °  (в общей сложности у вас будет восемь групп).

Ваш загрузчик должен выглядеть примерно так:

Шаг 9. Анимация загрузчика

Хорошо, наши слои настроены, и мы готовы к анимации. Откройте панель анимации Window> Animation (Окно-Анимация). Выключите видимость всех групп, кроме первой, затем нажмите кнопку  Duplicate Selected Frames ( Дублировать Выбранные Кадры ) в панели анимации.

Примечание переводчика: в версиях CS6 и выше Window-Timeline –Сreate Frame Animation(Окно-Шкала Времени-Создать Покадровую Анимацию)

Отключите видимость первой группы и включите видимость второй.

Повторите предыдущий шаг для каждой из групп слоев. Выделите все кадры в анимации (клик по первому кадру и с зажатой Shift по последнему) и установите длительность кадра в 0,1 сек, проигрывание Forever (Непрерывно).

Далее сохраните анимацию File > Save for Web & Devices. Используйте следующие параметры для анимации GIF.

Откройте ваш GIF в веб-браузере и восхищайтесь вашим новым загрузчиком!

Автор:  Andrew Wilson

Источник: webdesign.tutsplus.com