Читать


Главная » 2015 » Апрель » 9 » Урок 11. Рисуем и анимируем loader
19:18
Урок 11. Рисуем и анимируем loader

Некоторые элементы веб-страниц требуют время для загрузки и чтобы посетитель понял, что загрузка в данный момент происходит, необходим индикатор. Индикаторы загрузки (loader) могут быть различными - всё зависит от фантазии веб-дизайнера. Но в простейшем случае это должен быть небольшой анимированный элемент. Такой мы и сделаем в этом уроке. Правда сложности тут тоже есть, но это больше рутина нежели какие-то реальные трудности.

Для начала создадим фон, отмерим линейкой центр (это мы уже делали в предыдущих уроках) и нарисуем фигурой (U) круг, зажав Shift в центре и потянув курсор в сторону.

Урок 11. Рисуем и анимируем loader


Тут же скопируем полученный круг (Ctrl+C) и вставим сюда же (Ctrl+V). Нам нужно уменьшить его, для чего выберем режим трансформации (Ctrl+T) и с нажатыми одновременно клавишами Shift и  Alt притянем к центру один из углов трансформируемой фигуры. Уменьшили круг - жмём Enter. Теперь, выбрав инструмент "Стрелка" (А), вычтем меньший круг из большего.

Урок 11. Рисуем и анимируем loader


У нас получился бублик! Теперь удалим четверть этого бублика. Для этого выберем фигуру прямоугольник и зажав Alt, отсечём ненужную часть.

Урок 11. Рисуем и анимируем loader


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

Урок 11. Рисуем и анимируем loader


Выбираем инструмент "Выделение контура" и выделяем все фигуры, нарисованные нами. Жмём "Объединить".

Урок 11. Рисуем и анимируем loader


Осталось выбрать цвет или градиент по желанию. Второе - немного усложнит задачу. Заходим в стили слоя (двойной клик по слою с фигурой) и меняем значения во вкладках "Параметры наложения: Заказные" и "Наложение градиента". Градиент выбираем с цветной начальной точкой и прозрачной конечной, стиль наложения - "угловой". Ну и смотрите остальные настройки сами:

Урок 11. Рисуем и анимируем loader


Графический элемент индикатора загрузки готов! Приступим к его анимации. Для этого нам нужно создать все состояния этого элемента, вращающегося  в данном примере против часовой стрелки. Это 360 градусов. Я предлагаю создать 10 состояний, что означает, что нам нужно создать ещё 9 таких фигур, но каждый последующий поворачивать на +36 градусов.
По порядку! Создаём дубликат слоя (Ctrl+J). Выбираем режим траснформирования (Ctrl+T), поворачиваем на 36 градусов.

Урок 11. Рисуем и анимируем loader


Но вот в чём сложность - придётся изменять угол и наложенного нами градиента. Заходим в стиль нового слоя и к имеющимся градусам прибавляем 36. Было -20, стало -56

Урок 11. Рисуем и анимируем loader


И данную процедуру производим ещё 8 раз: дублируем слой, трансформацией поворачиваем фигуру на 36 градусов (в этом случае градус постоянный), и в стилях слоя на этот же градус поворачиваем градиент.

Стоит уточнить ещё один важный момент: При включении режима трансформации, перемещайте центр фигуры в центр полотна, определённый пересечением линеек - для этого зажмите Alt и двигайте индикатор центра.

Урок 11. Рисуем и анимируем loader


Чтобы легче было высчитывать угол градиента, выставляю собственные значения: -56, -92,  -128, -164, 160, 124, 88, 52, 16.

Заходим в пункт меню "Окно" в выпадающем списке - "Анимация". У нас открылась шкала анимации - в ней-то мы и будем покадрово анимировать индикатор.

Урок 11. Рисуем и анимируем loader


Создаём 9 дубликатов кадра. На первом кадре делаем невидимыми все слои с фигурой индикатора кроме верхнего.

Урок 11. Рисуем и анимируем loader


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

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

Урок 11. Рисуем и анимируем loader


Сохраняем. Shift+Ctrl+Alt+S.

Урок 11. Рисуем и анимируем loader


Готово! Конечно лучше индикатор сохранять по собственному размеру (и вообще размером поменьше), но в данном примере я оставил много свободного пространства.

Урок 11. Рисуем и анимируем loader


И как обычно вы можете скачать psd-исходник запакованный в архив весом 329 Кб
Скачать


Категория: Уроки | Просмотров: 573 | Добавил: M-Wizard | Теги: урок, фотошоп, индикатор загрузки, создаём loader, Веб-дизайн | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА