Макет сайта как средство выражения индивидуальности

У вас есть такой сайт, но только с перламутровыми кнопочками? Нет? Ну, тогда будем искать. Чтобы не ходить и не искать по сети уже «поношенный» портал, закажите себе его «на пошив». Но сначала нужно создать макет сайта.

Что еще за макет сайта?

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

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

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

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

Готовый и утвержденный вариант макета передается верстальщику. На его основе html-верстальщик «разрезает» эскиз на части и производит верстку его деталей с помощью тегов языка гипертекста.

После столь подробного изложения хочется быстрее взяться за самостоятельное создание макета сайта в Photoshop. Но прежде стоит рассмотреть свод правил, которым должен соответствовать будущий графический макет.

Признаки настоящего макета интернет-портала

Графический эскиз сетевого ресурса должен обладать следующими свойствами:

1) Макет может быть представлен лишь в одном из двух графических форматов – psd или tiff.
2) При создании макета в редакторе каждый из элементов сайта должен быть расположен в отдельном слое (layer). Это во многом упрощает процесс редактирования изображения. Изменение одного элемента (слоя) никак не затронет другие элементы:

3) Для сайта фиксированной ширины всегда следует учитывать отступы от боковых границ экрана. При резиновой верстке справа в «шапке» и «подвале» страницы нужно оставлять столько места, чтобы все элементы при значительном уменьшении ширины легко могли разместиться.
4) Фон должен быть максимально однородным для всех страниц портала:

5) Нельзя использовать в качестве подложки громоздкие фоновые изображения – они сильно утяжеляют вес всей страницы, и увеличивает время ее загрузки.
6) Выравнивать положение всех слоев следует осуществлять только с помощью специальных направляющих.
7) При нанесении надписей в макете сайта в Фотошопе нужно пользоваться стандартными наборами шрифтов. Для эффектов искажения текста следует использовать отдельные изображения.
8) При отображении элементов форм нужно стараться придерживаться их стандартных пропорций.
9) Большое количество элементов «фурнитуры» окна (кнопки, иконки) размещают в отдельном файле, прикрепленном к макету.
10) Раздвигающиеся и выпадающие списки и меню должны быть представлены в двух состояниях (закрытом и раскрытом).

Теперь, когда ознакомились с тем, как должен выглядеть настоящий psd макет сайта, примемся за дело.

Пример создания макета сайта

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

Сначала нужно определиться с вариантом размещения основных блоков страницы. К ним относятся:

• Шапка – находится сверху. Чаще всего на ней размещаются логотип и название сайта;
• Меню – включает в себя несколько активных пунктов или кнопок для перехода между страницами сайта;
• Левая и правая колонки;
• Подвал – находится внизу макета страницы сайта.

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

Также важно правильно определиться с размерами макета сайта в Фотошопе.

А теперь начинается самое интересное:

1. Создаем новый файл и задаем размеры будущего макета. Для этого заходим через меню «Файл» - «Новый». В появившемся окне задаем размеры и имя файла:

2. Затем создаем фон макета сайта. В панели инструментов выбираем инструмент «Градиент». В верхней панели устанавливаем его тип и цвет, и проводим градиентом по поверхности. Вот что получилось:

3. Размечаем поверхность макета с помощью направляющих. Сначала делаем разметку основных элементов макета (шапки, подвала, меню и боковин):

4. Оформление psd макета сайта начинаем с шапки.

• Выделяем область под название сайта с помощью инструмента «Прямоугольная область»;
• Затем делаем заливку ограниченного участка градиентом;
• Инструментом «Текст» наносим название сайта:

• После чего применяем к каждому текстовому слою эффект «Рельефность». В правом верхнем углу располагаем изображение логотипа сайта путем копирования слоя из другого изображения.

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

Чтобы группировать слои, нужно создать папку для их размещения. Для этого следует нажать на иконку папки внизу панели «Слои». Группировка элементов происходит путем перетаскивания слоев в нужную папку:

5. Создание макета сайта продолжим оформлением панели меню, расположенной сразу под шапкой.

• Создаем заготовку кнопки меню в отдельном файле. Сохраняем ее в формате psd. Она пригодится в дальнейшем:

• Затем наносим разметку расположения будущих кнопок с помощью направляющих. Изображение заготовки кнопки переносим копированием слоя или перетаскиванием на основной файл макета сайта. С помощью инструмента «Текст» пишем название кнопок меню:

6. Теперь примемся за боковые панели. Левая боковина будет немного шире правой (150 и 100 пикселей). Это делается с учетом того, что на правой половине потом можно будет разместить рекламу или дополнительные кнопки.

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

7. Теперь займемся нижней частью psd макета сайта. В отличие от боковых панелей сделаем ее с помощью инструмента «Заливка», а затем доведем любым из фильтров (пункт главного меню «Фильтр»):

8. Чтобы макет смотрелся более правдоподобно, в области отображения контента разместим какой-нибудь текст с картинкой. Его можно взять с другого изображения путем перетаскивания слоя. А вот окончательный вариант макета сайта:

Конечно, данный пример не претендует на звание лучшего.

Кроме гармоничного сочетания цветовой гаммы в этот макет сайта можно добавить еще несколько элементов и надписей. Но все это делается так же, как описано выше.

Что дальше происходит с макетом сайта

А дальше из этого графического представления дизайна верстальщик делает макет сайта html. При этом сохраняются все пропорции элементов и частей сайта.

Те элементы дизайна, которые нельзя отобразить с помощью тегов html, вырезаются из графического макета и затем используются в качестве фоновых изображений. В случае с нашим примером к таким элементам относятся рисунки основного фона и всех составных частей. Название сайта и его логотип вырезаются и вставляются в код html отдельно.

Некоторые элементы управления, которые имеют сложный дизайн, тоже вырезаются и используются как фоновые изображения. В нашем примере к таким частям относятся кнопки.

А может сразу html?

Верстка макета сайта сразу в html является неэффективной. Многие из элементов дизайна нельзя отобразить с помощью языка гипертекста. К тому же редактирование и разработка визуального представления происходит намного проще и быстрее.

Создание макета графического дизайна интереснее скучной верстки. К тому же оно предоставляет большой простор для самовыражения и творчества. Но для этого нужно хорошо знать все инструменты графических редакторов.