В этом уроке Вы узнаете, как, шаг за шагом, создать потрясающий дизайн в стиле веб 2.0. Вы будете использовать некоторые базовые техники промежуточного уровня для создания Вашего собственного стиля веб-дизайна чистого "Web 2.0", с применением системы 960 Grid System.
Это серия уроков из двух частей, которая научит вас, как создать макет в Photoshop, а затем - как преобразовать его к стандартным требованиям (X)HTML веб-дизайна.

Создайте новый документ 1200 х 1050 пикселей.

Возьмите инструмент Gradient Tool (G), убедитесь, что установлен линейный градиент (Linear Gradient). Установите цвет переднего плана #a1e8fe, а заднего - #59d3fa и залейте холст, как показано на рисунке:

На новом слое создадим сетку шириной 960px - 12 баров, каждый по 60px шириной. Между барами 20px. Сетку разместим в центре документа. Сетка служит в качестве вспомогательного шаблона, и рекомендуется, чтобы основные элементы дизайна не выходили за пределы сетки. Сервис 960 Grid System представляет собой попытку рационализировать рабочий процесс веб-разработки, обеспечивая широко используемые размеры, основанные на ширине 960 пикселей. Вы можете перейти на сайт 960 Grid System для получения дополнительной информации или загрузить систему здесь. В архиве много лишнего, но нам сейчас нужен только файл 960_grid_12_col.psd в папке temlates/photoshop. Откройте его в фотошопе, удалите белый фон, а группу слоев с барами объедините Layer -> Merge Group. Затем скопируйте и вставьте в наш документ. Сетка встанет точно по центру. Можете ее немного растянуть вверх и вниз инструментом Free Transform, чтобы не было пустых мест. После этого закройте файл 960_grid_12_col.psd не сохраняя. Ваш холст теперь выглядит так:

Теперь создадим контейнеры для нашего логотипа и панели меню навигации. Возьмем инструмент Rounded Rectangle Tool с настройками, как на картинке, т.е. иконка Shape Layers должна быть нажата. Радиус 10px.

P

Создадим контейнер для лого шириной 300 пикселей, а для меню 620. Они должны быть расположены на сетке таким образом:

К каждому прямоугольнику примените следующие стили:

P

P

Должно получиться что-то вроде этого:

Вставляем лого и текст навигации. Для создания меню навигации, воспользуйтесь инструментом Type Tool (T). Цвет #5f5f5f, шрифт Rockwell или какой-нибудь на Ваше усмотрение. В другой контейнер вставьте логотип.

Создадим разделители для пунктов меню На новом слое проведите 1-пиксельные линии цветом #dedede между пунктами меню.

Продублируйте слой и пройдите в меню Layer > Layer Style > Blending Options > Color Overlay - смените цвет на белый. Затем сместите слой на 1 пиксель вправо. Должен получиться эффект гравюры.

Теперь давайте создадим заголовок ниже логотипа и навигации. Используя Type Tool (T), добавим название и краткое введение ниже. Затем добавим небольшие тени, чтобы придать надписи большую выразительность.

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

Теперь под нашим кратким введением сделаем кнопку "Подробнее", чтобы посетитель сайта мог свободно перейти к более полной информации. Для этого возьмем Rounded Rectangle Tool с радиусом 28 пикселей, создадим кнопку и применим к ней Gradient Overlay, используя цвета #086da0 - низ кнопки, #23a7ea - верх:

Снова берем Rounded Rectangle Tool и создаем бокс шириной 300px с радиусом углов 16px. Идем в Blending Options и добавляем тени Drop Shadow, как мы это делали для панели навигации.

Выделяем наш бокс, для этого нужно кликнуть на иконке слоя в панели слоев, удерживая при этом клавишу Ctrl и создаем новый слой над ним. Заливаем выделенную область градиентом от светло-голубого (#96e3fc) к прозрачному.

Сместим слой с градиентом на один пиксель вверх.

Этот бокс у нас будет служить кнопкой для перехода к какой-то информации. В этом уроке использованы иконки от Wilson Ink на DeviantArt. Набор называется Green and Blue Icon Set, Вы можете свободно его скачать и использовать в некоммерческих целях.

Дважды продублируем наш бокс и равномерно распределим всё это по сетке. В двух новых боксах изменим информацию и сменим иконки.

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

Далее сделаем футер, где разместим копирайты и контактную информацию сайта.

Добавим еще одну фишку - диагональные полосы на фон. Создайте новый документ 25px x 25px и залейте его черным цветом.

Создайте новый слой, инструментом Zoom Tool (Z) максимально увеличьте документ. Возьмите карандаш Pencil Tool в 1px с белым цветом и нарисуйте линии, в точности, как на картинке ниже.

Теперь соедините линии таким вот образом:

Заполните пустые области белым цветом, чтобы получить следующий результат:

Отключите слой с черным фоном и пройдите в меню Edit > Define Pattern. Назовите Вашу кисть "diagonals" и нажмите ОК. Теперь этот документ можете закрыть, чтобы не мешался. Вернемся к нашему проекту. Создайте новый слой над нашим основным фоном. Теперь идем Edit > Fill и в появившемся окне выбираем use Pattern. Кликните на стрелке Custom Pattern и найдите Ваш новый паттерн "diagonals". Жмите ОК. Должно получиться так:

В настройках слоя выберите режим смешивания (Blend Mode) - Overlay, а непрозрачность поставьте 4%. Получится вот так:

Возьмите инструмент Eraser с мягкой кистью (размер 200-300px) и начиная с низа сотрите примерно 60% полосатого слоя. Теперь Ваш проект выглядит так:

P

Ну вот... Мы с Вами имеем чистый "веб-два-нольный" дизайн сайта. Следите за новостями сайта - в одном из следующих уроков я покажу Вам, как конвертировать этот дизайн в рабочий (X)HTML шаблон. До встречи!

Оригинал: sixrevisions.com
Перевод: www.stilia.ru