Как делать дизайн в иллюстраторе
Все курсы школы
Изучайте анатомию, композицию, комиксы, манга, дизайн персонажей, геймдизайн, анимацию, концепт арт окружения многое другие.
| Показать список курсов |
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). Эта функция позволит вам многократно использовать и изменять какие-либо элементы сразу на всем веб-сайте. Понятное дело, что это не только экономит кучу вашего времени, но и гарантирует сохранение все той же целостности сайта.
Использовать эту функцию очень удобно для таких компонентов, как футеры, меню, всякие панельки и так далее.
Таким образом, когда вы изменяете что-то в меню на одной странице сайта, то эти изменения автоматически вносятся в меню и на остальных страницах сайта.
Как создать иллюстрации, когда не умеешь рисовать
Личная история с практическими советами Поверьте мне, вы не захотите смотреть мои рисунки. И это правильно – мои способности весьма скромны. Но когда я была стажером-дизайнером на последнем курсе колледжа, мое агентство было в затруднительном положении: нам нужно было срочно сделать векторные иллюстрации, и не было никого, кто мог бы с этим помочь. Решив проявить себя, я вызвалась попробовать. (Да, девочка, которая не умеет рисовать). Вскоре стало ясно, что процесс на самом деле не был таким сложным, как казалось. Конечный результат не только решил потребности компании-заказчика, входящей в список Fortune 500, но и послужил стартом для создания бесчисленного множества других иллюстраций, используемых компаниями по всей стране. Набросок и финальная иллюстрация для пустого состояния сайта Envoy Это не было результатом простой силы воли, и звезды в тот день не сошлись волшебным образом. Хотя художественные принципы карандашного рисунка и векторной иллюстрации похожи, тактический подход для новичков сильно отличается. В традиционном рисовании вы, по сути, пытаетесь контролировать движение карандаша в соответствии с вашей волей. Новичку это может показаться пугающим. Когда кажется, что невозможно нарисовать нормальный круг, создание «хорошей» иллюстрации вообще выглядит непосильной задачей. Вы должны глубоко понимать такие фундаментальные принципы, как освещение и перспектива, а это требует много практики. Это не означает, что эти навыки не имеют ценности (или что векторное рисование – это легко), но в случае векторной графики кривая обучения становится менее крутой. Это уже не гора, а холм.
Единый инструмент
Прежде чем начать отрабатывать технику, вы должны сначала понять программу, в которой будете работать. Есть одна характерная особенность, имеющая решающее значение для создания векторов. Это инструмент Pen Tool. Не могу сказать, сколько раз я слышала стоны при одном лишь упоминании его названия. Несмотря на то, что он может вызывать уныние, его освоение не должно быть мучительно сложным. Я всецело объясняю свой успех лишь одной вещью: лабиринтами. Я делала эти упражнения еще во времена учебы в колледже. Задача заключается в том, чтобы пройти лабиринт аналогично тому, как вы делаете это обычным маркером, только вместо этого нужно использовать точки и кривые. Пройдите лабиринт с минимальным количеством опорных точек После недели упражнений с лабиринтами у меня больше никогда не было проблем с этим инструментом. Если бы я могла выбрать, что порекомендовать начинающим иллюстраторам, я бы несомненно отправила их покорять лабиринты.
Быстрый рост благодаря копированию чужих работ
Огромным фактором, позволившим мне быстро освоить иллюстрации (или как я их ласково называю illos), было то, что я не начинала с нуля. Вместо того, чтобы придумывать каждую мелочь – форму, цвет, перспективу, сообщение, текстуру и так далее – я просто перестраивала и дополняла существующий набор. Копирование – это самый быстрый способ понять иллюстрацию и то, как она создавалась.
Разбор чужих иллюстраций
У одной из иллюстраций, запрошенных моим агентством, не было файла в редактируемом формате, поэтому моей задачей было идеально воссоздать ее. Я начала смотреть какие компоненты потребуются для перестройки – круг для этого, модифицированный прямоугольник для того. За исключением некоторых уникальных кривых здесь или там, почти каждая часть была сформирована из простых фигур, которые мы изучаем еще в детском саду. Фактически, на самом деле оказывается, что большинство плоских иллюстраций основаны либо на этих базовых фигурах (которые Illustrator идеально настраивает), либо на органической форме (для которой лабиринты служат отличной подготовкой). Эскимо из кругов и прямоугольников По возможности я использую пресеты фигур. Просто потому что мы не можем нарисовать круг так же идеально, как компьютер. Хотя это может показаться читерством, это гарантирует, что конечные результаты будут выглядеть изящно и аккуратно. (Попробуйте Pathfinder, Corner Widget и Scissors Tool, чтобы повысить свою эффективность). Создание макаронин с помощью круга
Развитие стиля
Другой задачей было сделать больше иллюстраций в выбранном стиле. Благодаря этому у меня было гораздо больше возможностей для внесения правок, оставаясь при этом в зоне комфорта. Сначала казалось непосильной задачей использовать воображение для рисования, но я применила ту же логику, что и раньше – создавать и трассировать кривые. Только на этот раз, я использовала чужие иллюстрации как отправную точку. Крайне важно не копировать чужую работу, а брать за основу правильно выполненную технику. Например, я могу найти три разных рисунка волос. Я могу взять за основу одно изображение, и совместить его с челкой со второго, и углом наклона головы с третьего. После того, как я сформировала эту основу, было намного легче менять точки кривых, пока они не стали моими собственными.
Пять лет спустя
Теперь я создаю иллюстрации несколько раз в неделю, не задумываясь дважды о строительных блоках или о том, как построить кривые Безье. Я все еще не умею рисовать. Но я делаю наброски, чтобы быстро выразить грубые идеи. Я не называю себя иллюстратором – я дизайнер, который немного занимается иллюстрацией. Это различие важно, потому что есть много искусных иллюстраторов , до которых мне еще очень далеко. Может быть, однажды я стану иллюстратором, может быть нет (хотя я постоянно выкладываю работы на Dribbble.) Некоторые иллюстрации из рабочих и сторонних проектов Ничего не дается легко, самое важное – просто с чего-то начать. и иногда начать не так сложно, как вы думаете. P.S. Если вы попробуете выполнить задание с лабиринтом, мы будем рады увидеть ваши результаты! Пишите Envoy Design в Twitter, и возможно мы отправим вам сюрприз. ? Спасибо за прочтение! Обязательно посетите envoy.design и подпишитесь, чтобы получать уведомления о новых публикациях. Спасибо Katie Riley, Jon Rundle и Kelly Wahlstrom. Перевод статьи medium.com
Adobe Illustrator для веб-дизайнера 1) Введение
Этой заметкой я открываю цикл материалов об использовании Adobe Illustrator в веб-дизайне.
Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци. Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал. Я предупредил.
- Введение
- �� Файлы, монтажные области
- �� Cлои
- Перемещение, выравнивание и распределение объектов
- �� Перо и инструмент «Кривизна» (Curvature)
- ��♀️ Правила красивых контуров
- �� Shape Builder Tool (Создание фигур) — ⇧M
- ✏️ Рисование фигур линиями и инструментом быстрой заливки
- ❤️ «Оформление» (Appearance) — палитра и раздел палитры «Свойства»
- �� Направляющие и линейки
- ����♂️ Переходы (Blend)
- �� Перспектива
- �� Cтили графики
- �� Символы
- �� Сетчатые объекты (meshes)
- �� Ресницы, брови, волосы
- �� Кисти и ластик
- ☀️ Распределение объектов по кругу
Назначение и уникальные функции
По моему мнению, по ряду позиций 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.
Иллюстрации выполнять в более свободной технике.
- Прямые линии и мелкие дуги рисовать пером и «кривизной», отключив привязку к пиксельной сетке, минимизируя количество опорных точек.
- Но включать привязку к пиксельной сетке, когда нужно провести четкие горизонтальные и вертикальные линии, нарисовать прямоугольники.
- Большие дуги рисовать овалами. Там где можно — по кругам-направляющим в пропорциях золотого сечения. Также круги-направляющие гармонической пропорции использовать для разработки геометрических деталей композиции.
- Комбинировать фигуры либо Shape Building Tool, либо эффектами обработки контуров.
☝️�� Чтобы посмотреть на иллюстрацию без рамок монтажных областей их можно скрыть — ⇧⌘H
☝️�� Все необходимые свойства выделенного объекта можно изменить в панели свойств. В том числе — прозрачность и режимы наложения.
Когда этого не достаточно, использовать дополнительные панели: «Оформление», «Градиент», «Символ» и т.д.
В контурным рисунке применять инструмент сглаживания углов, клавиатурную и интерфейсную. конвертацию опорных точек.
Перед экспортом в SVG оптимизировать контуры:
- Object ➜ Merge Transparency
- Object ➜ Path ➜ Clean Up
- Object ➜ Path ➜ Simplify (осторожно!)
Используем Adobe Illustrator для создания макета страницы
Для начала посмотрите на то, что мы будем стараться сделать:
Шаг первый
Создадим новый документ шириной 960px и произвольной высотой. Я выбрал такую ширину, потому что, судя по посетителям нашего сайта, у большинства из них немаленькие мониторы.
Не забудьте выставить Color Mode в RGB.
Шаг второй
Чёрные границы на картинке ниже обозначают размеры создаваемого нами документа (область между ними ещё называют artboard). Мне нравится помещать скриншот с чистым окном браузера в качестве подложки: гораздо легче воспринимать страницу такой, какой она должна получиться.
Шаг третий
Следуюший шаг очень важен. Вы, разумеется, можете выбрать произвольный масштаб (Zoom) и даже изменять его в процессе работы, но имейте в виду, что текст на странице должен быть удобочитаемым при масштабе 100% (1:1). Для изменения масштаба вы можете использовать отмеченное ниже поле.
Шаг четвёртый
Вы можете скрывать и отображать границы рабочей области тогда, когда вам это нужно. Для её сокрытия вам нужно выбрать команду View > Hide Artboard. Есть только одна проблема: такая операция занимает слишком много времени. Поэтому, советую вам использовать специальное сочетание клавиш для этого: Command + Semicolon (;).
Шаг пятый
Чтобы легко разметить иерархию документа и сбалансансировать её, вы можете, для начала, разметить страницу серыми прямоугольниками, как это сделал я. Тонкие длинные прямоугольники — это будущий текст.
Шаг шестой
Когда вы будете уверенным в разметке страницы, вы можете удалить прямоугольники, заменив их направляющими (Guide lines).
Шаг седьмой
Используя в качестве отправных точек направляющие, добавьте на страницу различные элементы: навигацию, текст, логотип, изображения и иконки, по вашему вкусу. Когда вы наиграетесь с элементами интерфейса, попробуйте убрать направляющие и посмотреть на плоды своей работы. Может возникнуть такая ситуация, что направляющие будут работать против вас. Подстройте их, чтобы они знали своё место.
Шаг восьмой
Доведите шапку страницы до совершенства, добавив в неё изображения, иконки.
Шаг девятый
Я решил добавить голубого цвета в шапке.
Шаг десятый
Теперь можно переходить к оформлению текста. Определите, как будут выглядеть заголовки и ссылки. Я считаю, что лучше сразу сделать это, чтобы потом можно было сосредоточиться на разработке сайта (когда прийдёт время).
Шаг одиннадцатый
Существует несколько способов подготовки дизайна для WYSIWYG-редакторов (например, Adobe Dreamweaver). Первый предполагает использование слайсов (Slice). Их можно создать с помощью тех же направляющих или выделением. Сделаем с помощью направляющих: перетащим и расположим их вокруг каждого элемента-ссылки на странице. В нашем примере, все четыре иконки являются ссылками: ведут на отдельные страницы на нашем сайте.
Шаг двенадцатый
Когда вы разметите направляющими нужные блоки на странице, можно превратить их в настоящие слайсы. Для этого используем команду Object > Slice > Create from Guides. Я заметил, что Illustrator может не сделать соответствующие слайсы по первому требованию, поэтому я повторяю эту операцию три или четыре раза. Когда всё будет готово, появятся чёрные пронумерованные блоки.
Шаг тринадцатый
Для сохранения сделанных слайсов, используйте File > Save for Web & Devices. . Выделяйте с помощью Slice Select Tool (k) нужные для сохранения слайсы. Вы можете выбрать несколько таких блоков, зажав Shift. На панели справа выберите нужные вам параметры сохранения изображений. JPEG, например, больше подходит для изображений с несколькими цветами, GIF — для изображений с маленьким числом цветов и большими однотонными областями, а PNG — для сохранения прозрачности в изображениях (однако же, вам предстоит встретиться с чудаком по имени Internet Explorer в случае использования последней). Выберите нужное вам качество (можете поиграться с настройками) и нажимайте Сохранить.
Шаг четырнадцатый
Выберите место для сохранения файлов. Я выбрал Рабочий стол. Не забудьте выставить в поле Format значение Images Only.
Шаг пятнадцатый
На вашем рабочем столе появится папка с именем Images. Внутри — слайсы, которые теперь стали изображениями.
Шаг шестнадцатый
Очистите все направляющие командой View > Guides > Clear Guides. Далее, нарисуйте направляющие вокруг тех объектов, которые вы намерены разрезать сейчас. При наведении указателя на меню, оно должно менять свой цвет. Вам нужно разрезать его для всех используемых вами оттенков.
Шаг семнадцатый
Выберите слайсы, которые вы хотите сохранить. Навигация в моём примере как раз подходит для сохранения в GIF (не содержит изображений и большого количества цветов). Если вы хотите использовать обычные шрифты, то вам следует оформить нафигацию с помощью HTML.
Шаг восемнадцатый
Назовите изображения как вам угодно. Если вам не хочется этого делать, их имена будут выбраны автоматически.
Шаг девятнадцатый
При сохранении изображений в ту же папку, что и в прошлый раз, она будет содержать и новые, и старые изображения. Не забудьте повторить шаги 16-18 для других состояний кнопок навигации.
Шаг двадцатый
Имейте в виду, что это не единственный вариант развития событий. Вы можете экспортировать слайсы вместе, включая или отключая нужные при редактировании страницы.
Другой метод создания слайсов заключается в выделении объекта и выполнении команды Object > Slice > Create from Selection. Вы можете использовать любой способ для создания слайсов, какой больше нравится.
Шаг двадцать первый
В определённых случаях вам не понадобится написанный прямо в Illustrator текст, поэтому вы его можете спокойно удалить (до экспорта слайсов).
Шаг двадцать второй
Снизу изображение, указывающее на то, что я удалил текст после разметки слайса. Теперь его можно экспортировать.
Крайний шаг
Посмотрите ещё раз на то, что у нас получилось.
Я уверен, что вы почувствовали лёгкость при работе с Adobe Illustrator. В нём очень просто создавать макеты любой сложности: вы можете полностью контролировать процесс создания макета страницы.