html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

Цель урока


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




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

Шаг 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). При этом радиальный градиент будет трансформирован в эллиптический.

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


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





Читать дальше
Twitter
Одноклассники
Мой Мир

материал с vectorboom.com

11

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sasa1975sasa
          • домен ru.vectorboom.com
          • домен vectorboom.com

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции