Используем 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. В нём очень просто создавать макеты любой сложности: вы можете полностью контролировать процесс создания макета страницы.
Сделай сам: гайд по созданию листовки в Adobe Illustrator
Конечно, дизайн всегда можно заказать у профессионального дизайнера, но иногда хочется самому поучаствовать в создании макета своей будущей листовки. Сегодня мы хотим с вами поделиться гайдом для новичков — научимся создавать самую простую листовку формата А4 с легким дизайном в Adobe Illustrator. Давайте начнем!
1. Открываем программу Adobe Illustrator. Создаем новый файл размером А4. Это будет наша листовка. Сразу выставляем вылеты «под обрез» по 5 мм с каждой стороны
2. Выставляем внутренние направляющие для вылетов под обрез — по 5 мм с каждой стороны. Для удобства выставляйте направляющие по линейке.
3. Вставляем текст. Выбираем в меню слева инструмент «текст», растягиваем поле для текста на листе и набираем необходимый текст. В меню редактирования меняем шрифт, размер шрифта и его расположение как вам необходимо.
4. Давайте сделаем листовку красивее — самым простым способом вставляем картинку на фон листовки. В меню «файл» выбираем пункт «поместить», из файловой системы выбираем необходимую картинку. после того, как картинка появилась на листе, нажимаем на нее правой кнопкой мыши, затем в меню «монтаж» и переводим картинку на задний план. Обрезаем до нужных размеров.
5. Может добавим тень к тексту? Нажмем на текст, затем в меню «эффекты» выбираем «стилизация — тень». Настраиваем по своему вкусу.
6. Давайте добавим еще один простой элемент, чтобы сделать листовку интереснее — рамку для текста. Выбираем инструмент «прямоугольник» (можно сделать ему скругленные края в меню «эффекты»), убираем заливку и добавляем цветную обводку (в нашем случае черная).
7. А теперь очень важный момент — переводим текст в кривые. Это нужно сделать обязательно, чтобы ваш шрифт при печати в типографии сохранился. Выделяем текст, нажимаем комбинацию клавиш Cntr+Shift+O. Текст переведен в кривые. Обязательно для себя сохраните текст не в кривых, а в исходном виде. После того, как текст будет переведен в кривые, вы уже не сможете его редактировать.
8. Последний шаг — сохраняем файл. Открываем меню «файл — «сохранить как. «. Ваш файл для печати готов!
Попробуйте сделать этот очень простой дизайн листовки в 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 для веб-дизайнера 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 (осторожно!)