Верстка макета в иллюстраторе

Используем 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. В нём очень просто создавать макеты любой сложности: вы можете полностью контролировать процесс создания макета страницы.

Источник

Как создать веб-сайт в Illustrator (за 10 шагов)

Adobe Illustrator — это программа для дизайна, которая создает векторную графику для широкого круга задач, включая печать, анимацию и веб-сайты. В векторной графике используются математические формулы для представления изображений, в отличие от других форматов, таких как GIF, в которых используется набор точек. Хотя он не был специально разработан как программа для веб-дизайна, Illustrator имеет расширенные инструменты для экспорта графики, созданной в программе, для использования на веб-страницах, а также генерирует необходимый код для отображения в браузере.

Шаг 1

Создайте документ Illustrator шириной 960 пикселей и выбранной высотой в зависимости от содержания и макета, которые вы задумали. Сайт шириной 960 пикселей соответствует наиболее популярному разрешению монитора — 1024 пикселей, если учитывать полосу прокрутки и границы окна.

Шаг 2

Создайте нарисованный от руки набросок визуального дизайна вашего сайта, если вы еще этого не сделали. Это даст вам полезный справочник по созданию в Illustrator.

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 1

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

Шаг 2

Выберите параметры оптимизации из вариантов, перечисленных в правой части экрана. Они могут выбрать предустановленные конфигурации или создать собственный профиль, в зависимости от того, хотите ли вы, чтобы ваши изображения были файлами JPEG, GIF или PNG. Вы также можете настроить качество изображений.

Шаг 3

Просмотрите различные настройки, щелкнув вкладки «2 варианта» и «4 варианта». В нижнем углу каждого предварительного просмотра вы увидите информацию об оптимизации, такую ​​как размер файла и время рендеринга в браузере. Щелкните по кнопке «Сохранить». Решите, хотите ли вы сохранить изображения и код, и перейдите в эту область с помощью клавиши «Где».

Шаг 4

Выбери формат своей работы. Если вы свободно говорите на XXXX и вам нужны только изображения, потому что вы добавите код позже, выберите «Только изображения». Если вы новичок или предпочитаете, чтобы XXXX был создан для вас, выберите вариант «XXXX и изображения». Если вы предпочитаете, чтобы расположение элементов было организовано с помощью каскадных таблиц стилей, а не таблиц, выберите «Настройки по умолчанию» и «Экспортировать как слои CSS» на вкладке «Слои».

Шаг 5

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

Источник