Делаем красивый анимированый прелоадер в Photoshop за 10 минут

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

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

Вот главные три части с которыми мы будем работать:

Рисование прелоадера;
Cтилизация прелоадера;
И его анимация;

Часть 1: Рисование прелоадера

Для создания нам понадобится Photoshop CS3 либо старше.

Начнем с создания нового листа и указания его фонового цвета:

Создаем новый документ (File>New) || Control/Command + N
Размеры: 100px на 100px
Двойной клик на слое background, чтобы сделать его обычным слоем
Заливаем фон темно серым цветом, например, #3d3d3d

Сейчас мы для красоты создадим паттерн для фона и займемся самим прелоадером.

Итак, создадим еще один документ 7px на 7px и нарисуем на нем диагональную линию с верхнего левого угла в правый нижний.

Определим это изображение как паттерн (Edit menu > Define Pattern)

Возвращаемся к основному документу и создаем для единственного слоя стиль “Pattern Overlay”: (Layer menu > Layer Style > Pattern Overlay). Выбираем наше созданное изображение и снижаем прозрачность где-то до 20%.

Далее мы нарисуем направляющие для нашего прелоадера.

Для этого выбираем инструмент Line белого цвета шириной в 1px, рисуем вертикальную линию приблизительно по центру фона.

Чтобы выровнять ее точно по центру выбираем инструмент Move выделяем оба слоя и в на верхней панели нажимаем кнопку Align horizontal centers.

Поворачиваем линию на 45° градусов (Select Edit menu > Transform > “Transform Again”)

Повторяем данную операцию, пока не получим вот такой результат:

Используя вышеописанную технику мы сделаем отметки на каждой нарисованной линии.

Добавим несколько направляющих там, где будет наша первая отметка. Убедитесь, что направляющие находятся точно на пикселях, а не на их разделении (оригинал: make sure your guides are on whole pixels, don’t split pixels).

Рисуем по направляющим прямоугольник со скругленными углами в 1px.

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

Используя ‘Transform Again’ мы продублируем и повернем нашу нарисованную отметку (Так же как мы делали с направляющими. Перед поворотом убедитесь, что, точка поворота находится на пересечении нарисованных направляющих, а не в центре отметки. Чтобы изменить ее положение во время трансформации зажимаем Alt кликаем в центр пересечения линий).

После всех операций получаем подобную картину:

Удаляем лишние слои и приводим их к вот такому виду:

Часть 2: Стилизация

Итак, мы закончили рисовать прелоадер и теперь пора придать ему приличный вид.

Добавляем эффекты для слоя с маркерами

Color Overlay (цвет #242424)

После добавления всех эффектов прелоадер должен выглядеть примерно так:

Создаем еще четыре копии слоя с маркерами и удаляем с них лишние маркеры. В общем, добиваемся эффекта, как на картинке ниже (так же переименуйте слои как на изображении):

Выбираем слой Shine-Active и добавляем ему эффекты как на изображениях ниже

Drop Shadow оставляем без изменений

Убираем Inner Shadow

Добавляем Outer Glow и Inner Glow (цвет я использовал #4a9fff)

В Color Overlay изменяем цвет наложения на #0087c6

Для слоя Shine-Fading1 делаем то же самое, только не добавляем Outer Glow.

Слою Shine-Fading2 изменяем Inner Shadow

И изменяем цвет Color Overlay на #0087c6

И, наконец, последнему слою Shine-Fading3 мы изменяем Color Overlay так же на #0087c6 и ставим прозрачность на 25%.

На этом рисование и стилизация завершены. Если вы все делали правильно, то получится у вас что-то похожее.

Часть 3: Анимация

Уф… Большая часть работы проделана, осталась самая малость.

Группируем получившиеся слои (выделяем их + Layer menu > Group Layers)

Теперь дублируем группу и поворачиваем ее на 45° градусов, затем дублируем новую группу и снова поворачиваем на 45° градусов. И так до тех пор, пока у нас не получится 8 групп.

А на листе мы получим что-то подобное.

Далее мы открываем окно анимации (Window > Animation, чтобы переключиться в «покадродвый» режим нажимаем кнопку внизу слева).

Создаем 8 кадров
Каждому кадру устанавливаем длительность в 0.1 секунду
Выделяя кадр, делаем видимым на нем только группу с таким же номером
Так же устанавливаем, чтобы анимация повторялась бесконечно

Должно получиться вот так:

В конце выбираем File > Save for Web & Devices и устанавливаем настройки для сохранения нашего .gif

📎📎📎📎📎📎📎📎📎📎