Vectorboom
Уроки / Web дизайн / Comments: 0

Как создать интерфейс медиа плеера в Adobe Illustrator

Ярослав Лазунов
05.07.2012
Цель урока

В этом уроке мы научимся создавать современный интерфейс в программе Adobe Illustrator, используя только векторные объекты. Да, вы можете создавать тени и внутренние свечения объектов, не используя растровые эффекты. О том как это сделать в  Illustrator мы узнаем в этом уроке. Какие преимущества и особенности создания интерфейсов в Adobe Illustrator Вы можете прочитать здесь.


Шаг 1

Начнем с создания фона. Для того чтобы все элементы интерфейса выглядели четко в растровом формате файла выберем Pixel Preview mode (View > Pixel Preview). Берем Rectangle Tool (M) и создаем квадрат размером 6 x 6 px с заливкой серого цвета.

Теперь создадим еще 10 квадратов размером 1x 1 px с заливкой более темным серым цветом и расположим их так, как это показано на рисунке ниже.

Выделяем все созданные объекты и переходим Edit > Define pattern…

Таким образом, мы создали бесшовный узор (seamless pattern).


Шаг 2

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

Открываем Appearance panel (Window > Appearance), выделяем фон и создаем для него новую заливку, нажав на кнопку Add New Fill.

Применим к новой заливки вертикальный линейный градиент от серого к черному цвету и Overlay Blending mode.


Шаг 3

Создаем форму корпуса плейера. Она представляет собой прямоугольник с округленными углами. Для этих целей я использую Dynamic Shapes Tool (VectorScribe plugin). В случае использования этого инструмента вы получаете полный контроль над параметрами фигуры и радиусами округления углов. Применяем к объекту тот же бесшовный узор, что и для фона. Я решил сделать корпус плейера прозрачным

Возникла иллюзия, что корпус также как и фон имеет градиентную заливку.

Такая особенность нашего зрительного восприятия, поэтому нам необходимо внести небольшую коррекцию. При помощи Appearance panel добавим к форме новую заливку с линейным градиентом, к которой также применим Overlay Blending mode.


Шаг 4

Создадим свечение на краях плейера. Копируем прямоугольник с скругленными углами (rounded rectangle) и вставляем его вперед (Cmd / Ctrl + C; Cmd / Ctrl + F). Удаляем верхнюю заливку в Appearance panel и заливаем нижнюю серым цветом.

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

Выделяем оба прямоугольника, переходим Object > Blend > Blend Options…, и устанавливаем количество specified steps. Теперь переходим Object > Blend > Make

Устанавливаем для бленд объекта Overlay Blending mode.


Шаг 5

Создадим тень под плейером. Создаем прямоугольник с скругленными углами с заливкой белого цвета и размещаем его ниже всех объектов плейера.

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

Создаем из этих форм бленд объект (Object > Blend > Make)

Теперь применим к этому объекту Multiply Blending mode.


Шаг 6

Для создания блика на верхней части плейера продублируем его форму два раз и разметим копии выше всех объектов. Сместим верхний прямоугольник с скругленными углами на 1 px вниз (для наглядности формы залиты разными цветами) (19). Выделяем красный и синий прямоугольники  и нажимаем на кнопку Minus Front в панели Pathfinder.

Заливаем полученную форму белым цветом.


Шаг 7

При помощи Ellipse Tool (L) создадим окружность с заливкой радиальным градиентом от серого к черному цвету.

Трансформируем окружность в эллипс и применим к нему Screen Blending mode.

Таким образом, мы создали рефлекс света ниже корпуса плейера.


Шаг 8

Приступаем к созданию углублений для кнопок и слайдера в корпусе. Создадим окружность и прямоугольник с скругленными углами, затем объединим эти формы, нажав на кнопку Unite в панели Pathfinder.

Применим к полученной форме бесшовный узор (seamless pattern), который мы применяли к фону.


Шаг 9

Копируем форму углубления и вставляем ее вперед (Cmd / Ctrl + C; Cmd / Ctrl + F). Заливаем копию вертикальным линейным градиентом, который состоит из двух оттенков серого цвета.

Не снимая выделения с объекта, переходим Object > Path > Offset Path… и устанавливаем величину смещения.

Заливаем полученную форму более светлым линейным градиентом.


Шаг 10

Выделяем два объекта, которые были созданы в предыдущем шаге и превращаем их в бленд объект (Object > Blend > Make)

Применим к бленд объекту Multiply Blending mode.

Копируем форму углубления и вставляем ее назад. Заливаем копию светло-серым цветом и смещаем на 1 пиксель вниз.

Таким образом, мы создали блик света на краю углубления. Используя эту технику, создадим еще одно углубление в корпусе.


Шаг 11

При помощи Rectangle Tool (M) создадим форму экрана, которую заливаем горизонтальным линейным от темно-серого цвета к черному цвету.

Копируем прямоугольник и вставляем его назад. Заливаем копию светло-серым цветом и смещаем на 1 пиксель вниз.


Шаг 12

При помощи Ellipse Tool (L) создадим форму кнопки, которую заливаем линейным градиентом от белого к серому цвету.

Создадим еще одну окружность и разместим ее ниже кнопки. Заливаем окружности радиальным градиентом от черного к белому цвету и применим Multiply Blending mode.

Таким образом, мы создали тень от кнопки. Используя описанную технику, создайте остальные кнопки плейера.


Шаг 13

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

Копируем форму слайдера и вставляем ее назад. Заливаем эту форму белым цветом.

Не снимая выделения с белой формы, переходим Object > Path > Offset Path… и устанавливаем величину смещения в диалоговом окне.

Заливаем новую форму серым цветом.

Выделяем обе формы и переходим Object > Blend > Make, затем устанавливаем для бленд объекта Multiply Blending node.

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


Шаг 14

Копируем форму слайдера и вставляем ее назад. Заливаем копию светло-серым цветом и смещаем на один пиксель вниз.

Создадим активную часть слайдера. Выделяем форму слайдера и переходим Object > Path > Offset Path… и устанавливаем величину смешения  -1px

Выделяем три правые точки новой формы при помощи Direct Selection Tool (A) и смещаем их в левую сторону.

Применяем к этой форме новый бесшовный узор, техника создания подобных заливок описана в первом шаге


Шаг 15

Добавим новую градиентную заливку в панель Appearance, к которой применим Overlay Blending mode

Дублируем одну из ранее созданных кнопок с тенью. Уменьшаем ее размеры и помещаем в конце активной зоны слайдера.

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


Шаг 16

Приступаем к созданию звукового слайдера. Создадим прямоугольник с скругленными углами с заливкой серого цвета. Установим для этой формы 50% opacity в панели Transparency.l

Копируем форму и вставляем ее назад, смешаем ее влево и вверх на 1px. Заливаем эту форму линейным градиентом от серого к черному цвету и применяем Screen Blending mode и 100% opacity.

Техника создания вертикального слайдера ничем не отличается от техники создания горизонтального.


Шаг 17

Теперь при помощи простых геометрических форм создадим символы на кнопках.

Ну вот работа закончена и мы можем увидеть, что у нас получилось.

Оригинал урока на Английском языке: AstuteGraphics

Автор урока Ярослав Лазунов

 

Будьте всегда в курсе свежих новостей о векторной графике, новых уроков работы в Adobe Illustrator, статей и интервью посвященных графическому дизайну. Команда RU.Vectorboom работает для Вас!

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.