Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

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

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

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

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

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

Макет web-страницы: может быть, все-таки Adobe Illustrator?

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

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




Теги: Adobe Illustrator, веб-страница, верстка, макет



Посмотреть похожие темы


Подписка по электронной почте

Хотите получать еженедельные свежие посты от блога «Графика для дизайна» на E-mail? Теперь у Вас есть такая возможность!

В любой момент Вы можете отписаться от рассылки на странице своего профиля. Подписка требует подтверждения по E-mail.

Ваш эл. адрес:

 




Комментарии (3):

  1. katberth пишет:

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

    Про шрифты опять же повторили бы, а то наберут нестандартных и привет.

    Особенно печально, что предоставленая инфа не только бесполезна, но вредна, ибо ошибочна.

    Удачи в творчестве! Сейчас заценю статейку “делаем сайт в шопе” :)

  2. В люстре в плане создания макетов очень удобны поля.
    Советую также попробовать для этих целей Fireworks.

  3. Файна пишет:

    А мне статья понравилась. Для новичков будет полезно.

Отправить комментарий