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

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

Кнопки, о которых вы должны знать

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

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

Selection Tool

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

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

Direct Selection Tool

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

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

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

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

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

Type Tool

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

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

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

Line Segment Tool

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

Rectangle Tool

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

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. Чтобы убрать заливку я должна нажать на перечеркнутый квадрат снизу.

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

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

Создадим новый документ шириной 960px и произвольной высотой. Я выбрал такую ширину, потому что, судя по посетителям нашего сайта , у большинства из них немаленькие мониторы.

Не забудьте выставить Color Mode в RGB .

Шаг второй

Чёрные границы на картинке ниже обозначают размеры создаваемого нами документа (область между ними ещё называют artboard ). Мне нравится помещать скриншот с чистым окном браузера в качестве подложки: гораздо легче воспринимать страницу такой, какой она должна получиться.

Шаг третий

Следуюший шаг очень важен. Вы, разумеется, можете выбрать произвольный масштаб (Zoom ) и даже изменять его в процессе работы, но имейте в виду, что текст на странице должен быть удобочитаемым при масштабе 100% (1:1). Для изменения масштаба вы можете использовать отмеченное ниже поле.

Шаг четвёртый

Вы можете скрывать и отображать границы рабочей области тогда, когда вам это нужно. Для её сокрытия вам нужно выбрать команду View > Hide Artboard . Есть только одна проблема: такая операция занимает слишком много времени. Поэтому, советую вам использовать специальное сочетание клавиш для этого: Command + Semicolon (;) .

Шаг пятый

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

Шаг шестой

Когда вы будете уверенным в разметке страницы, вы можете удалить прямоугольники, заменив их направляющими (Guide lines ).

Шаг седьмой

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

Шаг восьмой

Доведите шапку страницы до совершенства, добавив в неё изображения, иконки.

Шаг девятый

Я решил добавить голубого цвета в шапке.

Шаг десятый

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

Шаг одиннадцатый

Существует несколько способов подготовки дизайна для WYSIWYG-редакторов (например, Adobe Dreamweaver). Первый предполагает использование слайсов (Slice ). Их можно создать с помощью тех же направляющих или выделением. Сделаем с помощью направляющих: перетащим и расположим их вокруг каждого элемента-ссылки на странице. В нашем примере, все четыре иконки являются ссылками: ведут на отдельные страницы на нашем сайте.

Шаг двенадцатый

Когда вы разметите направляющими нужные блоки на странице, можно превратить их в настоящие слайсы. Для этого используем команду Object > Slice > Create from Guides . Я заметил, что Illustrator может не сделать соответствующие слайсы по первому требованию, поэтому я повторяю эту операцию три или четыре раза. Когда всё будет готово, появятся чёрные пронумерованные блоки.

Шаг тринадцатый

Для сохранения сделанных слайсов, используйте File > Save for Web & Devices... . Выделяйте с помощью Slice Select Tool (k) нужные для сохранения слайсы. Вы можете выбрать несколько таких блоков, зажав Shift . На панели справа выберите нужные вам параметры сохранения изображений. JPEG, например, больше подходит для изображений с несколькими цветами, GIF - для изображений с маленьким числом цветов и большими однотонными областями, а PNG - для сохранения прозрачности в изображениях (однако же, вам предстоит встретиться с чудаком по имени Internet Explorer в случае использования последней). Выберите нужное вам качество (можете поиграться с настройками) и нажимайте Сохранить .

Шаг четырнадцатый

Выберите место для сохранения файлов. Я выбрал Рабочий стол . Не забудьте выставить в поле Format значение Images Only .

Шаг пятнадцатый

На вашем рабочем столе появится папка с именем Images . Внутри - слайсы, которые теперь стали изображениями.

Шаг шестнадцатый

Очистите все направляющие командой View > Guides > Clear Guides . Далее, нарисуйте направляющие вокруг тех объектов, которые вы намерены разрезать сейчас. При наведении указателя на меню, оно должно менять свой цвет. Вам нужно разрезать его для всех используемых вами оттенков.

Шаг семнадцатый

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

Шаг восемнадцатый

Назовите изображения как вам угодно. Если вам не хочется этого делать, их имена будут выбраны автоматически.

Шаг девятнадцатый

При сохранении изображений в ту же папку, что и в прошлый раз, она будет содержать и новые, и старые изображения. Не забудьте повторить шаги 16-18 для других состояний кнопок навигации.

Шаг двадцатый

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

Другой метод создания слайсов заключается в выделении объекта и выполнении команды Object > Slice > Create from Selection . Вы можете использовать любой способ для создания слайсов, какой больше нравится.

Шаг двадцать первый

В определённых случаях вам не понадобится написанный прямо в Illustrator текст, поэтому вы его можете спокойно удалить (до экспорта слайсов).

Шаг двадцать второй

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

Крайний шаг

Посмотрите ещё раз на то, что у нас получилось.

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

Содержимое:

Брошюра - это кусок бумаги с размещенными на нем фотографиями, графикой и текстовой информацией. Существует много типов брошюр, например, Z-образные, у которых 4-6 полос (страниц), складывающиеся пополам, у которых 4 полосы, и П-образные, у которых 6 полос. В качестве примера в этой статье мы будем создавать П-образную брошюру, полностью готовую к печати. Следуя указаниям, узнайте, как создать П-образную брошюру с использованием Adobe Illustrator CS5.

Шаги

1 Подготовьте файл, готовый к печати.
- Создайте документ формата А4 (29.7 x 21 см) и измените цветовой режим на CMYK. Это можно сделать в меню Файл > Цветовой режим документа > Цвета CMYK.
- Добавьте образцы цветов, такие как красный, розовый, зеленый, желтый и темно-желтый. Учтите, что вы можете выбрать и любые свои цвета. Далее перечислены несколько комбинаций цветов, использованных в этом руководстве. Красный: C=0, M=67, Y=50, K=0; Розовый: C=0, M=31, Y=37, K=0; Зеленый: C=59, M=0, Y=33, K=0; Желтый: C=0, M=0, Y=51, K=0; Темно-желтый: C=0, M=7, Y=66, K=0.
2 Теперь вам нужно обозначить линию обрезки с помощью фигуры прямоугольника. Линия обрезки - это линия границы, используемой принтерами при распечатке для определения места, где заканчивается брошюра. Создайте фигуру размерами 29.7 x 21 см и установите цвет линии границы согласно одному из образцов. Поменяйте толщину линии границы на 0.1 pt.
3 Затем разделите всю вашу ширину (29.7 см) на 3 части. Отметьте ваше разделение ориентирами и нарисуйте в этих местах пунктирные линии. Чтобы создать пунктирную линию, используйте инструмент "Линия", а затем щелкните на значок "Пунктирная линия", чтобы сделать вашу линию пунктирной.
4 Добавьте метки обреза документа. Чтобы добавить метки обреза, выделите вашу линию границ или прямоугольную фигуру, перейдите в пункт меню "Эффекты" и нажмите на "Метки обреза".
5 Сгруппируйте все элементы. Выделите все (Ctrl+A), щелкните правой кнопкой мыши и нажмите на "Группировка".
6 Сделайте копию этой группы и переименуйте их в “Передняя” “Внутренняя. ” Чтобы сделать копию, перетяните группу на иконку "Создать новый слой".
7 Создайте содержимое документа. Теперь вы закончили подготовку брошюры, пора добавить редактируемое содержимое. Начните с создания фона, используя фигуру прямоугольника и выбирая цвета из ваших образцов. Убедитесь, что ваша фигура прямоугольника немного выходит за пределы меток обреза.
8 Добавьте содержимое для передней, задней и внутренней полосы брошюры (или “Передней” группы). Создавайте содержимое, комбинируя фотографии, графику и текст. Вы можете создавать внешний вид согласно приведенной иллюстрации или придумать собственный.
9 И наконец, пришло время добавить содержимое на левую, среднюю и правую внутреннюю полосы брошюры (или на “Внутреннюю” группу). Как только вы это сделаете, брошюра будет готова.
10 Вот пример окончательного варианта брошюры в сложенном виде.

Подготовка макета многостраничных изданий (брошюр, каталогов) - трудоемкий процесс, в который входят:

Создание макета (адаптация элементов фирменного стиля под формат издания, компоновка заголовков, текста, иллюстраций и подписей к ним, шрифтовое исполнение);
Проверка, редактирование и корректура;
Допечатная подготовка.

Как избежать ошибок при создании макета? На что стоит обратить внимание и как превратить брошюру в эффективный маркетинговый инструмент?

О чем речь:

Принципы многостраничной верстки

Единый стиль . Элементы макета (иллюстрации, текст, заголовки) должны быть оформлены в едином стиле на всех страницах брошюры.

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

Удобство чтения также зависит от длины строки, размеров полей.

Формат полосы можно определить расчетным методом, при помощи специальной графической схемы или пользуясь отраслевыми стандартами, предлагающими оптимальные размеры полосы для каждого формата (ОСТ 2962-86. «Издания книжные и журнальные. Основные параметры издательско-полиграфического оформления»).

Подготовка макета брошюры в Corel Draw

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

♦ Нужно, чтобы количество страниц брошюры было кратно 4 (8, 12, 16 или 24 страницы). Все страницы в документе Corel Draw идут по порядку:

1 страница — лицевая сторона брошюры,
2 страница в Corel Draw - 1-ая страница брошюры,
3 страница в Corel Draw - 2-ая страница брошюры,
Последняя страница документа Corel Draw - задняя сторона брошюры.

♦ Проверяем формат брошюры

На панели инструментов в верхнем левом углу указан формат вашего макета и параметры (длина и ширина) в мм.

В нашем примере: А6, 105*148 мм.

♦ Проверяем все ли элементы переведены в цветовую модель CMYK.
Цветовая модель RGB - обычная модель для экранов, но не подходит для печати.

♦ ♦ Проверка цветовой модели

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

♦ ♦ Перевод цвета в CMYK

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

Хотите узнать больше о цветовых моделях?

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

♦ ♦ Как избавиться от CMYK255

CMYK255 - цветовая модель ранних версий Corel Draw, может появится из-за открытия старых файлов, использования клипартов, импортирования файлов из Adobe Illustrator. Для печати она недопустима. Может вызвать серьёзные ошибки при цветоделении.

Если Вы помните, какие именно объекты вставлялись из файлов старых версий (до 9 версии включительно) или из 15 версии Corel, можно попробовать удалить эти объекты и еще раз проверить сведения о документе.

Радикальным способом борьбы со CMYK 255 является перевод всего макета в RGB. Закрыть файл, открыть его и перевести в CMYK (способ перевода описан выше).

Недостаток, что цвета после перевода меняют свои числовые значения. Черный становится четырехсоставным, красный, салатовый, желтый… тускнеют.

Поэтому лучше найти только объекты CMYK 255, скопировать в новый документ и уже в новом документе переводить в RGB, затем в CMYK, а потом перекрашивать изменившиеся цвета (с помощью поиска и замены цвета).

♦ Переводим шрифты в кривые

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

Как избежать проблемы со шрифтами:

Отправить в типографию вместе с файлом макета набор используемых шрифтов;
Преобразовать файл в формат PDF;
Перевести шрифты в кривые.

Чтобы «закривить» текст, нужно его выделить, кликнуть правой кнопкой мыши и выбрать Преобразовать в кривую или воспользоваться быстрой командой Ctrl+Q .

♦ Подготовка вылетов

Кликаем в Corel Draw по вкладке Макет , выбираем Параметры страницы . В пункте Растекание (это и есть название вылетов под обрез в русифицированной версии Corel Draw) указываем наличие вылетов под обрез, мы указываем величину 3 мм и также ставим галочку в пунктеПоказывать область входа за обрез .

Подготовка макета брошюры в InDesign

Формат. При создании документа указываем формат изделия, вылеты под обрез.

Цветовая модель. Переводим изображения в цветовую модель CMYK (выбираем слой с картинкой, идем в Image — Mode—CMYK ) в Photoshop.

Перевод в цветовую модель CMYK происходит в соответствии с вашими настройками (Color Setting). Выбираем Europe General Purpose 3 , профиль Coated FOGRA39 .

Количество страниц. Если в брошюре 12 страниц (кратность четырем неизменна), то она состоит из трех двусторонних разворотов, скрепленных металлическими скобками на сгибе. В свою очередь, эти развороты состоят из попарных (лицо и оборот) шести печатных разворотов.

Переводим текст в кривые. Выделяем текст, нажимаем текст/преобразовать в кривые или ctrl+shift+O.

Может быть полезно

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

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

Для 12-страничной брошюры раскладка будет 12,1,2,11,10,3,4,9,8,5,6,7. Чтобы получить полноценную брошюру, нужно разделить эту последовательность и сначала ввести номера страниц нечетных разворотов в поле Range (Страницы): 12,1,10,3,8,5. После печати следует переложить листы в обратной последовательности или при втором вызове окна Print установить галочку печати в обратном порядке (Reverse Order) и затем ввести номера страниц четных разворотов: 2,11,4,9,6,7.

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

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

После завершения верстки и проверки макета в меню File вызывается команда Print Booklet

Во вкладке Setup выбираются все страницы и в строке Booklet Type должно стоять 2-up Saddle Stitch (это и есть обычная брошюра на двух скрепках), ниже устанавливаются нужные параметры, а также учитываются подсказки программы - иногда необходима коррекция настроек печати через кнопку Print Settings.

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

В результате получается печатный файл с готовыми разворотами.

Использование Adobe Photoshop при подготовке макета брошюры

Для чего нужен Photoshop при верстке макета:

Работа с иконками;
Работа с мокапами;
Создание блюра на заднем бекграунде

Мокап - шаблон, который удобен в «быстром дизайне», в Photoshop представляет собой папку, внутри которой находится смарт-объект. Чтобы вставить свое изображение жмем 2 раза на смарт-объект и вставляем нужный элемент.

В InDesign блюр на фото или объекты накладывать нельзя, здесь на помощь приходит Photoshop. Выделяем нужную область, идем в меню Фильтр, конвертируем в слой для смарт-фильтров (это нужно для того, чтобы можно было сделать тонкие настройки фильтра), выбираем нужный фильтра (например, размытие по Гаусу).

Возвращаемся в InDesign, выбираем картинку и жмем Ctrl+Shift+D, жмем на значек «цепочка» и выбираем файл psd.

Использование Adobe Illustrator при подготовке макета брошюры

InDesign заточен для работы с Illustrator, векторные элементы можно переносить из одной программы в другую просто с помощью команд: ctrl+c, ctrl+v. Дальше все векторные элементы можно редактировать в InDesign.

Для удобства подготовки макета можно связать работу в InDesign и Illustrator. Например, при редактировании векторных элементов (иконки и пр.)

В чем преимущество векторных файлов перед растровыми (например, если добавляем в макет PNG файл с прозрачном фоне)?

При сохранении в некоторых версиях PDF прозрачность PNG файла может «конфликтовать» плашками, которые под ним лежат, в итоге цвета лежащие под прозрачным фоном немного изменят свой оттенок.

При интеграции векторных элементов из Illustrator в InDesign в документе могут появиться цвета в RGB (эта цветовая модель не подходит для печати). В этом случае просто перекрашиваем элементы в цвета CMYK.

В меню удаляем появившееся цвета RGB, при удалении программа предлагает заменить цвет — выбираем цвет из палитры CMYK.

Используем Adobe Illustrator для создания макета страницы.