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

Как создать элементы инфографики или абстрактные формы для веб дизайна в Illustrator

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

 

Для более углубленного изучения данного урока Вы можете скачать исходный векторный файл

 

 

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

Шаг 1

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

Теперь создаем квадрат с заливкой светло-серым цветом, затем переходим Object > Transform > Rotate… и устанавливаем угол 45 градусов в диалоговом окне. Или просто поверните ограничительную рамку, удерживая клавишу Shift.

Шаг 2

Дублируем повернутый квадрат, удерживая Option/Alt во время перемещения объекта. Изменяем размеры новой фигуры при помощи Selection Tool (V) и перекрасим в оранжевый цвет, например:

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

Шаг 3

При помощи горизонтальной направляющей определим линию горизонта. Вертикальная направляющая определит положение точки схода.

Некоторые боковые стороны форм будут видны зрителю. Для их создания соедините вершины квадратов с точкой схода при помощи Pen Tool (P)

Переместим созданный объект ниже всех квадратов и изменим заливку на более темный оттенок основного цвета. Это удобно сделать в панели Color, используя режим HSB.

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

Шаг 4

Создадим иллюзию пересечения объектов. Для этого выделим вершины одного из квадратов при помощи Direct Selection Tool (A) и переместим их вверх, удерживая клавишу Shift, так как это показано на рисунке ниже. Новое положение вершин должно быть на боковой стороне соседнего объекта.

Повторите эту операцию еще в нескольких местах композиции, это придаст ей дополнительный объем.

Шаг 5

Приступим к созданию падающих теней. Копируем один из прямоугольников, например красный, и вставляем его вперед. Заливаем новый объект линейным градиентом от белого к серому цвету. Повернем градиент под углом 45 градусов в панели Gradient.

Применяем к объекту режим смешивания Multiply в панели Transparency. Как вы можете видеть, белый цвет стал прозрачным.

Шаг 6

Вы можете возразить мне: "Зачем усложнять решение задачи? Можно было просто заменить сплошной красный цвет на градиентную заливку из оттенков красного цвета”. Да это также хорошо работает. Но предложенный способ более гибкий. Например, вы можете очень быстро заменить цвета светотени, перекрасив только нижний объект. То есть, у вас нет необходимости управлять цветами линейного градиента.

К тому же, используя этот метод, вы можете создать сложную светотень. О том, как это сделать вы узнаете в следующем шаге.

Шаг 7

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

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

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

Шаг 8

Падающая тень может иметь четко очерченные границы. Создадим форму тени при помощи Pen Tool (P). Теперь, как и прежде, заливаем этот объект серо-белым линейным градиентом и применяем режим смешивания Multiply.

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

Деформируем окружность при помощи Direct Selection Tool (V). При этом радиальный градиент будет трансформирован в эллиптический.

На этом наш урок закончен. Созданная абстрактная композиция может использоваться в качестве элемента инфографики или элемента веб дизайна.

 

Для более углубленного изучения данного урока Вы можете скачать исходный векторный файл

 

 

 

 

 

 

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