в

Как создать линейную инфографику и циферблатом

Final product image

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

1. Как создать форму циферблата 

Шаг 1

Сначала создайте основные слои, с которыми мы будем работать. Очень удобно структурировать свою работу, начиная с самых первых шагов. Нажмите сочетание клавиш Control -L , для создания Нового слоя и переименуйте их ( сделайте двойной клик мышью по имени Слоя на панели Слои).  Повторяйте эти шаги до тех пор пока не создадите и не переименуете все необходимые слои, показанные ниже. Мы будем использовать разные слои, будьте внимательны на этой ступени. 

Create layers

Перейдите на слой Фон , выберите инструмент Прямоугольник ( М) и создайте белый квадрат размером 1000×1000 пикселей, который заполнит всю рабочую область. Этот прямоугольник поможет нам определить центр в течение первых шагов. 

Create a 1000 x 1000 rectangle

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

Lock the background layer

Выберите слой Направляющие. Нажмите комбинацию Control – R , чтобы открыть линейки. Возьмите и перетяните направляющие с линеек в центр рабочей области. 

Create guides

Шаг 2

Переключимся на слой Clock. Используя инструмент Эллипс ( L) , создайте эллипс размером 380×380 пикселей, выберите инструмент Stroke weight размером 25 пикселей, установите Cap и Corner как на скриншоте ниже. Поместите круг в центре рабочей области.

Create an ellipce

Шаг 3

Переключитесь на слой Направляющие. Теперь мы будем создавать несколько направляющих, для того чтобы разделить круг на сегменты. Я специально ставлю этот шаг после создания круга, чтобы сделать процесс более подробным 

Начните с создания линий, используя Line Segment Tool ( L). Кликните один раз в центре круга, для того чтобы открыть панель Line Segment Tool Options и поменяйте Длину и Угол как показано на скриншоте ниже.  Повторите эту операцию несколько раз, чтобы полусить три линии. Точная ширина линии не особо важна, я использую ширину линии равную 5 пикселям, чтобы сделать линии более видимыми. 

Create lines

Выберите эти линии и сделайте клик правой кнопкой мыши > Создать направляющие. 

Turn lines into guides

Шаг 4

Продолжите работать слое Clock. Используя инструмент Перо, разделите круг на точках пересечения с помощью направляющих. Выберите круг и кликните на точки, где нам нужно сделать дополнительные опорные точки. 

Create new anchor points

Когда мы добавим опорные точки, нам нужно выбрать их с помощью Direct Selection Tool ( A) и Cut Path ar Selected Anchor Points. 

Я специально не убрал направляющие, так они помогут нам организовать объекты, относящиеся друг к другу. 

Cut Path at Selected Anchor Points

Установите Round Cap на панели Stroke и поменяйте непрозрачность на Умножение на панели Непрозрачность. 

Stroke and Transparency options

Шаг 5

Теперь создаем часовую стрелку, используя Line Segment Tool (\). Кликните один раз по центру круга и откройте панель Line Segment Tool Options и введите 160 пикселей Длина, 45 градусов Угол для минутной стрелки.  Повторите эту операцию с другими значениями 80 пикслей и 135 градусов Угол для часовой стрелки. 

Create hour and minute hands

Шаг 6

Добавьте цвет этим линиям. Выберите элементы часов один за другим, используя Direct Selection Tool ( A) и поменяйте Stroke color каждого элемента. 

Change the color of clocks shapes

Шаг 7

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

Выберите все объекты часов и перейдите в меню Объект > Разобрать, выберите Expand Stroke  и кликните ОК. Оставьте все объекты выбранными.

Expand all objects

Как Вы видите, появились какие-то ” боковые группы”, как я их называю. Каждая эта группа содержит в себе только один объект, они бесполезны и затрудняют работу с иллюстрацией, поэтому нам нужно избавиться от них. Клик правой кнопкой и Разгруппировать.

После этого перейдите в панель Transparency (Прозрачность) и выберите параметр Multiply Transparency.

Ungroup the clocks parts

2. Как создать стильный, цветной текст внутри циферблата часов

Шаг 1

В этой работе я буду использовать шрифт Tw Cen Mt Bold, который является стандартным шрифтом. Используя Инструмент Текст (Т), создайте несколько разных слов с разными размерами шрифта как показано на скриншоте ниже.

Create a text inside clock
Create a text inside clock

Шаг 2

Теперь поверните некоторые слова, чтобы сделать инфографику стильнее. Выберите несколько слов , сделайте клик правой кнопкой> Трансформировать > Трансформировать каждый, установите 90 градусов угол и нажмите ОК.

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

Rotate some text objects

Теперь используйте Инструмент “Прямое Выделение”(А) и перетяните слова, измените их расположение.

Move some text objects

Шаг 3

Выберите все текстовые объекты и сделайте их немного прозрачными. Перейдите к панели Прозрачность и выберите Multiply с прозрачностью 60%. Умножение- это очень важный параметр, который необходим для того, чтобы наши текстовые объекты и формы выглядели сбалансированно, когда мы меняем фон.

Change the opacity

Используя Инструмент “Прямое Выделение” (А) измените  параметр “С одинаковым цветом заливки” , измените цвет слов на цвета, использованные в элементах часов.

Change the color of text objects

После изменения цвета, мы видим, что желтый текст практически невидим. Для приданию контраста этому объекту, выберите его с помощью Инструмента “Прямое Выделение” и измените Непрозрачность до 100%.

Change the opacity to 100

Полезный совет : установите значение непрозрачности выше для светлых цветов и ниже для темных для достижения лучшего результата.

Шаг 4

Вырежьте текстовые объекты , которые расположены за пределами часов. Для этой цели, необходимо создать круг размером 340 x 340 пикселей и поместить его в центре иллюстрации.Используйте инструмент Эллипс (L).

Create a circle

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

Make the clipping mask

Теперь Вы можете скрыть направляющие. Посмотрите на панель Слои и нажмите на символ глаза перед слоем Направляющие.

Hide the Guides layer

3. Как создать иконку Символ Доллара

Так как наша инфографика имеет 6 параметров, нам нужно создать 6 иконок для достижения лучшей визуализации.

Сначала переключитесь на слой Иконки. После этого нам нужно нарисовать 6 разных квадратов, где мы расположим наши иконки. Создайте квадрат размером 70х70 пикселей с помощью инструмента Прямоугольник (М) затем выберите его с помощью Инструмента “Выделение”(V)  и перетащите, задерживая клавиши Shift-Alt. Когда Вы разместите второй квадрат,, используйте сочетание клавиш Control-D для повторения этой операции до тех пор пока у Вас не получится 6 квадратов в ряд.

Create rectangles

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

Make guides

Шаг 1

Теперь мы готовы создать первую иконку. Создайте круг размеров 30х30 пикселей с шириной обводки 7 пикселей, Выберите Round Cap и Round Join как показано на скриншоте ниже.

Create an ellipce

Шаг 2

Выберите верхние и нижние опорные точки с помощью инструментов Инструмент “Прямое Выделение”(А) и Cut Path at Selected Anchor Points.

Cut Path at Selected Anchor Points

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

Move the right half-circle

Шаг 3

 Вооружитесь Инструментом “Отрезок линии” (L) или инструментом Перо  (P) и создайте четыре линии, две вертикальные и две горизонтальные .

Create four lines

После этого используйте Инструмент “Выделение” (V), чтобы переместить линии так чтобы они вмещались в точки на концах полукруга. Поместите знак доллара в центре так чтобы она была по направляющей квадрата.

Build a dollar symbol

Шаг 4

Выберите объекты в форме доллара и нажмите кнопку Control  на клавиатуре. Вы увидите рамку вокруг объектов. Удерживайте Alt-Shift-Control  и двигайте края объектов до тех пор, пока они  не впищутся в направляющие.

Scale the dollar symbol

Шаг 5

Теперь мы создадим рамку с закругленными углами. Используя инструмент Эллипс (L), создайте эллипс размером 15х15 пикселей, с помощью Инструмента “Отрезок линии”  (\)  создайте 2 линии длиной 7 пикселей.

Create a circle and two lines

Шаг 6

Выберите верхнюю и левую опорные точки с помощью   Инструмента “Прямое Выделение”(А) и Cut Path at Selected Anchor Points. Удалите большой сегмент и поместите объекты вместе.

Cut circle at Selected Anchor Points

Поместите объект в центр направляющей прямоугольника.

Move object

Измените толщину линий до  5 pt.

Change the Stroke Weight

Шаг 7

Давайте скопируем сегмент рамки. Выберите Инструмент “Зеркальное отражение” (О) , нажимаем комбинацию Alt-клик на точке, где Вам нужно отразить объект. Выберите Vertical Axis и нажмите Копировать.

Reflect the frame part

Теперь выберите два элемента рамки и повторите действие Отразить. Выберите Horizontal Axis и нажмите Копировать.

Reflect both frame segments

Шаг 8

Превратим формы в контуры. Выберите все формы и перейдите в Объект> Разобрать, выберите Expand Stroke и нажмите ОК. Используйте  Control-Shift-G для удаления ненужных групп.

Expand Stroke
Expand Panel

Шаг 9

Теперь выбираем верхние части знака доллар с помощью Инструмента “Выделение”(V). Откройте панель Обработка контуров и кликните по Add To Shape Area, затем клик правой кнопкой мыши > Разгруппировать.

Add To Shape Area

Теперь выберите нижние части доллара и повторите те же самые действия. Не забудьте установить вид Умножение в панели Непрозрачность и сгруппировать все части иконки ( сочетание клавиш Control-G).

Change The Opacity

Шаг 10

Теперь заполните цветом все части доллара.

Change Fill Color

4. Как создать иконку Карандаш

Шаг 1

Мы создадим иконку карандаша, используя только линии. Убедитесь в том, что Вы включили Вид > Быстрые направляющие. Перейдите в Редактирование > Установки >  Быстрые направляющие, если Вам необходимо изменить параметры быстрых направляющих.

Smart Guides Preferences

Шаг 2

Выберите инструмент Линия (\) и создайте линию длиной 70 пикселей и шириной 5 pt.

Create a line

Шаг 3

Продолжайте работать с инструментом Линия и создайте еще две линии: горизонтальную длиной 25 пикселей и вертикальную длиной 25 пикселей.

Create two lines

Шаг 4

Выберите инструмент «Перо» (P). Поместите курсор на краю линии и затем начать перемещать курсор в направлении 45 градусов от этой точки, и курсор будет автоматически привязан  к Smart Guide ( Быстрым направляющим). Нажмите на некотором расстоянии от начальной точки для создания первой узловой точк. Создайте второй якорь на пересечении между углом Быстрой направляющей 45 градусов и направляющей прямоугольника.

Create a 45 degrees Angle line

 Выберите эту линию  Инструментом “Выделение” (V) и переместить её к точке пересечения двух направляющих (угол 45 Быстрой направляющей предыдущего расположения линии и угол 45 o   Быстрой направляющей конца карандаша. Нажмите Control-D, чтобы повторить операцию.

Duplicate the line

Шаг 5

 Возьмите Инструмент “Выделение”(V) и поменяйте Ширину линий частей карандаша, как показано на скриншоте ниже.

Change the Stroke Weight

Шаг 6

Продолжайте работу с Инструментом “Выделение”(V), выберите все фигуры карандаша и перейти в Объект > Разобрать, выберите Expand Stroke и нажмите кнопку ОК. Для удаления ненужных групп используйте Ctrl-Shift-G.

Expand objects
Expand Panel

Не забудьте установить значение Умножение  в палитре «Прозрачность» и изменить цвета заливки элементов карандаша. Выберите и сгруппируйте (Control-G) все детали иконки.

Change Fill Colors

5. Как создайть иконку Экран

Шаг 1

Возьмите инструмент прямоугольник (M) и нарисуйте прямоугольник размером 70 x 40 пикселей. Установить ширину линий  5 pt  и изменить стиль Cap и Corner 

Create a rectangle

Перейдите в Эффекты > Стилизация > Скругленные углы и установите радиус 10 пикселей. Потом выберите Объект > Разобрать оформление.

Round Corners

Шаг 2

Используя Инструмент “Отрезок линии” (\) ,нарисуйте линию начиная с точки, расположенной под нижней левой опорной точкой. Убедитесь в том, что Вы рисуете линию по направляющей квадрата.

Create a line

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

Выберите нижние опорные точки и перетащите эти точки немного ниже.

Pull the screen shape down

Шаг 3

Теперь мы сделаем наш экран моднее. Выберите две точки около круглого угла в правой нижней части и выберите Cut Path at Selected Anchor Points. Теперь Вы можете удалить этот угол с помощью клавиши Delete.

Cut Path at Selected Anchor Points

Шаг 4

Возьмите инструмент Эллипс (L) и создайте круг размером 7 x 7 пикселей и поместите его  между конечными точками двух линий.

Create a circle

Шаг 5

 Для создания края стрелы , переключитесь на инструмент Прямоугольник (M). Создайте квадрат размером  20 x 20 пикселей с теми же параметрами ширины линии как и у формы экрана. Дважды щелкните Rotate Tool (R) и установите значение угла 45 градусов. Примените изменения.

Create a rectangle

Повторите действия из предыдущего шага: выберите верхнюю и нижнюю точки и выберите функцию Cut Path at Selected Anchor Points Теперь вы можете удалить левую часть.

Cut Path at Selected Anchor Points

Возьмите Инструмент “Отрезок линии” (\) и нарисуйте линию от края стрелки длиной 35 px .

Create a line from arrows edge

Шаг 6

Скопируйте (Ctrl-C) и вставьте (Ctrl + V) стрелку в пустом пространстве. Задайте толщину линий  3 пт.

Copy the arrow

Щелкните правой кнопкой мыши и выберите масштаб. Изменить параметры масштаба  Uniform: 30% и нажмите кнопку ОК. Перетащить выбранную маленькую стрелку в лучшую позицию внутри формы экрана.

Scale Panel

Шаг 7

Преобразуйте  открытый контур фигуры в контур. Выделить все фигуры и перейти в меню Объект > Разобрать, выберите Expand Stroke и нажмите OK. Для удаления ненужных групп используйте Ctrl-Shift-G.

Expand all shapes
Expand Panel

Шаг 8

Выберите горизонтальную форму маленькой стрелки и дважды щелкните по Инструменту “Прямое Выделение”(A). Переместить выделенную фигуру в горизонтальном направлении, -1 px. Это очень важный шаг, и я объясню, почему позже.

Move the little arrows part

Теперь давайте выберем части маленькой стрелки с помощью Инструмента “Выделение”(V). Откройте панель «Обработка контуров» и нажмите кнопку Добавить к области фигуры, для того чтобы  стрелка состояла только  из одной формы.

Add To Shape Area

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

Шаг 9

Выделите все фигуры с помощью Инструмента “Выделение” (V). Откройте панель Прозрачность и  выберите режим прозрачности Умножение  с непрозрачностью равной 100%. После этого сгруппируйте (Control-G)  все детали значка.

Transparency Panel

Измените цвет заливки частей фигуры экран.

Change Fill COlor

6. Как создать иконку Речь 

Шаг 1

Возьмите инструмент Эллипс (L) и нарисуйте эллипс  размером 70 x 60 пикселейбез заливки и  шириной линии 7 pt . Не забудьте установить правильные параметры   Cap.

Create an ellipce

Шаг 2

Теперь нам нужно разделить эллипс на две части  и удалить одну из них. Выберите инструмент Перо (P) и создать дополнительную  опорную точку, щелкнув в любом месте на эллипс.

Create additional anchor point

Выберите две опорные точки: новую и правильную. Выберите функцию Cut Path at Selected Anchor Points.

Cut Path at Selected Anchor Points

Выберите нижний часть с  помощью Инструмента “Выделение” (V) и преобразуйте  ее в направляющую. Это можно сделать, щелкнув правой кнопкой мыши и выбрав Создать направляющие.

Make Guides

Шаг 3

После этого Возьмите инструмент Эллипс (L) и создайте эллипс размером 7 x 7 пикселей. Закругленные направляющие помогут нам поставить  новый эллипс легко и точно на продолжении основного  эллипса.

Create a circle

Шаг 4

Чтобы создать указатель речи , Возьмите Инструмент “Отрезок линии”  (\) и нарисуйте линию от конечной опорной точки  к любой точке на направляющей прямоугольника.

Create a speech bubbles pointer

Шаг 5

Поместите еще три линии внутри пузырька, чтобы проиллюстрировать обсуждения. Нарисуйте линию шириной 35 пикселей с помощью Инструмента “Отрезок линии” (\) и задайте толщину линии 4 pt.

Create three lines

Затем поместите три маленьких круга возле линии речи. Создайте кружочки размером  4 x 4  пикселя с помощью инструмента Эллипс (L).

Create three circles

Сгруппируйте (Control-G) три линии и трех круга вместе. После этого выберите группы и фигуру речь и нажмите на фигуру речь еще раз, чтобы сделать ее ключевым объектом Контур фигуры речь  станут жирнее, указывая на то , что все объекты теперь будут выровнены по ключевому объекту.

Align objects

Будьте внимательны: ключевой объект должен быть выше других объектов на панели «Слои».

Layers Panel

Шаг 6

Преобразуйте  открытый контур фигуры в контуры. Выделить все фигуры и перейти в Объект > Разобрать, выберите Expand Stroke и нажмите кнопку ОК. Для удаления ненужных групп используйте Ctrl-Shift-G.

Expand open paths
Expand Panel

Не снимайте выделение с объектов и откройте панель Непрозрачность и выберите режим прозрачности Умножение  с непрозрачностью равной 100%. Затем сгруппируйте (Control-G) все детали значка .

Поменяйте цвета заливки всех частей иконки Речь.

Change fill colors

7. Как создать значок часов

Шаг 1

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

Захватите инструмент Эллипс (L) и нарисуйте  эллипс размером 70 x 70 пикселей с  шириной обводки 7 pt. Убедитесь, что вы изменили параметры Cap и  Corner.

Create an ellipce

Шаг 2

Для создания минутной стрелки часов , Возьмите Инструмент “Отрезок линии”  (\). Кликните в центре круга и установить длину 28 пикселей  и угол  135 градусов. Примените (ОК)  изменения. Измените параметры обводки на панели Обводка, введя значение 3 pt для  ширины обводки и выбрав Round Cap.

Create a line

Повторите действия, предпринятые для минутной стрелки. Выберите Инструмент “Отрезок линии” .(\) и нарисуйте линию длиной 20 пикселей от центра круга. Используйте ширину обводки 5 pt  и  Round Cap для появления обводки.

Create another line

Шаг 3

Теперь нам нужно придать значку часов тот же стиль, как у других значков. Мы можем разделить круг на две части, выбрав опорную точку, в которой вам нужно сломать путь и нажав кнопку Cut Path at the Selected Anchor Points.

Cut Path at Selected Anchor Points

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

Make Guides

Шаг 4

Переключитесь на инструмент Эллипс (L), нарисуйте эллипс pазмером 7 x 7 пикселей и поместите его между двумя конечными точками часов. Попробуйте различные позиции для достижения лучшего результата. Единственное, что вы должны помнить – разместите круг на направляющие круга. В этой инфографике я поставил круг примерно в центре направляющей.

Create a little circle

Шаг 5

Преобразуйте  открытые контуры фигуры в контуры. Выделить все фигуры и перейти в Объект > Разобрать, выберите Expand Stroke и нажмите OK. Для удаления ненужных групп используйте Ctrl-Shift-G.

Expand objects
Expand Panel

Не снимайте выделение с объектов и откройте панель Непрозрачность и выберите режим прозрачности Умножение  с непрозрачностью равной 100%. Затем сгруппируйте (Control-G) все детали значка .

Поменяйте цвета заливки всех частей иконки Часы.

Change fill colors

8. Как создать значок мыши и клавиатуры

Шаг 1

 Я собираюсь начать создавать этот значок, сделав символ мыши . Возьмите инструмент прямоугольник (M) и нарисуйте прямоугольник размером 20 x 30 пикселей и затем перейдите в меню Эффект > Стилизация > Круглые углы... Установите размер радиуса  10 пикселей и вы увидите результат немедленно, если у Вас включена функция Предпросмотр.

Create a rectangle with round corners

Чтобы сделать эту форму  доступной для редактирования, перейдите в меню Объект > Разобрать оформление

Expand Appearance

Шаг 2

Теперь давайте создадим кнопки для нашей мыши. Создайте горизонтальную линии из точки 1 к точке 2 с помощью Инструмента “Отрезок линии”  (\). Поместите курсор на опорную точку на контуре и переместите его вправо. Вы увидите Snap guide, и первая точка линии должна быть на Snap guide. Чтобы нарисовать линию по горизонтали, удерживайте кнопку Shift на клавиатуре.

Create line

Используя инструмент “Отрезок линии”  (\) еще раз поставьте вторую линию по вертикали от верхней опорной точки мыши до пересечения с горизонтальной линией. Не забывайте держать кнопку Shift, чтобы сделать это правильно.

Create one more line

Выберите контур мышки  и линии. Откройте панель Обработка контуров и выберите параметр Разделить.

Divide Tool

Шаг 3

Этот значок будет немного больше, чем другие. По этой причине поместите компьютерную мышь так , как показано на рисунке ниже.

Теперь у нас есть достаточно свободного места для рисования клавиатуры. Выберите инструмент прямоугольник (M) и нарисуйте прямоугольник  размером 50 x 30 пикселей. Нижний левый угол прямоугольника должен сходиться с нижним левым  углом направляющей. Установите ширину обводки 5 ptRound Cap и  Round Join.

Create a rectangle

Перейти в меню Эффект > стилизовать > Закруглить углы… Установите размер радиуса 10 пикселей, как мы делали раньше для контура мыши . В меню Объект нажмите кнопку Разобрать оформление

Round corners

Шаг 4

Выберите опорные точки на вертикальной части с помощью Инструмента “Прямое Выделение”  (A), как показано на скриншоте ниже и нажмите кнопку Cut Path at Selected Anchor Points.

Cut Path at Selected Anchor Points

Теперь удалите нижнюю часть контура клавиатуры.

Delete the bottom part

Возьмите Инструмент “Прямое Выделение”(A), удерживая клавишу Shift и потяните нижние опорные точки  к направляющим прямоугольника.

Pull bottom anchors to the rectangle guide

Шаг 5

Теперь мы собираемся создать кнопки клавиатуры. Создайте  эллипс размером 5 x 5 пикселей с помощью инструмента Эллипс (L). Дважды щелкните на Инструмент “Прямое Выделение” (A). Введите  значение 8 пикселей в поле Переместить в горизонтальном направлении и нажмите Копировать. Нажмите сочетание клавиш Control-D на вашей клавиатуре несколько раз, до тех пор, пока у Вас не появится пять кругов.

Create a circle
Copy the circle

Выберите все пять кнопок и еще раз дважды щелкните  по Инструменту “Прямое Выделение”(A). Введите значение 7 пикселей в поле Перемещение в вертикальном направлении  и нажмите Копировать. Да, я установил значение 7 пикселей в поле Перемещение, чтобы кружочки находились поближе в вертикальном положении, чем в горизонтальном положении. Нажмите Ctrl-D, еще один раз для создания третьего ряда кругов.

Create three rows of circles

Шаг 6

Теперь мы собираемся превратить нижние круги в пробел. Возьмите инструмент прямоугольник (M) и перетащите прямоугольник из опорной точки номер один к опорной точке номер два, как показано на рисунке ниже.

Create the space button
Create a rectangle

Сгруппируйте все фигуры кнопок(Ctrl-G) и выравняйте их по центру контура клавиатуры, используя клавиатуру как  ключевой объект.

33 keyboard%20icons 02

Шаг 7

Теперь давайте создадим провод для нашего клавиатуры и мыши. Откройте палитру «Обводка» и установите ширину обводки 3 pt,Round Cap и Round Join. После этого создаете круг размером 15 x 15 пикселей  с помощью инструмента Эллипс (L).

Create a circle

Выберите левую и правую опорные точки круга  и выберите функцию Cut Path at Selected Anchor Points. Перетащите нижний часть круга, как показано на рисунке ниже. Правая опорная точка нижнего полукруга должно соответствовать левой опорной точке верхнего полукруга.

Cut Path at Selected Anchor Points

Выберите части провода с Инструмент “Прямое Выделение” (A) и переместить их, удерживая правую опорную точку.

Move the shapes

Шаг 8

Теперь возьмите инструмент Перо (P) и нарисуйте две вертикальные линии. Сделайте первый клик на опорной точке круглой линии и второй клик на конце провода.

Create vertical lines

Щелкните в любом месте на пустой части рабочей области, чтобы отменить текущее выделение. Поймать пересечение с помощью «быстрых» направляющих , как показано на рисунке ниже. Нажмите на этом пересечении, чтобы установить опорную точку начала, удерживайте клавишу Shift и нажмите на направляющую  для создания конечной опорной точку  провода клавиатуры.

Create a vertical line

Шаг 9

Преобразуйте  открытые контуры фигуры в контуры. Выделить все фигуры и перейти в Объект > Разобрать, выберите Expand Stroke и нажмите OK. Для удаления ненужных групп используйте Ctrl-Shift-G.

Expand objects
Expand Panel

Не снимайте выделение с объектов и откройте панель Непрозрачность и выберите режим прозрачности Умножение  с непрозрачностью равной 100%. 

Transparency Panel

Теперь давайте выберем пробел  с помощью Инструмента “Прямое Выделение”(A). Откройте панель «Обработка контуров» и нажмите кнопку Добавить к фигуре, чтобы превратить части кнопок в одну фигуру. Повторите те же действия для частей длинного провода.

Add Ro Shape Area

Шаг 10

Теперь после того, как объекты были превращены в контуры, мы можно выровнять мыши с клавиатурой. Выберите Инструмент “Прямое Выделение”(A) и выберите верхнюю часть мыши. Потяните выбранные опорные точки к пересечению с горизонтальной Быстрой направляющей от формы клавиатуры. Повторите те же самые действия с формой мишки.

Edit the mouse object
Edit the mouse object

Измените цвета заливки фигур иконки. Наконец, выберите и сгруппируйте (Ctrl-G) все детали значка .

Change fill colors

Нам не нужны наши квадратные направляющие, теперь, когда последний значок готов . Перейти в меню Вид > Направляющие > Удалить направляющие, чтобы удалить все видимые направляющие в документе.

Clear Guides

9. Как создать текст

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

Шаг 1

Во-первых посмотрите на панель «Слои» и перейдите на слой с текстом.

Switch to Text Layer

Возьмите инструмент прямоугольник (M) и создайте прямоугольник размером 260 x 60 пикселей.

Create a rectangle

Шаг 2

Щелкните на прямоугольник с помощью Инструмента “Текст в области” . Вы можете увидеть, что прямоугольник превратился в текстовое поле. В этом уроке я заполню текстовое поле абстрактным текстом  «Lorem Ipsum…». Это просто пример, и вы сможете изменить этот текст позднее.

Area Type Tool

 Я использовал шрифт Tw Cen MT Regular ,  размер 12 пт и выравнивание по последней линии по краю слева. Вы можете изменить эти параметры, с помощью палитры «Символ» и «абзац».

Character Panel and Paragraph Panel

Шаг 3

Выберите инструмент линия (\) или инструмент Перо (P) и добавьте строку с длиной, равной ширине текстового поля. Дважды щелкните на Инструменте “Прямое Выделение”, чтобы открыть панель Перемещение и изменить вертикальное перемещение  на -15 пикселей.

Create a line

Шаг 4

Выберите Инструмент “Текст по контуру”  и нажмите на линию. Теперь вы можете ввести название здесь.

Type on Path Tool

Для названия я использовал шрифт  Tw Cen MT Bold с  размером 25 pt и выравниванием по центру.

Character and Paragraph Panels

Шаг 5

Выберите название и  текстовое поле описания и нажмите Ctrl-G, чтобы сгруппировать два элемента. Не забудьте переключить значение Непрозрачности на Умножение в параметрах панели Непрозрачность.

Transparency Panel

Увеличьте масштаб, чтобы увидеть всю инфографику. Выберите текст с помощью Инструмента “Выделение”(V), удерживая Alt на клавиатуре и перетащите текстовые объекты на другие позиции. Продолжайте перетаскивать текстовые объекты до тех пор, пока вы не  получите шесть текстовых полей.

Copy the text

Шаг 6

Теперь давайте перекрасим текстовые объекты. Выберите текстовые объекты по одному с помощью Инструмента “Прямое Выделение”  (A) и изменить цвет их заливки. Для названий используйте те же цвета, которые вы использовали для частей основных часов. Для текста описания я использовал тот же цвет, который я использовал для часовой стрелки.

Recolor text objects

Шаг 7

После того, как вы закончили работу с текстовыми объектами, переместите иконки с помощью Инструмента “Выделение” (V), как показано на рисунке ниже.

Add icons

Шаг 8

Есть несколько шагов, осталось доработать наши инфографику. Перейдите на слой «Фон» в палитре «Слои».

Switch to Background Layer

Выберите прямоугольник, который мы создали раньше. Используйте Инструмент “Градиент” (G), установите радиальный градиент и переместите ползунок градиента до 75%, как показано на рисунке ниже.

Gradient Tool

Поздравляем! Наш инфографический шаблон в линейном стиле готов! 

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

Теперь используя эти навыки, Вы можете создать любой объект в таком же стиле, и есть невероятное количество способов использовать инфографику!

Final template

Автор: Andrew Krasovitckii

maxresdefault

Рисуем логотип в Adobe Illustrator

illjustracija c devushkoi za chashechkoi kofe

Как создать векторную иллюстрацию c девушкой за чашечкой кофе