Создаем дизайн веб-страницы с помощью 960 Grid

В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System. Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:

Шаг 1: Создаем новый документ

Начнем с создания нового документа в Photoshop, шириной 1680 px и высотой 1100 px. Фон заливаем светло-серым цветом (# F9F9F9).

Шаг 2: Добавляем сетку

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

Все это поможет провести рабочий процесс на одном дыхании, и прекрасно подходит для создания прототипов ваших макетов.

Для начала скачайте 960 grid system. После этого распакуйте 960 Grid System Натана

Смита в папку с шаблонами. Открываем 12 столбцовый макет 960 grid в Adobe Photoshop:

Теперь нам нужно создать базовую сетку. Базовая сетка поможет с промежутками между элементами и высотой линий. Создадим новый документ 24 на 24 пикселя, удалим фон, нарисуем линию, толщиной 1 px в нижней части документа.

Мы определим этот документ как шаблон: Edit > Define Pattern и присвоим ему запоминающееся название:

Далее возвращаетесь к нашему документу и создаете новый слой. Заполняете этот слой шаблоном, Edit> Fill. Так мы создадим базовую сетку:

И наконец, мы выделим нашу рабочую область, используя направляющие. Создаем новую направляющую View > New Guide, выбираем вертикальный тип и создаем направляющие в точках 360px, 840px и 1320px.

Мы выбрали именно эти точки, потому как при ширине рабочей области в 960px, между точками 360px и 1320px - центральная 840px.

Полезные направляющие

Если вы работаете напрямую из файла 960 Template, направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides:

Сохраняем документ как шаблон

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

Высоту холста всегда можно изменить под свои нужды. И опять же, со временем вы, вероятно, отдадите предпочтение полноценной системе с дополнительными направляющими.

Шаг 3: приступаем к дизайну

Теперь, когда у нас настроен шаблон, мы можем приступить непосредственно к дизайну.

Мы разделим страницу на пять секций:

1. Header;
2. Callout;
3. Content – Left;
4. Content – Right;
5. Footer.

Шаг 4: Добавляем заголовок (Header)

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

С помощью Rectangular Marquee Tool выбираем область шириной во весь документ и высотой в 120px — вам могут помочь направляющие или же тяните за край прямоугольного выделения до тех пор, пока не заполните пять горизонтальных маркеров, затем заливайте выделенную область серым цветом (#2C2C2C).

Эта область будет использоваться под лого и панель меню:

Шаг 5: Вставляем лого

Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px. Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic.

Первое слово - залито светло-голубым (#ADC7D9), второе выделено жирным и залито белым (#FFFFFF). Далее применяем внутреннюю тень к элементам лого.

Я уменьшил внутреннюю непрозрачность до 25%, поставил значения Distance равное 2px , Choke равное 0% и Size - 5px:

Шаг 6: Добавляем меню

Меню. Чтобы сохранить простой и строгий вид, мы будем использовать текст в основе меню. Выбираем для меню шрифт 18pt Arial.

Цвет активной ссылки, которая, в нашем случае, Home, имеет белый цвет (#FFFFFF), а остальные заполняем серым (#BBBBBB). Совмещаем эти элементы и помещаем их в центре верхней части заголовка:

Шаг 7: Добавляем Callout

Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает — выкладывает информацию о странице.

Повторим действия на примере тех, что выполнили, создавая заголовок. С помощью инструмента Rectangular Marquee, выбирая высоту, равную 240px и заполняя голубым цветом (#ADC7D9), как и лого, делаем прямоугольник.

Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay. Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay, уменьшаем opacity до 30%:

Шаг 8: Делаем фон для области Callout

Так как мы назвали компанию «blue grid», добавим фон для секции Callout в стиле решетки. Для этого будем использовать технологию, схожую с той, которой пользовались, добавляя горизонтальные линии.

Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.

Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern:

Шаг 9: Добавляем фон для секции Callout

Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill:

Поверните этот слой на 15 градусов, примените к нему наложение белого цвета и поместите его над секцией callout. Затем создайте новый слой и объедините его с белым решетчатым слоем. Дайте ему имя:

Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.

Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete. Эти действия уберут всю сетку, которая не находится в области блока callout:

Следующее, что мы должны сделать - убедиться в том, что решетчатый участок распространяется только на область рабочей зоны шириной в 960px. Используйте View > Show > Guides, затем добавьте маску слоя к решетчатому слою:

Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G), выберите градиент от черного к прозрачному.

Мы собираемся использовать данный способ для того, чтобы уничтожить сетку, которая располагается за переделами области в 960px.

Убедитесь, что тип градиента - Linear, и он установлен от черного к прозрачному. Начинайте от края и перетаскивайте градиент к началу решетки.

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

Шаг 10: Добавляем содержимое в область Callout

Область callout необходимо наполнить контентом, который будет выполнен шрифтом Arial 45pt (#2C2C2C) и выделить необходимые слова жирным.

Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:

Шаг 11: Добавляем слайд-шоу

Берите в руки Rectangular Marquee Tool и растягивайте прямоугольник между крайними правыми и средними направляющими, ставьте высоту в 8 линий, оставляя 1 линию вверху и 1 линию внизу, и заливайте темно-серым цветом (#2C2C2C).

Это фон к слайдшоу:

Добавьте тень к фону, дважды кликнув на панели Layer style и выбрав drop shadow, изменив цвет на # (2C2C2C) и выбрав Distance равный 1px и size, равный 10px:

Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px, выбрав инверсию, как ранее, далее delete:

Шаг 12: Секция содержимого

Для начала добавим легкий градиент в этой секции. Сначала используйте Rectangular Marquee Tool, чтобы выбрать область для размещения контента, затем - Gradient Tool (G).

Выберите градиент от цвета (# f0f0f0) к прозрачности и перетащите его вниз. Не заходите слишком далеко. Фон у границы нижней части страницы должен вернуться к цвету (# F9F9F9):

Шаг 13: Содержимое – левая область

Добавьте параграф описания шрифтом Arial 18pt #9C9C9C и со стилем ссылки Underlined #A3BBCC:

Шаг 14: Добавляем список услуг

Для начала добавьте заголовок шрифтом Arial 25pt Bold #262626, затем добавьте элементы списка шрифтом Arial, цветом # 9C9C9C и величиной в 18 пунктов.

Пункт маркированного списка можно иллюстрировать с помощью Elliptical Marquee Tool или же использовать комбинацию клавиш Alt +7.

Выкрасите все пункты списка в светло-голубой цвет (# A4BCCD) и выровняйте по сетке:

Повторяйте этот шаг для добавления данных:

Шаг 16: Подвал

Наш последний раздел - подвал. Он будет содержать форму для авторизации, контактные данные и несколько ссылок. Начните с выбора нижней секции инструментом Rectangular Marquee Tool и залейте её темно-серым цветом (# 262626):

Добавим форму. Создайте заголовок шрифтом Arial 20pt Bold (#FFFFFF) и поместите в левую часть подвала. Затем с помощью инструмента Rectangular Marquee Tool нарисуйте два прямоугольника, которые будут полями для ввода данных.

Добавьте описания этим полям шрифтом Arial 16pt #9C9C9C:

Добавьте кнопку подтверждения ввода подобным же образом, но используя инструмент Rounded Rectangle Tool(U), затем добавьте Inner shadow к созданным элементам, установите значения параметра opacity в 30%, а size и spread в "0" и distance в 10px.

Добавьте ссылку «восстановить пароль» шрифтом Arial 13pt Underline #A4BDCD:

Шаг 17: Подвал – правая часть

И наконец. Давайте закончим наш дизайн, добавив информацию о наших контактах. Заголовок исполните шрифтом Arial 20pt Bold (#FFFFFF) и подчеркните его, и ниже добавьте сами контакты шрифтом Arial 16pt #FFFFFF:

Шаг 18: Проверьте выравнивание и баланс всей страницы

Используя сетку и направляющие, проверьте, что все выровнено и сбалансировано. Если нет - подстройте:

Шаг 19: Расслабьтесь. Финиш!

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

Я настоятельно рекомендую вам экспериментировать с этими системами до тех пор, пока работа с ними не станет вашей второй натурой. Со временем, система сеток значительно облегчит вам вашу работу в качестве дизайнера!

Скачать PSD-файл