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

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

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

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

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

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

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

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

Залейте слой тёмно-серым цветом  #3d3d3d.

1-7271993

Шаг 2

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

2-8900176

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

3-3224518

Шаг 3

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

4-7899615

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

5-9849174

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

7-2360530

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

8-7238482

Шаг 4

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

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

9-5876709

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

10-4023187

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

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

11-8534554

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

12-9449802

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

13-5946788

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

14-6584136

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

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

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

15-2810619

Drop Shadow (Тень)

16-2092594

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

17-1535320

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

18-7928498

Шаг 6

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

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

19-2904474

Шаг 7

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

20-1240559

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

21-3320922

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

22-2346548

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

23-1200480

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

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

24-3861109

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

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

25-2025045

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

26-4498335

Шаг 8

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

27-2033796

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

28-6988162

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

29-8042978

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

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

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

30-1869682

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

31-1261689

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

32-9951698

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

33-2611403

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

34-2406006

Автор:  Andrew Wilson

Переводчик: Svetlana

Источник

728x90-6993617

  • Создаём текст из блёсток в Фотошоп #2
  • Как создать Gif анимацию в Фотошоп

photoshop4you