Из этого урока вы узнаете, как создать стильный gif прелоадер в фотошопе. Для справки: Прелоадер – отображает процесс загрузки приложений, сайтов и тп. Например, прелоадер можно поставить пока грузится сайт или его отдельная часть.
Шаг 1: Подготавливаем прелоадер
Создайте новый документ желаемых размеров, для урока я использовал 750х300 px
Возьмите инструмент произвольная фигура, на верхней панели откройте палитру “Произвольная фигура” и выберете фигуру “Круглая рамка“. Если такой нет, ее можно добавить щелкнув по значку шестеренки -> Фигуры
Затем выбирете темно-серый цвет, зажмите Shift и начертите овальную область по центру документа
Шаг 2: Создаем стиль анимации
Анимацию будем создавать с помощью стиля слоя и шкалы времени. Для начала зайдите в стиль слоя, кликнув два раза по слою с фигурой и перейдите в пункт ” Наложения градиента “. Далее создайте новый градиент, следую скриншотам ниже
Режим наложения: Нормальный; Непрозрачность: 100%; Стиль: Угловой; Угол: 90о ; Первый цвет: #363636
Второй цвет: #0cff00; Третий цвет такой же как и первый
Затем перейдите в пункт “Внутренние свечение” и установите такие настройки
Нажимаете ОКей. У вас должно получится как на скриншоте ниже
Шаг 3: Делаем анимацию
Теперь самая главная задача, нужно анимировать наш стиль. Для начала зайдите во вкладку
“Окно -> Шкала времени”, что бы открыть панель создания анимации.
Пункты 1 и 2 думаю понятны (раскрываете “Фигура 1” и активируете стиль. Дальше самое интересное.
Под цифрой 3 я поставил стрелочку в право, то есть. При активации параметра “стиль” у вас появился желтый ромбик это наш стиль фигуры на момент активации.
Для анимации нам нужно передвинуть красную полоску в право примерно на расстоянии как показано выше.
Затем снова зайдите в стиль слоя фигуры и установите такие параметры
Теперь еще раз передвиньте красную полосу примерно на такое же расстояние, зайдите в стиль слоя и установите такие параметры
Затем обрежьте временную шкалу, подтянув за ползунок к последнему стилю, как показано на скриншоте
Что бы анимация повторялась, поставьте галочку у “Цикл воспроизведения”
Вот и все! Наш анимированный прелоадер полностью готов к использованию. Для просмотра анимации нажмите кнопочку “Выполнить ►”.
Шаг 4: Сохраняем gif прелоадер
Зайдите ” Файл -> Сохранить для Web ” Выберете формат .gif и жмите сохранить.
Поздравляю! Теперь вы можете пройти по адресу сохранения, и насладиться простым но стильным анимированным веб прелоадером. Вот такой результат получился у меня:
В заключение
В данном уроке вам был показан один из простых способов создания gif прелоадера в web стиле. Для использования его в верстке конечно размеры должны быть намного меньше. Если был непонятен какой либо шаг или момент, обязательно пишите в коментариях, а также нам будет очень интересно увидеть, что получилось у Вас. Не забывайте подписаться на новые уроки по фотошопу в форме ниже.
