Как в иллюстраторе сделать 2 страницы

Как в иллюстраторе сделать 2 страницы
Как в иллюстраторе сделать 2 страницы
Как в иллюстраторе сделать 2 страницы

Как только не называют Adobe Illustrator: иллюстратор, люстра, люстратор… Но многие ли знают и умеют пользоваться этой программой? Для чего нужен illustraror верстальщику? Если кратко, то вариантов два: для работы с макетом от дизайнера и для создания/редактирования SVG изображения. О преимуществах этого мы поговорили в одной из прошлых статей.

А здесь мы поговорим об азах работы в программе Adobe Illustrator. Помню, когда-то давно, эта программа мне казалось очень сложной… К счастью, эти времена прошли и я готова помочь Вам освоить её быстрее, чем это сделала я когда-то. Верстальщику и фронтенд-разработчику нет ни какого смысла знать обо всех функциях этой программы (только если Вы сами этого не хотите), но знать о популярных возможностях Вы должны. Итак, поехали.

Сделаю PrintScreen инструментов и сразу укажу на те, которые Вам понадобятся.

illustrator для верстальщика

Из всего этого разнообразия инструментов у нас осталось всего 9. Не так много, правда? Давайте рассмотрим их по порядку.

Selection Tool

ST позволяет выделить нужный цветовой и текстовый слой в рабочем пространстве. Чтобы выделить нужный элемент достаточно всего лишь кликнуть по нужному участку. Давайте рассмотрим на примере SVG изображения. Допустим, мне нужно выделить оранжевый участок. Что нужно сделать? Надо выбрать инструменя Selection Tool и кликнуть по оранжевому объекту. Объект выделился и это будет выглядеть так:

выделить объект в иллюстраторе

«А если мне нужно выделить синиe и оранжевые участки?» — спросите Вы. Чтобы выделить группу объектов, необходимо выбрать этот инструмент и, зажав ЛКМ (левую кнопку мыши) потянуть в нужную сторону, чтобы захватить весь участок изображения. Это будет выглядеть:

 

Direct Selection Tool

Отличия этих инструментов можно увидеть сразу, как только вы выделите все изображение по тому же методу, выбрав инструмент DST:

direction selection tool в иллюстраторе

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

редактирование изображения в иллюстраторе

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

Также при помощи DST мы можем изменить форму объекта, потянув за опорные точки. Если честно, это мне еще ни разу не понадобилось, но это нужно знать, чтобы потом не пугаться этого.

Если деформировать или изменять объект не требуется, то используйте всегда Selection Tool

Type Tool

TT — инструмент по редактированию текста. Одна из самых популярных функций при работе с макетом. При помощи этого инструмента можно узнать всю информацию о шрифте.

Давайте рассмотрим верхнюю панель инструментов, которая появляется при работе с текстом.

Текст в иллюстраторе

По информативности она ни чем не отличается от Photoshop. Единственное, могут возникнуть трудности с тем, чтобы увидеть значение line-height для шрифта, отступы между буквами и тд. Чтобы найти всю информацию о шрифте, достаточно кликнуть на Character и возникнет выпадающее окно, как на скрине.

Line Segment Tool

LST — инструмент, позволяющий рисовать линии. Может понадобится на случай отрисовки простейших иконок. Работа с этим инструментом не отличается от работы в Photoshop.

иллюстратор для верстальщиков

Rectangle Tool

RT — инструмент для создания простых фигур. Инструменты схожи с инструментами Photoshop. Отличие есть в работе с прямоугольником с закругленными углами. Работа с «закруглением» производится также как и в инструменте Direct Selection Tool.

illustrator frontend developer

 

Eraser Tool

ET — инструмент «Ластик». Используется для редактирования объектов, методом удаления ненужных элементов.

Artboard Tool

AT — это монтажная область, на которой располагаются объекты.

При сохранении иконки или изображения важно проверять, чтобы объект/ы находились на монтажной области. Если он/и будут выходить за пределы — изображение обрежется.

В одном документе Adobe Illustrator может располагаться несколько монтажных областей. Это преимущество, благодаря которому можно увидеть сразу все макеты, не открывая их по одному, как это бывает в Photoshop.

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

Справа кликаете по иконке Artboards и для создания жмем на иконку с названием New Artboard.

 

Чтобы изменить размер монтажной области, важно, чтобы слева, в панеле инструментов у вас стоял активным инструмент Artboards. Если это сделано, то далее смотрим вправо вверх и находим подобную панель. Именно тут и можно вписать нужные значения.

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

Fill / Stroke и их стили

Fill и Stroke отвечают за заливку и обводку объекта соответственно. Эти два слова вы могли слышать, если ранее изучали тему об SVG-изображениях. Иллюстратор предлагает 3 варианта того, что можно сделать с Fill и Stroke: задать цвет, градиент или отключить их совсем.

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

Чтобы посмотреть свойства картинки нужно выделить объект инструментом Selection Tool двойным щелчком мыши.

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

Далее двойным щелчком кликаем на инструмент Stoke и мы видим, что он становится поверх Fill — это означает, что инструмент обводки активен, а инструмент заливки — нет.

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

 

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

Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы Как в иллюстраторе сделать 2 страницы

Тоже читают:



Как сделать снимок на ноутбуке asus

Схема регулировки карбюратор солекс

Как сшить подушку смайлик своими руками

Браслеты из бисера своими руками схемы плетения картинки

Электровентилятор системы охлаждения схема подключения