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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

Оцените статью
Добавить комментарий