Графика для дизайна

В комментариях к одной из статей по созданию макета web-страницы в Photoshop было высказано мнение, что Adobe Illustrator  для этих целей  подходит больше.  Что же, давайте попробуем сделать вот такой условный макет при помощи Adobe Illustrator:

Нажмите на картинку для увеличения

Начнем, конечно же, с создания нового документа. Ширина его пусть будет  1220px (мониторы сейчас у большинства интернет-пользователей немаленькие), а высота – произвольная. Выбираем цветовую модель RGB.

Нажмите на картинку для увеличения

Для удобства восприятия в качестве подложки можно поместить скрин с чистым окном браузера –  страница тогда получается нагляднее.

Нажмите на картинку для увеличения

Масштаб (Zoom) для работы вы можете выбрать произвольный, но не забывайте, что при масштабе 100% (1:1) текст на странице должен быть удобочитаемым. Для изменения масштаба можно использовать находящееся в левом нижнем углу поле.

Нажмите на картинку для увеличения

Если надо, в процессе работы границы рабочей области можно скрывать или отображать.  Для сокрытия используется команда View > Hide Artboard.

Чтобы прикинуть и сбалансировать иерархию документа, можно разметить страницу серыми прямоугольниками.

Нажмите на картинку для увеличения

Когда «созреет» окончательный вариант разметки страницы, прямоугольники можно удалить и заменить их направляющими (Guide lines).

Нажмите на картинку для увеличения

Нажмите на картинку для увеличения

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

Подготовить дизайн для WYSIWYG-редакторов (к примеру, Adobe Dreamweaver) можно несколькими способами. Один из них предполагает использование так называемых слайсов (Slice). Создать их можно, воспользовавшись все теми же направляющими либо выделением. Мы сделаем слайсы с помощью направляющих. Для этого перетащим их и расположим вокруг каждого из элементов-ссылок на странице.

После того, как нужные блоки на странице размечены направляющими, превратим их в настоящие ссылки. Поможет нам в этом команда Object > Slice > Create from Guides. Иногда бывает, что Illustrator не делает соответствующие слайсы по первому требованию, тогда просто попробуйте еще пару-тройку раз. Если появились пронумерованные блоки, значит, слайсы готовы.

Нажмите на картинку для увеличения

Как сохранить полученные слайсы и что делать дальше, мы расскажем в следующий раз.