Опубликовано в Cекреты и Cоветы | 1 комментарий

Скоростной дизайн в Illustrator

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

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

На самом деле — на мой взгляд — Illustrator позволяет решать рутинные задачи лучше и легче, нежели другие программы. Этому и посвящена данная статья.

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

1. Динамические кнопки

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

Скоростной дизайн в Illustrator

Не нужно создавать всё или какую-то часть индивидуально для каждой кнопки; достаточно лишь поменять текст.

При том, что подобные кнопки совсем необязательно должны быть простыми, как на примере выше. И пусть Illustrator обладает меньшим количеством возможностей по созданию эффектов, чем Photoshop, здесь есть такие часто используемые возможности как: тень, текстуры, шум, закругленные углы, внутреннее и внешнее свечение. Бытует мнение, что малое количество «финтифлюшек» позволяет отвлечься от них и сконцентрироваться именно на дизайне, структуре расположения элементов (если это, например, сайт) и подобных вещах.

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

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

Скоростной дизайн в Illustrator

Отдельно хочется рассказать про текстуры. Для их добавления в дизайн есть три основных пути:

использование растровых паттернов или самостоятельных текстур. Для этого откройте нужное изображение при помощи команды File> Place, добавьте на панель Swatches и применяйте как заливку к любой фигуре.
использование растровых фильтров, из раздела Photoshop Effects меню Effects.
применение встроенных образцов-паттернов (добраться до них можно по пути Window> Swatch Libraries> Patterns).

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

Скоростной дизайн в Illustrator

Скоростной дизайн в Illustrator

2. Текстовые стили

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

Скоростной дизайн в Illustrator

Сим целям служат панели Character Styles и Paragraph Styles. Помимо них стиль можно скопировать с одного участка текста на другой при помощи инструмента Eyedropper Tool (I). Просто выделите нужный участок, кликните инструментом по тексту с желаемым стилем… и вуаля!

Скоростной дизайн в Illustrator

3. Глобальные цвета

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

Скоростной дизайн в Illustrator

4. Модульный дизайн

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

Скоростной дизайн в Illustrator

Скоростной дизайн в Illustrator

Скоростной дизайн в Illustrator

Особенно удобно таким образом создавать кнопки, меню, панели навигации по сайту и по страницам, «подвалы» и прочее подобное.

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

Скоростной дизайн в Illustrator

Для создания набора сначала, собственно, добавьте элементы на панель. Потом в выпадающем меню выберите пункт «Save symbol library».

Скоростной дизайн в Illustrator

Набор сохранится как самостоятельный файл в директорию C:\Users\%user_name%\AppData\Roaming\Adobe\Adobe Illustrator CS6 Settings\%language%\x64\Symbols\, где %user_name% – имя пользователя; %language% – язык интерфейса программы, по умолчанию en_US.

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

Открыть набор в программе можно командой Window> Symbols Libraries. Сохраненные вами находятся в пункте «User Defined». Здесь доступны наборы, находящиеся в папке по умолчанию, указанной выше. Если набор лежит в другом месте, то воспользуйтесь пунктом «Other Library» и далее вручную укажите место расположения.

Скоростной дизайн в Illustrator

Примечание переводчика. Если вы не знакомы с символами, то на нашем форуме есть урок, в котором более подробно рассказывается о возможностях символов и принципах работы с ними. тема «Символы в Illustrator. Подробное руководство»

5. Иконочные шрифты

Быстрый, легкий и масштабируемый способ добавления иконок в проекты. Сейчас существует достаточное количество иконочных шрифтов, таких как Awesome или мой Streamline Icons Set. После установки в среде операционной системы их просто использовать при помощи панели Glyph. Откройте эту панель (Window> Type> Glyphs), укажите шрифт и дважды кликните по нужной иконке. Она появится в текстовой строке.

Скоростной дизайн в Illustrator *

6. Колонки CSS-фреймворков

Определите колоночную сетку для вашего любимого CSS-фрейворка. Я использую настройки Bootstrap: ширина артборда 940 пикселей и 12 колонок сетки.

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

Скоростной дизайн в Illustrator

7. Привязка к сетке

Я использую сетку с делением по 10 пикселей. Если точнее, то основные линии сетки проходят каждые 100 пикселей, с делением каждой на 10 частей, то есть те самые 10 пикселей. Найдите удобные для себя значения, включите привязку к сетке (View> Snap to Grid; Shift+Crtl+”) и экономьте время, точно составляя макет.

Скоростной дизайн в Illustrator *

8. Дизайн нескольких экранов

Вы рисуете несколько страниц сайта. Многие элементы на них уникальны, но повторяющихся куда больше: «шапка», меню (в любом положении: верхнем или по какой-то из сторон), стили текста, «подвал», иконки, кнопки (и их состояния). Не нужно рисовать всё заново, просто копируйте.

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

Скоростной дизайн в Illustrator

9. Масштабирование без искажений

Здесь наглядным примером может служить фигура с закругленными углами. Одно дело, если закруглить нужно все углы. Тогда вы просто применяете эффект Round Corners (о нем ниже) и далее можете спокойно модифицировать объект, не беспокоясь о сохранности углов, потому как эффекту всё равно на эти модификации. Он всегда точен. А если у объекта всего два закругленных угла? Каждый раз выделять все нужные точки, что не допустить искажений? Это в новых версиях программы (а именно CC) появились «живые» уголки, с индивидуальным значением скругления для каждого. Все же остальные этого лишены. Так что выделять каждый раз все точки нерационально. Лучше воспользоваться еще одной возможностью символов – 9-сегментным масштабированием.

В продуктах Adobe эта функция уже не нова. Впервые она появилась в Fireworks версии CS3, но работала только для символов. В версии CS4 она превратилась в отдельный инструмент и ее можно было применять уже для любых объектов. В Illustrator функция работает только для символов, в Photoshop ее пока не было и нет.

Доступ к функции осуществляется двойным кликом по символу в одноименной панели. Символ должен быть добавлен на рабочее поле, иначе вы увидите изменения только после добавления. Символ разделяется четырьмя направляющими на 9 частей (отсюда и название). Угловые участки (то есть, если их пронумеровать слева направо и сверху вниз, 1, 3, 7 и 9) неизменяемы. Остальные, соответственно, изменяемы. Перемещая направляющие, вы можете увеличивать или уменьшать неизменяемые области. Тогда объект будет масштабироваться чуть по другому.

Скоростной дизайн в Illustrator

Скоростной дизайн в Illustrator

Скоростной дизайн в Illustrator

Также вы можете посмотреть это видео. Даже если вы не знаете английского, всё довольно понятно по видеоряду.

10. Маски для изображений

Не нужно дополнительно использовать Photoshop для обрезки изображений. Вы можете добавить обтравочную маску, скрывающую все лишнее, непосредственно в Illustrator. Просто откройте изображение (File> Place), нарисуйте нужную фигуру, выделите ее вместе с изображением и нажмите Ctrl+7. Еще одно преимущество в том, что вы не ограничены только прямоугольными областями: применяйте круги, шестиугольники или любые другие более сложные фигуры. Чтобы сделать такое в Photoshop потребуются дополнительные манипуляции с его масками. Конечно, не стоит добавлять фотографию весом в пару мегабайт, ведь на столько же увеличиться размер и исходного файла.

Скоростной дизайн в Illustrator *

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

Скоростной дизайн в Illustrator

11. Шаблоны

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

Скоростной дизайн в Illustrator

Скоростной дизайн в Illustrator

12. Графические стили

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

Скоростной дизайн в Illustrator

13. Обтекание текстом изображений

Такая возможность имеется и в «любительских» текстовых процессорах, вроде Microsoft Word или Libre Office, и в профессиональных программах для верстки, таких как InDesign и QuarkXPress. На анимации ниже наглядно показан принцип работы обтекания в Illustrator. Рисуете прямоугольник примерно по размерам изображения, применяете к нему команду Object> Text Wrap> Make. Если измените размеры прямоугольника, поменяется и расположение элементов текста.

Скоростной дизайн в Illustrator *

14. Индивидуальное скругление углов

В Illustrator CC появляется встроенная в программу возможность изменить скругление каждого угла фигуры в отдельности. При том доступно не только обычное скругление, но и еще два стиля: вогнутый и фаска.

Скоростной дизайн в Illustrator

В более старых версиях такой встроенной возможности индивидуального скругления нет. Приходится прибегать к сторонним скриптам, таким как Round Any Corner. В этих версиях централизовано можно скруглить только все углы фигуры. И сделать это можно при помощи эффекта Effect> Stylize> Round Corners.

Но даже у этой функции есть большое преимущество перед возможностями Photoshop. Хотя, опять-таки в версии CC, и там появилась возможность без ущерба скруглять углы у векторных прямоугольников встроенными способами. Заметьте, только прямоугольников. Эффект Round Corners же можно применить к фигуре любой сложности. Он, как и прочие эффекты в программе, останется редактируемым из панели Appearance, если конечно не применить команду Object> Expand Appearance.

Скоростной дизайн в Illustrator

Заключение

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

Надеюсь, благодаря этому уроку ваша работа станет продуктивнее.