БЕСПЛАТНЫЕ УРОКИ. Компьютерная графика

Photoshop. Как создать индикатор загрузки для сайта

preloader2

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

Нужен такой индикатор для Вашего сайта? Создать его с помощью программы Photoshop довольно просто.

В этом уроке вы узнаете, как можно создать красивый индикатор загрузки для своего Web-сайта. Т.е. вы научитесь создавать анимированные Gif-файлы с помощью программы Photoshop.

В этом уроке я покажу, как с пмощью программы Photoshop CS5 создать простой и красивый индикатор згрузки в виде анимационного gif-файла.
Загружаем программу Photoshop, создаем новый документ размером 400 х 400 точек и заливаем фон черным цветом.

создаем новый документ размером 400 х 400 точек
Сочетанием клавиш Ctrl и + или зумом увеличить изображение до максимально возможного, при котором оно полностью видно. Теперь нужно включить нужную панель для создания анимации. Заходим в меню Окно -> Рабочая среда и ставим галочку на пункте Движение. Должна появиться панель снизу, указано стрелкой на рисунке ниже:

панель Анимация

Теперь нужно создать новый слой, щелкните по иконке добавления нового слоя.
Перейдите на новый слой, выделите окружность в верхней части черного квадрата.

Перейдите на новый слой, выделите окружность в верхней части черного квадрата

Далее нужно закрасить эту окружность светло-зеленым цветом.

закрасить окружность

У Вас окружность останется выделенной. Выберите режим Редактирование --> трансформирование --> искажение. Получится примерно так:

режим Редактирование --> трансформирование --> искажение

Потяните по очереди указанные стрелками точки вниз так, что бы получился следующий рисунок:

Потяните по очереди указанные стрелками точки вниз

Нижняя часть полученного рисунка должна находиться в центре черного квадрата. Как указано стрелкой. После этого нажимаем Enter и снимаем выделение.

снимаем выделение

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

добавить эффекты

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

дубликат слоя

На новом слое включаем режим трансформации, для этого нажимаем сочетание клавиш Ctrl + T. Удерживая кнопку Alt перетаскиваем крестик с кружочком из центра выделенного фрагмента в середину нижней линии, как показано на рисунке.

режим трансформации

Теперь нужно выделенную фигуру повернуть на 30 градусов, для этого в панели свойств в поле, указанное стрелкой вписываем число 30.

выделенную фигуру повернуть на 30 градусов

Нажимаем Enter, если получилось как на рисунке.
Процедуру повторяем до тех пор, пока лепестки не заполнят полностью весь круг. Можно все лепестки закрасить разным цветом, например так:

Можно все лепестки закрасить разным цветом

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

создание анимации

В результате получится примерно следующее:

создание анимации

Выделяем все кадры будущей анимации и нажимаем на указатель времени задержки кадра:

указатель времени задержки кадра

Выбираем время задержки 0,5 сек и проверяем как работаем анимация нажатием на кнопку воспроизвести.

время задержки 0,5 сек

Анимация готова, осталось только сохранить. Для этого в меню «Файл» выбираем пункт «Сохранить для Web-устройств…». Можно попробовать разные режимы при сохранении gif-файла и посмотреть результат.
Вставляем анимацию на Web-страницу и любуемся картинкой.

 А вот примеры крисивых анимашек, созданных в Photoshop:

анимация пластика  анимация солнце  анимация солнце  uhtyska preloader6 

Добавить комментарий
  • Комментарии не найдены