Как делать дизайн в иллюстраторе
Перейти к содержимому

Как делать дизайн в иллюстраторе

  • автор:

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

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

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

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

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

  1. Введение
    1. �� Файлы, монтажные области
    2. �� Cлои
    1. Перемещение, выравнивание и распределение объектов
    1. �� Перо и инструмент «Кривизна» (Curvature)
    2. ��‍♀️ Правила красивых контуров
    1. �� Shape Builder Tool (Создание фигур) — ⇧M
    2. ✏️ Рисование фигур линиями и инструментом быстрой заливки
    3. ❤️ «Оформление» (Appearance) — палитра и раздел палитры «Свойства»
    4. �� Направляющие и линейки
    5. ����‍♂️ Переходы (Blend)
    6. �� Перспектива
    7. �� Cтили графики
    8. �� Символы
    9. �� Сетчатые объекты (meshes)
    10. �� Ресницы, брови, волосы
    11. �� Кисти и ластик
    12. ☀️ Распределение объектов по кругу

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

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

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

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

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

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

      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 (осторожно!)

      Сделай сам: гайд по созданию листовки в Adobe Illustrator

      Конечно, дизайн всегда можно заказать у профессионального дизайнера, но иногда хочется самому поучаствовать в создании макета своей будущей листовки. Сегодня мы хотим с вами поделиться гайдом для новичков — научимся создавать самую простую листовку формата А4 с легким дизайном в Adobe Illustrator. Давайте начнем!

      1. Открываем программу Adobe Illustrator. Создаем новый файл размером А4. Это будет наша листовка. Сразу выставляем вылеты «под обрез» по 5 мм с каждой стороны

      16.jpg

      17.jpg

      2. Выставляем внутренние направляющие для вылетов под обрез — по 5 мм с каждой стороны. Для удобства выставляйте направляющие по линейке.

      2.jpg

      3.jpg

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

      4.jpg

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

      6.jpg

      7.jpg

      5. Может добавим тень к тексту? Нажмем на текст, затем в меню «эффекты» выбираем «стилизация — тень». Настраиваем по своему вкусу.

      8.jpg

      9.jpg

      6. Давайте добавим еще один простой элемент, чтобы сделать листовку интереснее — рамку для текста. Выбираем инструмент «прямоугольник» (можно сделать ему скругленные края в меню «эффекты»), убираем заливку и добавляем цветную обводку (в нашем случае черная).

      10.jpg

      11.jpg

      12.jpg

      7. А теперь очень важный момент — переводим текст в кривые. Это нужно сделать обязательно, чтобы ваш шрифт при печати в типографии сохранился. Выделяем текст, нажимаем комбинацию клавиш Cntr+Shift+O. Текст переведен в кривые. Обязательно для себя сохраните текст не в кривых, а в исходном виде. После того, как текст будет переведен в кривые, вы уже не сможете его редактировать.

      13.jpg

      8. Последний шаг — сохраняем файл. Открываем меню «файл — «сохранить как. «. Ваш файл для печати готов!

      14.jpg

      15.jpg

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

      Как делать дизайн в иллюстраторе

      Все курсы школы

      Изучайте анатомию, композицию, комиксы, манга, дизайн персонажей, геймдизайн, анимацию, концепт арт окружения многое другие.

      25 курсов по рисованию за 2990 р.
      25 курсов рисования за 2990 р.
      ARTISTHUNT BLOG
      14 советов по быстрому созданию интерфейсов в Adobe Illustrator

      Веб-дизайн: как сэкономить кучу времени с помощью создания интерфейсов в Adobe Illustrator? Наши советы помогут вам в этом!

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

      Создание динамических кнопок действительно экономит немало времени, так что этому навыку определенно стоит научиться.

      2. Стили текста
      Бесплатный курс
      Рисование для новичков
      Полноценный 8-часовой курс для начинающих.
      Состоит из 7 видео-уроков

      Применяйте комплексные стили для целых абзацев текста в один клик. Все корректировки стиля будут применяться сразу ко всему тексту в абзаце. Как и в случае таблиц текста CSS, можно вносить изменения в текст на своих веб-сайтах и быть уверенным, что текстовое оформление остается постоянным и целостным.

      3. Функция Global Colors (Глобальные Цвета)

      Менее известная, но весьма полезная функция программы Illustrator — Global Colors. Это самый быстрый способ поменять цвет для всего дизайна сразу, а также сохранять постоянство и целостность цветовой расцветки. Когда вы корректируете глобальный цвет, то новый цвет будет применен сразу для всех объектов.

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

      Создавайте модульные компоненты при помощи панели символов (Symbols panel). Эта функция позволит вам многократно использовать и изменять какие-либо элементы сразу на всем веб-сайте. Понятное дело, что это не только экономит кучу вашего времени, но и гарантирует сохранение все той же целостности сайта.

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

      Таким образом, когда вы изменяете что-то в меню на одной странице сайта, то эти изменения автоматически вносятся в меню и на остальных страницах сайта.

      Новости

      Мастер-класс Алексея Белякова «Дизайн плаката в программе Adobe Illustrator»

      15 июня в Институте культуры и искусств прошел мастер-класс по графическому дизайну «Дизайн плаката в программе Adobe Illustrator». Он стал продолжением предыдущего мастер-класса преподавателя Департамента ИЗО, ДИ и дизайна Алексея Белякова от 08 июня («Ретушь фотографии и коллажирование в рекламе с помощью программы Adobe Photoshop»).

      На втором занятии Алексей Александрович предложил использовать в макете плаката фотографию, подготовленную на первом. Участники мастер-класса узнали на онлайн-встрече 15 июня о видах плаката, о том, как должен мыслить профессиональный дизайнер при решении поставленной задачи, какие сервисы и инструменты он использует, что такое векторная графика и ее отличия от растровой, что такое инфографика и ее роль в плакате. Задачей мастер-класса было — научиться методически грамотно работать над макетом, работать с брифом, подбирать материал, работать с композицией и цветом, работать с инфографикой, уметь выделять главное, работать с текстом, изучить основные инструменты Adobe Illustrator, необходимые для разработки дизайна плаката и узнать, как готовить файл в печать.

      Снимок экрана 2022-06-15 в 16.53.33

      Снимок экрана 2022-06-15 в 16.53.16

      Снимок экрана 2022-06-15 в 18.08.53

      Снимок экрана 2022-06-15 в 16.53.47

      Снимок экрана 2022-06-15 в 18.08.44

      Снимок экрана 2022-06-15 в 16.54.20

      Снимок экрана 2022-06-15 в 17.28.35

      Снимок экрана 2022-06-15 в 18.09.59

      Трансляция мастер-класса велась на странице ВКонтакте и на канале YouTube Института культуры и искусств.

      Материалы к мастер-классу доступны ПО ССЫЛКЕ

      Персоны

      Поделиться

      Руководитель департамента ИЦО принял участие в работе круглого стола

      Руководитель департамента ИЦО принял участие в работе круглого стола

      23 ноября 2023 г.

      Начальник департамента информатизации образования ИЦО Любовь Шунина выступила с докладом «Педагогическое наследие К.Д. Ушинского и информатизация образования» на круглом столе в МГУ имени М. В. Ломоносова

      Москвоведческая студенческая команда в МГПУ

      Москвоведческая студенческая команда в МГПУ

      22 ноября 2023 г.

      На площадке института гуманитарных наук состоялось собрание научного сектора Москвоведческой студенческой команды, на котором студенты познакомились с проектами МГПУ и обсудили возможные перспективы сотрудничества

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *