Размножение визитки на А3 формате. Монтажные области в Adobe Illustrator

Всем привет! А у нас очередной урок Adobe Illustrator, в котором я расскажу и покажу плюсы использования нескольких монтажных областей. Если у вас не самая старая версия иллюстратора, то вы наверняка заметили, что помимо слоёв, там есть ещё одно измерение, которое называется Artboards. Монтажные области, рабочие области, артборды. Можно по разному их называть. Выглядит это всё как-то так.

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

Этот урок Adobe Illustrator я решил разделить на несколько частей. В самом начале разбираются основные моменты по работе с монтажными областями, которые будут полезны начинающим. А в конце показано, как с нескольких Artboards сохранить иллюстрации для микростоков.

Создание новых Artboards

По умолчанию в иллюстраторе одна рабочая область. И когда вы делаете новый документ, он может выглядеть вот так.

Как вы уже поняли, за рабочие области отвечает панель Artboards . И первый способ добавить в векторный файл новый артбоард, это нажать на кнопочку New Artboard .

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

New Artboard - создать новую, это понятно.
Duplicate Artboards - создать копию артборда и всего, что на нём лежит.
Delete Artboards - удалить, это тоже понятно.
Delete Empty Artboards - удалить пустые артборды.
Convert to Artboards - может превратить квадрат в рабочую область.
Artboards Options - настройки рабочей области, можно поковыряться.
Rearrenge Artboards - распределение, можно настроить порядок и положение.

В общем, панель Artboards обладает поистине мистическими способностями по искажению и преломлению векторного пространства в Adobe Illustrator .

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

Редактирование Artboards

Но самым настоящим властелином мира, вы почувствуете себя, когда попробуете инструмент Artboard Tool (Shift+O) . Его мощь несокрушима, и позволяет проникнуть сквозь ткань векторного бытия, чтобы управлять артбордами.

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

Также хочу вам рассказать об одной весьма полезной команде, которая приклеивает рабочую область к уже нарисованной иллюстрации. Это очень удобно, когда надо подогнать размеры артборда к готовой картинке. Просто выделите то, что нарисовали, и идите Object > Artboards > Fit to Selected Art . Текущая рабочая область изменит свои размеры, встав точно по краям выделенной иллюстрации.

Сохраняем серию иллюстраций из одного файла

Итак, хватит баловаться, давайте перейдём к делу. Для примера я взял файл, в котором три монтажных области. На первой новогодний фон, а на второй и третьей редизайны этой картинки с шариком и ёлочкой. Размеры у артбордов 1200x1200 px .

Сначала давайте сделаем из всего этого EPS-ы для стоков. Идём File > Save as .

В появившемся окошке пишем имя, понятное дело. Потом выбираем тип EPS . И обязательно ставим галочку Use Artboards . Именно после этого, иллюстратор будет учитывать рабочие области в файле. Там рядом ещё есть пипка All и Range - то есть можно даже выбрать какие именно рабочие области сохранять, а какие игнорировать. Так как мне нужны все, я оставил как есть All . В итоге жмём Сохранить. Далее в следующем окне с настройками EPS ставим как обычно EPS-10 и жмём OK . Иллюстратор попыхтит чуть-чуть, и мы получим следующие файлы.

При этом christmas-background.eps это векторный файл, который включает все три фона. Можете считать его так называемым исходником. Но так как в EPS-10 несколько рабочих областей не поддерживается, то в итоге все три картинки будут лежать на одной рабочей области. Поэтому в качестве исходника лучше всё-таки сохранить отдельно вектор в формате ai вашей текущей версии Adobe Illustrator .

Файлы с цифрами на конце 01, 02 и 03, это вектора с отдельными рабочими областями. Если открыть, например, christmas-background-01.eps , то там будет только одна рабочая область номер 1 с рождественским фоном. Таким образом Adobe Illustrator разбил общий файл на несколько EPS . По одной рабочей области в каждом.

Но вернёмся к нашему файлу с несколькими артбордами, так как нужно ещё сделать растровое превью для всех картинок. Для этого идём File > Export .

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

С каждой рабочей области иллюстратор сделал экпорт в отдельный растровый JPEG . Цифры, как и в случае с EPS , соответствуют номерам артбордов. Размеры у JPEG в моём примере вышли 5000x5000 px , разрешение 300 dpi . В общем, вкусное и душистое растровое превью, которое подойдёт практически для всех микростоков. Так что можно брать пары файлов JPEG и EPS с одинаковыми названиями и смело загружать. Если только конечно ваши вектора подготовлены в соответствии с техническими требованиями микростоков. Подробнее об этом можно почитать вот тут.

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

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

Есть достаточно большое количество ситуаций, в которых работать с растровым редактором нерентабельно. Если на макете нет и не придвидится необходимости в слоевых масках, а есть только прямоугольники, линии, несколько картинок и текст - создать такой макет в Illustrator будет намного проще и быстрее. А уж если у нас не просто прямоугольники, а прямоугольники с круглыми уголками, то нас просто-таки спасёт Effect > Stylize > Round Corners… (хотя и в Photoshop можно создавать уголки с легко изменяемым радиусом, но об этом в другой раз). Средние и большие пиктограммы тоже удобнее рисовать в векторе.

Где больной?

В теории всё просто замечательно и радужно, но почему что же на практике? На практике мы имеем неизбежное преобразование векторного изображения в растровое. И вот на этом этапе заложена мина. Мина под названием «сглаживание». При работе над макетом в Illustrator нужно соблюдать хирургическую точность. Как только координаты точки перестают быть целыми числами мы теряем чистоту линий. Появляется грязь.

Проблема номер раз заключается в том, что в режиме отображения, установленном по умолчанию, мы видим картинку в максимальном качестве пригодном для полиграфии, а у монитора оно намного ниже. Для того, что бы видеть, как всё будет выглядеть после растеризации - включаем режим Pixel Preview (View > Pixel Preview ). Если у вас есть второй монитор, или если есть один, но очень широкий - создаём копию окна (Window > New Window ) и задаём разные режимы просмтотра для них.

Я уже упоминал про хирургическую точность - открываем палитру Transform и проверяем, что бы у нас всегда были целые значения для координат объекта и его размеров. Но это ещё не всё. Предположим, что мы создали прямоугольник размером 15х25 пикселов и расположили его в точку 150:200. Будут ли при этом чистота на границе? В состоянии по умолчанию - нет, потому что у нас нечётные значения ширины и высоты. Поэтому переводим точку привязки координат из центра в левый верхний угол. Вот теперь полный порядок.

upd : кроме того, необходимо включить привязку к пикселам (View > Snap to Grid ) и задать особые настройки в Edit > Preferences :

• Категория General: Keyboard Increment > 0.5px
  
• Категория Units & Display Performance: Units > General > Pixels .

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

Линий нет, даёшь объекты

Следующая проблема - контуры толщиной в один пиксел почти всегда получаются «грязными». Причина кроется в том, что по умолчанию обводка рисуется в обе стороны от контура объекта. Выходов два: в Illustrator CS3 и выше задаём параметру Align Stroke значение «outside», либо вообще не пользуемся обводкой и создаём контуры через Оbject > Path > Offset Path . Второй способ лучше, потому что в этом случае мы получаем новый объект, у которого можем легко двигать опорные точки. Но теряем возможность быстро поменять толщину линии.

Иногда у Illustrator ломается внутренний калькулятор и в этом случае точно выставленные линии начинают двоить. Лекарство простое и неудобное - увеличиваем масштаб, ставим рядом два окна, одно со стандартным режимом просмотра, второй - Pixel Preview. В первом аккуратно двигаем опорные точки, а по второму контролируем процесс.

Итак, дорогие дизайнеры! Создавая захыватывающие дух макеты, не забывайте о том, что потом ваш макет будут мучать и резать. Что бы макет не изуродавали, подготовьте его ко взрослой жизни - проверьте все детали при большом увеличении в режиме Pixel Preview. При необходимости внесите коррективы.

Таки всё плохо, что делать?

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

Для исправления ситуации прежде всего избавляемся от обводок, нам нужны только объекты. Для этого делаем так: Object > Expand. После чего выравниваем всё с точностью до пиксела.

Итого

Делать макеты в Issustrator можно. Но очень важно уметь правильно их готовить. Как в изысканой кухне - прежде всего нужно соблюдать чистоту и точность.

• Обращение верстальщика к дизайнеру (правильно, но спорно, чёрт возьми);
• Создание макета страницы в Illustrator и его вёрстка ;
• Настройка Illustrator для создания макетов сайтов (скринкаст, eng)

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

Второй поворот заключается в том, что я хочу, чтобы фон уменьшил непрозрачность, но я хочу, чтобы текст был непрозрачным на 100%.

Таким образом, текст всегда будет одинакового размера и сплошного белого цвета, скажем, на 80% непрозрачном оранжевом фоне. «Заполнение» (вставка?) По всем четырем сторонам текста будет постоянным относительно текста. Все, что изменится, - это общая ширина текстовой строки, соответствующая общей ширине «окна».

Я рассмотрел эти два ответа

который, кажется, решает эту проблему, но не совсем. Я использую Illustrator CS6.

Ответы

Скотт

Что касается подгонки текстовых полей к тексту.. см. Скрипт в вашей первой ссылке на вопрос. Это единственный метод, который я знаю.

Намного проще решить проблему с заполнением.

• выделите текст области с помощью инструмента выделения (черная стрелка)
• Добавить новую заливку через панель «Внешний вид»
• установите цвет заливки и перетащите заливку под элементом «Символы» на панели «Внешний вид».
• Выделив заливку на панели «Внешний вид», выберите «Эффект»> «Преобразовать в фигуру»> «Прямоугольник» и введите нужные значения. Затем нажмите ОК
• Щелкните индикатор «Непрозрачность» под заливкой на панели «Оформление» и введите значение «Непрозрачность», которое необходимо заполнить. Это не изменит текст.

Настройте это один раз, затем перетащите все это на панель графических стилей. Если вам необходимо применить этот же внешний вид, просто выберите поле «Текст области», а затем щелкните стиль на панели «Стиль графики».

Обратите внимание, что фон относится к текстовому полю области... если размер блока изменится, фон тоже будет изменен.

Добавлено после просмотра того, что скрипт делает с внешним видом.

Скрипт убивает внешний вид. Итак, вот что я бы сделал...

Настройте графический стиль и сохраните его.
Подготовьте текстовое поле «Область» и подготовьте его к сценарию.

Теперь создайте новое действие и начните запись...
- запустить скрипт
- щелкните по графическому стилю
Остановить запись.
Назначьте клавишу F для действия.

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

Предостережение....

В Illustrator есть и была ошибка, связанная с действиями сценариев . Действие не сохранит шаг сценария, если вы выйдете из Illustrator. Поэтому каждый раз, когда вы запускаете Illustrator, вам нужно будет снова настраивать действие. Это раздражает, отнимает много времени и боли. Однако воссоздание действия каждый раз, когда оно необходимо, может быть намного быстрее, чем ручное манипулирование текстовыми полями и внешним видом.

Брайан Д

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

Скотт

@BrianD ааа, я вижу, это так. Я обновил свой ответ выше.

Брайан Д

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

Скотт

Рад, что смог помочь:)

Любой графический дизайнер знает, что Adobe Illustrator является одним из лучших векторных графических редакторов. Новички поначалу жалуются, что работать с программой не слишком удобно, но вся ее мощь раскрывается позже, когда дизайнер начинает понимать, как все работает. С помощью Adobe Illustrator можно реализовать практически любую графическую идею и именно поэтому им сегодня пользуются миллионы дизайнеров по всему миру. Одной из причин, объясняющих невероятную востребованность Illustrator, является его функционал, программа располагает множеством замечательных инструментов, которые существенно облегчают работу. Некоторые из них очень просты, другие освоить будет немного сложнее, но без знания особенностей их работы не сможет обойтись ни один успешный дизайнер или иллюстратор.

Не имеет значения, что именно нужно создать с помощью Adobe Illustrator – без инструментов обойтись не удастся. Они избавляют пользователя от рутинной работы и существенно экономят время. К примеру, если нужно создать некий эффект в иллюстрации, это можно сделать так: начать с самого начала и добиться нужного результата, совершив, допустим, 100 действий. Но если знать, как именно работает тот или иной инструмент, тот же самый эффект можно создать, пару раз кликнув мышкой. Однако в данной статье мы не будем рассматривать разные приемы и хитрости, позволяющие добиться потрясающих эффектов. FreelanceToday предлагает вашему вниманию 10 инструментов Adobe Illustrator, о которых должен знать каждый дизайнер.

RULER (ЛИНЕЙКА)

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

По умолчанию линейки в Illustrator не отображаются. Чтобы сделать их видимыми, нужно нажать сочетание клавиш Ctrl+ R или найдя их в меню View> Rulers> Show Rulers (Показать линейки). Появятся две линейки: сверху и слева.

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

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

Как и многие другие инструменты Illustrator, Blend Tool можно использовать для решения самых разных задач. С его помощью можно создавать сложные паттерны и текстуры или, как и следует из названия инструмента делать плавные цветовые переходы между двумя объектами.

Blend Tool находится в панели инструментов, также его можно вызвать из меню Object> Blend . В открывшемся диалоговом окне можно установить необходимые параметры перехода. Это очень удобный инструмент, который обязательно должен присутствовать в арсенале любого дизайнера.

OFFSET PATH

Часто бывает нужно создать увеличенную копию уже существующего объекта или увеличить величину контура объекта. Можно добиться этого несколькими способами и новички часто используют наиболее очевидные способы, совершая множество лишних движений. Между тем в Illustrator имеется очень полезный инструмент, которой называется Offset Path , то есть параллельный контур.

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

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

Найти инструмент можно в разделе Object> Path . Объект при этом должен быть выделен, иначе не появится диалоговое окно для изменения параметров параллельного контура.

THE CLIPPING MASK

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

Что такое обтравочная маска? Это объект, который маскирует ненужные области другого объекта, поэтому в результате видимым остается то, что лежит внутри пределов обтравочного контура. Самое очевидное использование Clipping Mask – это кадрирование изображений, но при достаточных навыках этот инструмент позволяет очень быстро создавать нужные фигуры.

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

Инструмент Clipping Mask также находится в разделе меню Object .

ARTBOARDS PANEL

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

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

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

LAYERS PANEL

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

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

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

PATHFINDER PANEL

В панели Pathfinder можно найти четыре режима Shape Mode , с помощью которых можно создавать новые фигуры, путем слияния, пересечения или исключения объектов. При достаточном навыке использование любого режима позволяет очень быстро создать объект нужного размера и формы. Как уже говорилось, очень многое в Illustrator можно сделать с помощью инструмента Clipping Mask, обтравочные маски в умелых руках являются очень эффективным средством. Но если нужно создать совершенно новую форму, то это можно легко сделать в панели Pathfinder.

Пользователю доступны режимы Unite, Subtract, Intersect и Exclude, с помощью которых можно создавать новые интересные формы. Со временем дизайнер выбирает для себя наиболее удобный режим, которым и пользуется в дальнейшем.

ALIGN PANEL

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

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

По умолчанию несколько опций панели скрыты, чтобы сделать их видимыми, нужно нажать маленькую стрелочку и включить Show Options . В результате появится дополнительный функционал Distribute Spacing , с помощью которого можно будет точно позиционировать два или более объектов на заданном расстоянии друг от друга.

Для того, чтобы понять, как работает инструмент Grid (Сетка), нужно сначала эту сетку вывести на дисплей. Для этого нужно зайти в раздел меню View и найти пункт Show Grid .

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

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

SNAP TO GRID / PIXEL GRID

Сетка сама по себе является сильным инструментом, но как только нужно создать макет, где объекты должны быть расположены с точностью до пикселя, у новичков могут возникнуть проблемы. Однако в Illustrator есть решение этой проблемы: Snap to Grid / Pixel Grid (Привязка к сетке/пиксельная сетка).

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

Благодаря использованию Snap to Grid / Pixel Grid можно создавать невероятно четкие изображения, которые выглядят очень профессионально. В этом нет ничего необычного, так как все объекты привязаны к пиксельной сетке и, что немаловажно, все они создавались, изначально имея заранее определенные размеры в пикселях.