Как создать макет сайта в illustrator
Технологическим стандартом де-факто для создания графических макетов сайтов стал Adobe Photoshop. Такой макет будет принят любым верстальщиком, если выполнить минимальный набор требований, да и все входы-выходы давно описаны. Поэтому я не буду их описывать, а дам несколько рекомендаций по созданию графических макетов в Adobe Illustrator.
В своё время я неоднократно вливался в холивары на тему «Приносите нам макеты только в фотошопе» и придерживался непопулярного мнения о том, что макет нужно делать в той программе, которая позволит сделать это максимально быстро и удобно. И верстальщик должен обладать минимальными навыками работы с разными графическими пакетами. Однако я не учёл одного маленького, но важного фактора — дизайнер должен выполнить свою работу качественно и аккуратно. Только в этом случае не возникнет проблем и деформации кармы.
Есть достаточно большое количество ситуаций, в которых работать с растровым редактором нерентабельно. Если на макете нет и не придвидится необходимости в слоевых масках, а есть только прямоугольники, линии, несколько картинок и текст — создать такой макет в Illustrator будет намного проще и быстрее. А уж если у нас не просто прямоугольники, а прямоугольники с круглыми уголками, то нас просто-таки спасёт Effect > Stylize > Round Corners… (хотя и в Photoshop можно создавать уголки с легко изменяемым радиусом, но об этом в другой раз). Средние и большие пиктограммы тоже удобнее рисовать в векторе.
Где больной?
В теории всё просто замечательно и радужно, но почему что же на практике? На практике мы имеем неизбежное преобразование векторного изображения в растровое. И вот на этом этапе заложена мина. Мина под названием «сглаживание». При работе над макетом в Illustrator нужно соблюдать хирургическую точность. Как только координаты точки перестают быть целыми числами мы теряем чистоту линий. Появляется грязь.
Проблема номер раз заключается в том, что в режиме отображения, установленном по умолчанию, мы видим картинку в максимальном качестве пригодном для полиграфии, а у монитора оно намного ниже. Для того, что бы видеть, как всё будет выглядеть после растеризации — включаем режим Pixel Preview (View > Pixel Preview). Если у вас есть второй монитор, или если есть один, но очень широкий — создаём копию окна (Window > New Window) и задаём разные режимы просмтотра для них.
Я уже упоминал про хирургическую точность — открываем палитру Transform и проверяем, что бы у нас всегда были целые значения для координат объекта и его размеров. Но это ещё не всё. Предположим, что мы создали прямоугольник размером 15х25 пикселов и расположили его в точку 150:200. Будут ли при этом чистота на границе? В состоянии по умолчанию — нет, потому что у нас нечётные значения ширины и высоты. Поэтому переводим точку привязки координат из центра в левый верхний угол. Вот теперь полный порядок.
upd: кроме того, необходимо включить привязку к пикселам (View > Snap to Grid) и задать особые настройки в Edit > Preferences:
- Категория General: _Keyboard Increment > 0.5px
_ - Категория Units & Display Performance: Units > General > Pixels.
Это позволит точно позиционировать объекты с помощью кнопок клавиатуры, что, несомненно, быстрее и удобнее работы с палитрой Transform.
Линий нет, даёшь объекты
Следующая проблема — контуры толщиной в один пиксел почти всегда получаются «грязными». Причина кроется в том, что по умолчанию обводка рисуется в обе стороны от контура объекта. Выходов два: в Illustrator CS3 и выше задаём параметру Align Stroke значение «outside», либо вообще не пользуемся обводкой и создаём контуры через Оbject > Path > Offset Path. Второй способ лучше, потому что в этом случае мы получаем новый объект, у которого можем легко двигать опорные точки. Но теряем возможность быстро поменять толщину линии.
Иногда у Illustrator ломается внутренний калькулятор и в этом случае точно выставленные линии начинают двоить. Лекарство простое и неудобное — увеличиваем масштаб, ставим рядом два окна, одно со стандартным режимом просмотра, второй — Pixel Preview. В первом аккуратно двигаем опорные точки, а по второму контролируем процесс.
Итак, дорогие дизайнеры! Создавая захыватывающие дух макеты, не забывайте о том, что потом ваш макет будут мучать и резать. Что бы макет не изуродавали, подготовьте его ко взрослой жизни — проверьте все детали при большом увеличении в режиме Pixel Preview. При необходимости внесите коррективы.
Таки всё плохо, что делать?
На написание этой заметки меня сподвиг один из последних полученных мною макетов. Все линии были сбиты, контуры были сделаны как обводка.
Для исправления ситуации прежде всего избавляемся от обводок, нам нужны только объекты. Для этого делаем так: Object > Expand. После чего выравниваем всё с точностью до пиксела.
Итого
Делать макеты в Issustrator можно. Но очень важно уметь правильно их готовить. Как в изысканой кухне — прежде всего нужно соблюдать чистоту и точность.
Для начала посмотрите на то, что мы будем стараться сделать:
Создадим новый документ шириной 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, то это статья для вас. Также она будет крайне полезна тем, кто только собирается этим заниматься, а также тем, кто знает Illustrator, но не задумывался над тем, насколько он удобен в веб-дизайне. Автор материала собрал советы из личной практики, которые помогут вам сделать процесс дизайна в Adobe Illustrator проще, эффективнее и аккуратнее.
1. Настройте адаптивную базу
Строим сетку
При помощи Gridcalculator.dk вы можете легко настроить необходимую вам сетку. Это поможет вам сэкономит время на расчетах и расчерчивании.
Настраиваем сетку
Сетка должна быть отделена от объектов, чтобы вы могли изменять их видимость независимо друг от друга, а также использовать повторно, если необходимо разработать не одну страницу под ту же сетку.
Поместите направляющие поверх всех остальных слоев в вашем документе.
Если ваша сетка состоит из более чем одной колонки, разделите их в отдельные слои, чтобы вам было проще ими управлять. Возможно одна страница сайта потребует наличия всех четырех колонок, другая — только двух. Вы сможете удобно и независимо друг от друга менять видимость колонок, когда они вам не будут нужны.
Используем векторные шаблоны браузеров
Здесь вы можете скачать шаблоны браузеров и устройств в векторе. Используйте их, чтобы вам было проще создавать адаптивный дизайн.
Разместите шаблоны под слоями с вашим контентом.
2. Оптимизируйте рабочую область
Настройте Workspaces/Рабочую область (Window > Workspace/Окно>Рабочая область) в соответствии с вашими требованиями, или требованиями проекта. Если вы знаете какие функции вы используете чаще всего, то у вас не возникнет проблем с настройкой. Плюс ко всему после настройки вы не будете тратить время на открытие, закрытие и перемещение окон. Вы можете составить несколько вариантов рабочих областей. К примеру:
- для ноутбука, когда вы вне дома.
- для работы на мониторе в студии.
- для работы на домашнем мониторе.
Использование рабочих областей добавляет процессу аккуратности. Вы всегда можете вернуться к вашим настройкам, сбросив нынешние и выбрав название вашей.
3. Дизайн с пиксельной точностью
Настройки пиксельного выравнивания
Когда создаете новый документ, оставьте параметр Align New Objects to Pixel Grid/Выравнивание новых объектов по пиксельной сетке отключенным. Да! Именно отключенным.
Если вы включите эту опцию, то некоторые элементы UI, как к примеру разобранный (expanded) текст, могут исказиться. Вы также не сможете свободно создавать объекты в том месте, где вам хочется, так как они все равно будут выравниваться по пиксельной сетке.
Вы можете выбрать объекты, которые будут выровнены по пиксельной сетке, выделив их и поставив алочку в соответствующей области в палитра Transform/Трансформирование.
Включаем пиксельное превью
Совершайте простые математические операции
В Иллюстраторе есть функции, позволяющие производить простые математически вычисления. Это очень полезно если вам нужно сложить (+), вычесть (-), поделить (/) или умножить (*) значения. Операции можно применять к объектам, заливке, прозрачности и множеству других вещей.
4. Работайте с многоразовыми объектами UI
Используйте символы и шаблоны
Обычно мы используем те же элементы UI, меняя лишь их размеры и цвет. Продумайте универсальное использование и создайте недеструктивные элементы, которые было бы удобно использовать вновь и вновь. Используйте символы (Symbols) в Иллюстраторе, чтобы применив изменение к одному символу, менялись все созданные из него элементы.
Как только вы меняете что-то в оригинальном символе, изменения тут же отражаются на всех объектах, которые были созданы с этого оригинала. Это удобно использовать для повторяющихся элементов, таких как кнопки, футеры, фоны и т. д. Вы также можете использовать символ в символе.
Недеструктивное редактирование при помощи 9-дольного масштабирования
9-дольное масштабирование (9-Slice Scaling) это опция символов, которая позволяет изменять размер объекта без геометрических искажений.
Если вы масштабируете символ без этой функции, то объект может быть искажен. Это особенно полезно использовать в кнопках, когда вам нужно изменить ее длину, но угол округления угла нужно сохранить.
Недеструктивное редактирование в палитре Appearance/Оформление Атрибуты примененные в палитре Appearance/Оформление не влияют на основную структуру объекта или группы объектов. Это удобно для применения округленных углов, или цветовых изменений. Параметры могут быть изменены или отменены в любой момент.
Динамические кнопки с текстом
Есть способ создания кнопок, которые меняют свой размер в зависимости от количества текста.
- Выделите контейнер с текстом.
- В палитре Appearance/Оформление добавьте два новых слоя Fill/Заливки.
- Поместите Characters/Знаки между двумя слоями Fill/Заливки.
- Выделите нижний слой Fill/Заливки.
- В меню выберите Effect > Convert to Shape > Rectangle/Эффект>Преобразовать в фигуру>Прямоугольник
- Укажите параметры прямоугольнику.
- Вот и все.
Вы также можете сохранить набор параметров оформления как Graphic Style/Стиль графики и использовать в будущем. Но учтите что выравнивание в таком режиме довольно проблематично.
5. Работа с цветом
Общие цвета
Это одна из недооцененных функций Иллюстратора, которая на самом деле очень полезна. Каждый раз изменяя Global Color/Общий цвет, все объекты этого цвета также меняют цвет. Вы может мгновенно изменить цвет десятка объектов.
Группы и палитры цветов
Группы цветов (Color Groups) помогает сэкономить уйму времени, если вы работаете с большим количеством наборов цветов или с несколькими брендами одновременно. Давайте им понятные имена, тогда работать и находить нужные наборы цветов будет намного проще.
Если вы готовы к экспериментам, то можете загрузить наборы цветов с таких ресурсов как Kuler или Colourlovers. Также поэкспериментируйте с опцией Recolor Artwork/Перекрасить графический объект (Edit > Edit Colors > Recolor Artwork/Редактировать>Редактировать цвета>Перекрасить графический объект).
6. Работа с текстом
Используйте только cтили символов (Character Styles)
Стили символов делают редактирования всего текста намного гибче. Применяйте стили к любому тексту: от больших блоков до отдельных слов. Помните, что вы создаете дизайн не для печати. Использование стилей символов поможет добавить последовательности типографике всего дизайна.
Распределите ваши стили символов с списке по размеру: от самого большого к самому малому, снизу вверх, или по алфавиту. Это поможет вам лучше структурировать иерархию типографики в дизайне и легко найти нужный стиль.
Настройте точно ваши стили и старайтесь не плодить исключений. Это упростит вашу работу и сделает типографику более согласованной.
Заполняйте дизайн реальными примерами текста Любой текст без содержания ничего не стоит. Старайтесь быть ближе к реальному опыту использования вашего дизайна. “Lorem ipsum” дает вам форму, но не смысл. Впишите свой собственный, настоящий заголовок или пункты меню в навигации. Это добавит информативности дизайну. Если в вашем проекте предусмотрены формы для заполнения, не ленитесь их заполнить, используя настоящие имена и города.
При использовании настоящего текста, вы обнаружите проблемы, которые в противном случае могли остаться незамеченными: колонны слишком широкие/узкие, поля должны были быть больше/меньше, что-то работает на одном языке, но не работает на других, и т.д.
7. Проектируйте для разных устройств одновременно
Адаптивный дизайн
В Иллюстраторе вы не ограничены определенным разрешением. В одном и том же документе вы можете пробовать дизайн на разных устройствах и редактировать все сразу при помощи настроек общих цветов, символов и стилей символов (Global Colors, Symbols, Character Styles). Даже при большом количестве различных экранов в одном файле, он остается достаточно легким и удобно редактируемым.
1. Используем монтажную область (Artboard) в качестве экранов устройств
Используйте несколько монтажных областей и назовите их названиями соответствующих устройств. Это удобно еще и тем, что при сохранении файлы автоматически получат имена этих девайсов. В файле, что вы скачали выше, вы можете посмотреть пример таких монтажных областей .
2. Называйте слои как страницы
Это позволит вам видеть, как каждая страница выглядит во всех размерах экрана. Также вы сможете экспортировать слои (страницы) из выбранной монтажной области независимо друг от друга.
8. Организуйте свои файлы
Организация файлов очень важна для того, чтобы держать ваши проекты в порядке и ускорить процесс работы. Используйте функции Иллюстратора, чтобы чистить файлы.
Операции по очистке
Windows > Actions > Delete Unused Panel Items / Окно>Операции>Удалить неиспользуемые объекты палитры
Эта операция проверит все палитры на наличие цветов, кистей, символов, стилей и т. д., которые вы не используете, и удалит их.
Эта операция не производится по умолчанию. Вы можете произвести ее как показано выше, или же сделать это вручную в отдельно панели: Select All Unused/Выделить все неиспользуемое , и удалите их.
Чистка рабочей области
Если вам нужно избавиться от одиноких опорных точек, недорисованных объектов, пустых текстовых блоков, вот как это сделать:
- Unlock/Разблокируйте все слои
- Сделайте все слои видимыми
- Object > Unlock all/Объект >Освободить все (чтобы быть уверенным, что эффект распространяется на все объекты в документе)
- Выделите все объекты во всех слоях
- Object > Path > Clean Up/Объект>Контур>Вычистить
- Нажмите OK в появившемся окне.
Управление слоями
Когда вы используете слои, скрывайте в палитре Layers/Слои все группы и объекты. Сделать это можно в Panel Options/Панель настроек. Вот что нужно сделать:
Назовите каждый слой соответственно названию страницы. Пронумеруйте слои, чтобы сохранить порядок во время экспортирования. Использование заглавных букв без пробелов иногда упрощает прочтение.
Все 59 слоев/страниц, что вы видите на картинке выше, весят всего 2.5mb (без вставленных картинок), так что их наличие никак не должно тормозить рабочий процесс.
Слои с руководством по стилю
Чтобы включить руководство по стилю в файл проекта, создайте «подслой» для каждого из слоев/страниц. Вот как это сделать:
- Создайте новый слой под названием STYLE_GUIDE
- Перетяните этот слой на слой, к которому вы хотите его прикрепить.
Данные по стилю будут находиться поверх вашего контента и вы можете легко отключить их видимость при необходимости.
Размещение картинок
Когда вы используете в проект растровые изображения, не вставляйте их. Вместо этого используйте опцию Link/Ссылка.
Это поможет вам уменьшить размер файла Иллюстратора, и даст возможность редактировать картинки по отдельности. Иллюстратор автоматически обновит картинку, в которую были внесены изменения.
9. Настройки сохранения и экспортирования
Избегайте совместимости с PDF
Если вы следовали советам, описанным выше, ваш файл легкий. Но если вы включите опцию совместимости с PDF (PDF Compatible File) при сохранении, это раздует ваш файл в размерах. Так как мы разрабатываем дизайн для веба, нам не нужна эта опция совместимости.
Экспортирование множественных слоев и монтажных областей Для лучшего контроля над опциями экспорта, скачайте этот скрипт: Multi Exporter script. Он очень прост в использовании, однако прочтите документацию, чтобы получить максимум пользы от его применения.
Управление и экспорт мобильных элементов Различные разрешения экранов мобильных устройств делают экспорт мобильных элементов весьма долгим процессом. Тут вам также поможет скрипт: Illustrator scripts for mobile design. Создайте отдельные файлы для каждой ОС.
Оптимизируйте конечные файлы
Производительность очень важна для сайта или приложения, так что каждый байт на счету. В Иллюстраторе отсутствует оптимизация PNG / JPG, поэтому используйте ImageOptim (Mac OS X) после экспорта содержимого.
Данное руководство создано для тех, кто уже умеет пользоваться 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. В нём очень просто создавать макеты любой сложности: вы можете полностью контролировать процесс создания макета страницы.
Читайте также: