Vectorboom
Уроки / Web дизайн / Comments: 10

Преимущества и особенности создания интерфейсов в Adobe Illustrator

Ярослав Лазунов
27.06.2012
Цель урока

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

Сегодняшняя статья является вступлением перед серией уроков, которые будут посвящены созданию элементов интерфейса в Adobe Illustrator:

Урок Illustrator: Как создать интерфейс медиа плеера.

Урок Illustrator: Как создать переключатели для векторного интерфейса.

Урок Illustrator: Как создать слайдеры для пользовательского веб интерфейса.

Около двух лет назад на рынке появились экраны для мобильных устройств с очень высоким разрешением (resolution), так называемые Retina Display. Такое разрешение соответствует полиграфическому и равняется 300 ppi. В этом случае пиксели становятся чем-то не очень важным для экранной графики, потому, что человеческий глаз их просто не различает. В ближайшее время должны появиться мониторы для стационарных компьютеров с высоким разрешением. Ваш дизайн придется оптимизировать, для отображения на таких экранах. Так, если взять монитор размером 27” и увеличить его разрешение вдвое, то получится почти 15 мегапикселей. В этом случае графический файл, который должен заполнить весь экран, будет иметь гигантские размеры. Существует только одно решение этой проблемы – в скором времени все интерфейсы будут векторными. Рано или поздно вам придется создавать только векторные интерфейсы, так что самое время перестраиваться, если вы до сих пор создавали их при помощи растровых редакторов.

Используя Adobe Illustrator, вы экономите время, так как векторные файлы намного проще редактировать. Кроме того, идеология «объект, а не слой» позволяет вам работать намного эффективнее. Теперь давайте перейдем от общих понятий к конкретным преимуществам и особенностям использования Adobe Illustrator для создания интерфейсов.


Artboards (Монтажные области)

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

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


Пиксельная сетка

Сетка (grid) важна при создании любого интерфейса. Для интерфейсов веб-сайтов используется сетка с шагом 10 px. Для мобильных приложений используется сетка с шагом 8 px. Размеры сетки устанавливаются в диалоговом окне Preferences (Cmd / Ctrl + K)

Объекты интерфейса следует располагать так, чтобы они находились на линиях сетки. Для упрощения этой работы включите режим  Snap to Grid (View > Snap to Grid)


Appearance panel (панель свойств)

Мощнейшим инструментом создания интерфейсов является Appearance panel. С ее помощью к любому объекту можно применять векторные и растровые эффекты в любой последовательности, которые в реальном времени пересчитываются, при изменении формы или размеров объекта.

Для того чтобы применить все эффекты к другому объекту вам просто необходимо взять Eyedropper Tool (I) и скопировать их.

Вы также можете сохранить все свойства элемента как графический стиль и применять его к необходимым объектам.

Ко всем примененным эффектам вы имеете доступ из Appearance panel, поэтому вы можете изменить их в любое время.

Вы также можете применять всевозможные эффекты к тексту, который при этом остается редактируемым объектом.


Градиентные заливки

Основным видом заливок, которые применяются при создании интерфейсов, являются градиентные заливки. Вы можете управлять градиентами при помощи Gradient Annotator.

Кроме того, вы можете изменять прозрачность слайдеров градиента, что позволяет вам работать на много быстрее, не используя Opacity Masks.


Четкое пиксельное изображение

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

Для того чтобы увидеть, как будет выглядеть ваша работа в растровом виде выберите Pixel Preview mode (View > Pixel Preview). Такой режим доступен начиная с Adobe Illustrator CS5.

Размытые края объектов выглядят так по причине того, что объекты имеет координаты и/или размеры, которые не кратны целому числу пикселей.

Для того чтобы ликвидировать этот недостаток используйте только целые значения для координат и размеров объектов, а также используйте режимы привязки к точке (Snap to Point) и привязки к сетке (Snap to Grid) в процессе создания объектов, как это было указанно выше.

Вы также можете использовать для этих целей выравнивание по пиксельной сетке (Align to Pixel Grid) в  Transform панели.

Однако эта функция не пригодна для применения к текстам которые переведены в кривые и объектам, которые содержат динамические функции, например Dynamic Corners (VectorScribe plugin). В случае с текстом мы получим неприемлемое искажение формы букв.

В случае с динамическими объектами мы получим потерю их динамического статуса (Dynamic status)


Symbols

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


9-Slice Scaling

Функция 9-Slice Scaling  в Adobe Illustrator CS5 позволяет устанавливать области символа, которые не будет растягиваться  в процессе изменения его размеров. Если мы изменим ширину кнопки без использования этой функции, мы получим деформированный текст и форму кнопки, как это показано на рисунке ниже.

Перетащим кнопку в Symbols panel и поставим птичку "Enable Guides for 9-Slice Scaling” в диалоговом окне.

При редактировании символа мы увидим четыре пунктирные направляющие, ограничивающие область, которая будет растягиваться (области обозначенные цифрами 1-8 растягиваться не будут)

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

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

 

Автор: Ярослав Лазунов

Оригинал урока на Английском языке: AstuteGraphics

 

Будьте всегда в курсе свежих новостей о векторной графике, новых уроков работы в Adobe Illustrator, статей и интервью посвященных графическому дизайну. Команда RU.Vectorboom работает для Вас!

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.