Создаем gif прелоадер в фотошопе за 5 минут

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

Шаг 1: Подготавливаем прелоадер

Создайте новый документ желаемых размеров, для урока я использовал 750х300 px

Возьмите инструмент произвольная фигура, на верхней панели откройте палитру "Произвольная фигура" и выберете фигуру "Круглая рамка". Если такой нет, ее можно добавить щелкнув по значку шестеренки -> Фигуры

Затем выбирете темно-серый цвет, зажмите Shift и начертите овальную область по центру документа

Шаг 2: Создаем стиль анимации

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

Режим наложения: Нормальный; Непрозрачность: 100%; Стиль: Угловой; Угол: 90^о ; Первый цвет: #363636

Второй цвет: #0cff00; Третий цвет такой же как и первый

Затем перейдите в пункт "Внутренние свечение" и установите такие настройки

Нажимаете ОКей. У вас должно получится как на скриншоте ниже

Шаг 3: Делаем анимацию

Теперь самая главная задача, нужно анимировать наш стиль. Для начала зайдите во вкладку

 "Окно -> Шкала времени", что бы открыть панель создания анимации.

Пункты 1 и 2 думаю понятны (раскрываете "Фигура 1" и активируете стиль. Дальше самое интересное.

Под цифрой 3 я поставил стрелочку в право, то есть. При активации параметра "стиль" у вас появился желтый ромбик это наш стиль фигуры на момент активации.

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

Затем снова зайдите в стиль слоя фигуры и установите такие параметры

Теперь еще раз передвиньте красную полосу примерно на такое же расстояние, зайдите в стиль слоя и установите такие параметры

Затем обрежьте временную шкалу, подтянув за ползунок к последнему стилю, как показано на скриншоте

Что бы анимация повторялась, поставьте галочку у "Цикл воспроизведения"

Вот и все! Наш анимированный прелоадер полностью готов к использованию. Для просмотра анимации нажмите кнопочку "Выполнить ►".

Шаг 4: Сохраняем gif прелоадер

Зайдите " Файл -> Сохранить для Web " Выберете формат .gif и жмите сохранить.

Поздравляю! Теперь вы можете пройти по адресу сохранения, и насладиться простым но стильным анимированным веб прелоадером. Вот такой результат получился у меня:

В заключение

В данном уроке вам был показан один из простых способов создания gif прелоадера в web стиле. Для использования его в верстке конечно размеры должны быть намного меньше. Если был непонятен какой либо шаг или момент, обязательно пишите в коментариях, а также нам будет очень интересно увидеть, что получилось у Вас. Не забывайте подписаться на новые уроки по фотошопу в форме ниже.