Фирменный знак SuperMark'а Блог
Владимир Никишин

Adobe Illustrator для веб-дизайнера 1) Введение

Adobe Illustrator для веб-дизайнера 1) Введение

Этой заметкой я открываю цикл материалов об использовании Adobe Illustrator в веб-дизайне.

Содержание серии

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

  1. Введение
    1. 💾 Файлы, монтажные области
    2. 🗓 Cлои
  2. 🗜 Трансформация объектов
    1. Перемещение, выравнивание и распределение объектов
  3. 🎼 Линии и сетки
  4. ➰ Контуры
    1. 🖋 Перо и инструмент «Кривизна» (Curvature)
    2. 👱‍♀️ Правила красивых контуров
  5. ✍️ Обводка
  6. 🎨 Цвет, заливка
  7. 🔶 Фигуры
  8. 🔠 Текст
  9. 🏰 Векторная графика: техники рисунка
    1. 💪 Shape Builder Tool (Создание фигур) — ⇧M
    2. ✏️ Рисование фигур линиями и инструментом быстрой заливки
    3. ❤️ «Оформление» (Appearance) — палитра и раздел палитры «Свойства»
    4. 📐 Направляющие и линейки
    5. 🚶🏻‍♂️ Переходы (Blend)
    6. 🎁 Перспектива
    7. 🎩 Cтили графики
    8. 🔣 Символы
    9. 🏀 Сетчатые объекты (meshes)
    10. 👩 Ресницы, брови, волосы
    11. 🖌 Кисти и ластик
    12. ☀️ Распределение объектов по кругу
  10. 🦊 Советы и хитрости
  11. 🛠 Инструменты+
  12. ⌨️ Горячие клавиши
  13. 🖨 Печать

Назначение и уникальные функции

По моему мнению, по ряду позиций Illustrator проигрывает в удобстве Sketch’у: заливка, работа со слоями и монтажными областями, экспорт в SVG... Поэтому использую AI только для тех задач, для которых он по-настоящему незаменим.

  • Контуры векторных иллюстраций, особенно сложные с предварительной заливкой. Уникальные инструменты и функции Illustrator’а для этого, основного этапа работы над графикой:
    • Shape Builder
    • Скругление углов произвольного контура
    • Произвольные направляющие
    • Инструмент толщины линий (Adobe добавил его еще в бывший Flash — Animate)
    • Perspective Grid
    • Пользовательские кисти, используемые в частности, для рисования бровей, ресниц, волос, меха.
      Заливаю контуры я плоскими цветами, подбирая гармоничные сочетания в «Каталоге цветов». Но градиенты, тени и т.п. накладываю уже в Sketch’е.
  • Искривленные градиенты с помощью переходов.
  • Создание полноцветной графики для анимации в After Effects.
  • Создание полноцветной графики для печати.
  • Сложные декоративное оформление надписей — для этой цели использую палитру «Оформление».

Общий алгоритм

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

Настроить нужные сетки или произвольные направляющие.

Preferences ➜ Guides & Grid. Базовая разлиновка. Например, Gridline every 8px, subdivision 8.

Для иконок создать сетку границ и базовых фигур.

  • Разделить линиями монтажную область пополам по вертикали и горизонтали.
  • Провести диагонали из угла в угол.
  • Начертить границы содержимого: квадрат, круг, вертикальный и горизонтальный треугольник.
  • Добавить вдвое меньший круг или круги по золотому сечению.
  • Выделить всё. View ➜ Guides ➜ Make Guides (⌘5)

Сделать направляющие из фигур

Другой вариант сетки иконок — квадрат разделенный 4×4 и рекурсивные квадраты, вписанные в круги

Вариант сетки иконок

  • Для дизайн-макета сделать сетку базовой линии, колонки и модульную сетку с помощью Rectangle Grid — см. п. «Линии и сетки».
  • Для иллюстрации — сетку третей, четвертей, золотого сечения, сетку Эндрю Лумиса или какую-нибудь экзотическую сетку. Можно добавить круги по золотому сечению — для разработки геометрических деталей композиции.

Сетка по Эндрю Лумису Произвольная сетка

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

Направляющие для логотипа Шрифтовые направляющие Шрифтовые направляющие

Если нужно, скопировать и вставить сетки / направляющие в другие области (⌘F).

  • View ➜ Guides ➜ Lock Guides
  • Переименовать слой в guides
  • Добавить слои для графики

Создать палитру проекта, сохранив в образцы необходимые цвета, как глобальные. Работать с образцами в Illustrator’е удобнее, чем выбирать цвет пипеткой или настраивать в процессе в палитре.

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

Комбинировать фигуры с помощью Shape Builder Tool.

Инструмент «Создание фигур» Отрисовка по направляющим

Иллюстрации выполнять в более свободной технике.

  • Прямые линии и мелкие дуги рисовать пером и «кривизной», отключив привязку к пиксельной сетке, минимизируя количество опорных точек.
  • Но включать привязку к пиксельной сетке, когда нужно провести четкие горизонтальные и вертикальные линии, нарисовать прямоугольники.
  • Большие дуги рисовать овалами. Там где можно — по кругам-направляющим в пропорциях золотого сечения. Также круги-направляющие гармонической пропорции использовать для разработки геометрических деталей композиции. Иллюстрация для SuperMark'а
  • Комбинировать фигуры либо Shape Building Tool, либо эффектами обработки контуров. Палитра «Обработка контуров»

☝️🧐 Чтобы посмотреть на иллюстрацию без рамок монтажных областей их можно скрыть — ⇧⌘H

☝️🧐 Все необходимые свойства выделенного объекта можно изменить в панели свойств. В том числе — прозрачность и режимы наложения.

Панель свойств

Когда этого не достаточно, использовать дополнительные панели: «Оформление», «Градиент», «Символ» и т.д.

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

Скругление углов контура Кнопки смены типа опорных точек

Перед экспортом в SVG оптимизировать контуры:

  • Object ➜ Merge Transparency
  • Object ➜ Path ➜ Clean Up
  • Object ➜ Path ➜ Simplify (осторожно!)

Комментарии