Макет web-сторінки: можливо, все-таки Adobe Illustrator?

У коментарях до однієї із статей щодо створення макета 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 не робить відповідні Слайс на першу вимогу, тоді просто спробуйте ще пару-трійку раз. Якщо з'явилися пронумеровані блоки, значить, Слайс готові.

Як зберегти отримані Слайс і що робити далі, ми розповімо наступного разу.

Коментарі

Добавити коментар