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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Header;
  • Callout;
  • Content – Left;
  • Content – Right;
  • Footer.
  • Создаем дизайн веб-страницы с помощью 960 Grid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Шаг 16: Подвал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Перевод статьи «Design a Clean Web Layout with the 960 Grid» был подготовлен дружной командой проекта Сайтостроение от А до Я.

    О нас seoexpert

    продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

    Смотрите также

    16 лучших примеров дизайна главной страницы сайта

    Для любой компании главная страница сайта – виртуальная парадная дверь. Если посетителю не нравится то, ...