DesignJunkie.ru - Видеоуроки, Шаблоны, Photoshop, КНИГИ / УЧЕБНИКИ, Фотографии, Креатив, Графика

В этом уроке мы будем делать вот такой индикатор предварительной загрузки

Создайте новый документ с белым фоном. Очень важно, чтобы он был строго квадратным (позже это нам очень поможет).

Возмите Shape tool (U) и нарисуйте небольшой кружок вверху документа. Вы можете использовать любой цвет (из оттенков синего).

Нам нужно получить много кружков из одного. Дублируем этот кружок: выделяем его при помощи Path Selection Tool, затем Ctrl+C и Ctrl+V. После этого тянем его вниз удерживая ALT.

Отлично! Теперь у нас есть слой, содержащий 2 одинаковых кружка. Сейчас нужно выровнять их по отношению друг к другу и к документу. Для начала выделим оба кружка при помощи Path selection tool (A). Вы заметили, что кнопки на верхней панели стали доступны? Жмем на кнопку Align Horizontal Centers. Затем делаем активным первый слой (белый фон), соедините со слоем с кружками (щелкните на иконке соединения возле окошка слоя). Теперь берем Move tool (V) и опять нажимаем Align Horizontal Centers. Результат – наши кружочки отлично выровнены!

Нам нужно 12 кружков, но пока у нас есть всего 2. Дублируем кружки очень простым способом – выделите их (не забываем о Path selection tool (A)), копируем (Ctrl-C), вставляем (Ctrl-V) и поворачиваем (Ctrl-T). После нажатия Ctrl-T, вам нужно будет заполнить поле на верхней панели. Найдите поле Angle (Угол), и введите значение 30.

Нужно добавить некоторые стили слоя: stroke (1px), inner glow (1px), gradient (радиальный, от белого к черному, режим наложения overlay).

Теперь нужно сделать получившуюся фигуру постепенно исчезающей. Для этого идем в меню Layer → New Fill Layer → Gradient.

Это будет градиентный слой со следующими настройками:
- от белого к прозрачному
- стиль: angle
- угол: 77

OK, мы закончили с графикой, но как сделать чтобы оно поворачивалось? Очень просто – вместо того, чтобы поворачивать изображение, будем поворачивать градиент.

Теперь нужно создать новый документ, где будет один кадр будущей анимации. После того, как документ создан (убедитесь, что размеры не изменены), возвращаемся к оригинальному документу. Выделяем всё (Ctrl-A), копируем выделение в буфер (Ctrl-Shift-C), переходим на новый документ и вставляем (Ctrl-V), затем опять возвращаемся к оригинальному документу. Затем делаем активным слой с градиентом , растеризуем его (layer → rasterize), и поворачиваем на 30 градусов. Повторяем тоже самое 12 раз. Результат - новый документ с 12 слоями, где каждый слой - это кадр будущей анимации.

Можете сохранить оригинальный документ и закрыть его. Затем переходим в ImageReady (Ctrl-Shift-M) и сделаем невидимыми все слои кроме первого. Это будет первый кадр. На скриншоте задержка кадра стоит на 0.2 сек, но потом я посчитал, что это много и поменял на 0.1 сек.

Создаем новый кадр, делаем видимым второй слой. И так 12 раз.

Результат:

• 14/02/2012 02:40 - Все видео курсы от Евгения Попова и Зинаиды Лукьяновой по созданию сайтов и освоению Adobe Photoshop
• 23/10/2011 04:06 - Скачать ACTIONS для ADOBE PHOTOSHOP
• 19/10/2011 06:22 - Taviskaron's Tisque Texture pack
• 19/10/2011 06:02 - Taviskaron's Grimmar Texture pack
• 19/10/2011 05:54 - Taviskaron's Argellary Texture pack

• 30/03/2008 20:06 - Creating a Vector Composite Effect from a Photo
• 24/03/2008 23:04 - Как сделать из фотографии рисунок в Photoshop
• 23/03/2008 19:51 - Стеклянный текст
• 23/03/2008 18:37 - Cтильные огненные линии

• 23/03/2008 17:17 - Быстрый способ создания красивых букв
• 23/03/2008 02:31 - Изготовление кистей
• 22/03/2008 23:41 - Состаривание лицa