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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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