Pixelgene - Ресурсы для веб-дизайнеров. Freebies. Журнал о веб-дизайне

Подборки свежих freebies, мокапы(mock-up), шрифты, иконки, psd, wordpress, статьи о веб-дизайне, лайвхаки для дизайнеров.

  • Freebies
  • Шрифты
  • Статьи
  • WordPress

Подписка

Тэги #

3D AI App Background Branding CSS e-commerce Font Framework HTML Icons JS Landing Mock-up Patterns PSD Retro SVG UI WordPress Веб-сервис Портфолио Статья Тема Типографика Урок Шрифт

14 советов по быстрому созданию интерфейсов в Adobe Illustrator (часть вторая)

27.03.2014 Leave a Comment

Speed_diz
Продолжение статьи «14 советов по быстрому созданию интерфейсов в Adobe Illustrator (часть первая)». Еще 7 советов от Vincent Le Moign по грамотной работе в Adobe Illustrator.

8. Использование нескольких монтажных областей в одном файле

Иллюстратор позволяет использовать до 99 Artboard(монтажных областей) в одном файле что очень удобно! Это позволяет глобально отслеживать изменения на всех макетах страниц если вы изменяете свой символы, текстовые стили или глобальные цвета. А благодаря векторному формату ваш документ не станет во много раз больше и скорость работы не уменьшится. Открыть окно управления Windows > Artboards

artboards

9. Увеличение без искажения

Используй 9 slices scaling tool(название уже страшное)). Допустим ты создал прямоугольник со скругленными углами, но потом ты решил сделать его шире и если просто увеличить его(не пропорционально) то скругления углов станут не пропорциональными. Просто и правельно сделать это так — преобразуй прямоугольник в символ(клавиша F8) и в окне Symbol Options поставь галочку в чек бокс Enable Guides for 9-slice scaling и Align to Pixel Grid. Теперь дважды кликнув по символу появится раскрой по которому и будет теперь масштабироваться наш объект. Таким образом мы получаем масштабируемый граффический интерфейс.

tab

10. Clipping Mask

Нет необходимости обрезать изображения открывая их еще и в Photoshop. Используй Clipping Mask чтобы показывать нужную часть изображения. Создай нужный по форме шейп, затем выдели его и картинку(шейп сверху картинка снизу) нажми Object > Clipping Mask > Make.

masks

11. Шаблоны

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

template

12. Стили графики

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

graphic-styles

13. Обтекание объектов текстом

Обтекание объекта текстом можно сделать автоматическим. Создай на слой ниже форму/рамку вокруг которой ты хочешь что бы текст обтекал твой рисунок, затем сгруппируй их(Ctrl+G/Cmd+G) и нажми Object > Text Warp > Make.

wrapping

14. Индивидуальные углы (в версии Adobe Illustrator CC)

С Illustrator CC вы легко можете менять стиль каждого уголка по отдельности(скругление, фаска итд).

corners

И в заключении видео с примером от автора.

Тег video не поддерживается вашим браузером.
Скачайте видео.

Данная статья является переводом Speed Design with Illustrator

Filed Under: Статьи Tagged With: AI, UI, Урок

Понравилось? Поделись!

Популярно

Создание вертикального ритма на сайте

Создание вертикального ритма на сайте

Набор из 6 шаблонов для презентации мобильного приложения на IOS

Набор из 6 шаблонов для презентации мобильного приложения на IOS

PSD пользовательского интерфейса Edge UI Kit

PSD пользовательского интерфейса Edge UI Kit