Создание красивого светлого шаблона сайта

10 января 2012 · Глеб Х. · «Мир Фотошопа»

Конечный результат:

Шаг 1: Загрузка сетки 960

Для создания шаблона мы будем использовать заранее подготовленную сетку, которая называется “960 Grid System”. Загрузите архив с официального сайта и распакуйте его. У Вас будет два шаблона: на 12 колонок и на 16. Чтобы объяснить Вам разницу, приведу простой пример. Допустим у Вас на сайте три основные части, значит, Вам нужно использовать шаблон на 12 колонок, так как число 12 делится на 3. Если у Вас четыре основные части, то подойдёт шаблон и на 12, и на 16 колонок. Ведь и 12 и 16 делятся на 4.

Шаг 2: Разметка структуры

Прежде чем начинать создавать шаблон, нужно разметить основные участки.

LOGO — Логотип

SEARCH — Поиск

NAVIGATION — Навигационное меню

HEADER — Шапка сайта

TABS — Вкладки

CONTENT — Контент

TESTIMONIALS — Рекомендации

FOOTER — Футер

FOOTER NAVIGTION — Навигационное меню в области футера

Шаг 3

Откройте PSD файл на 16 колонок “16_col.psd” в Фотошопе. Перейдите в меню Image → Canvas Size и введите значение Width — 1200 пикселей, Height — 1700 пикселей, Canvas Extension Color — Белый.

Шаг 4

Выберите инструмент Rectangle Tool (U) и создайте фигуру на всю ширину холста высотой 80 пикселей. Цвет фигуры — #dddddd.

Шаг 5

Создайте новый слой (Ctrl + Shift + N) над слоем с прямоугольником. Установите Blending Mode на Overlay. Сделайте выделение слоя с прямоугольником (удерживая клавишу Ctrl, кликните на иконке слоя в палитре слоёв). Выберите инструмент Brush Tool (B) с мягкими краями размером 600 пикселей, цвет — белый. Кликните несколько раз за пределами холста сверху, чтобы только край кисти находился на выделенной области. У Вас должен получиться слабый световой эффект. Дополнительно можете связать эти слои.

Шаг 6

Инструментом Rectangle Tool (U) создайте тонкую полоску в верхней части холста, как показано ниже.

Шаг 7

Создайте ещё один прямоугольник на расстоянии 500 пикселей от верхнего прямоугольника. Его высота должна быть 575 пикселей. Кликните дважды на слое с этим прямоугольником, чтобы открыть окно стилей. Примените Gradient Overlay:

Blend Mode: Normal

Opacity: 100%

Gradient: #d2d2d0#ffffff, Reverse: Выключено

Style: Linear, Align with Layer: Включено

Angle: -90

Scale: 100%

Шаг 8

Сейчас мы создадим тот же световой эффект, который был описан в шаге 5. Создайте новый слой (Ctrl + Shift + N) над всеми остальными. Сделайте выделение слоя с большим прямоугольником (удерживая Ctrl, кликните на иконке слоя). Выберите кисть с мягкими краями размером 600 пикселей белого цвета. Кликните несколько раз за пределами выделения. На выделении должен быть только край кисти.

Шаг 9

На новом слое создайте большой прямоугольник высотой 400 пикселей. Мы будем использовать его в качестве заголовка. Залейте его градиентом от #2787b7 к #258fcd, используя стиль Gradient Overlay.

Шаг 10

Создайте новый слой (Ctrl + Shift + N) и создайте 1-пиксельную линию синего цвета при помощи инструмента Pencil Tool (B). Примените к ней стиль Drop Shadow:

Blend mode: Multiply

Opacity: 65%

Angle: -90

Distance: 1px

Size: 6px

Создайте ещё один слой и нарисуйте белую линию под синей. Таким образом мы создали чёткий край. Используя этот метод, можете добавлять такую границу для каждой области.

Шаг 11

Создайте новый слой (Ctrl + Shift + N) и инструментом Rectangle Tool (U) создайте фигуру высотой 50 пикселей в верхней части холста, как показано ниже на скриншоте. Этот прямоугольник мы превратим в навигационное меню.

Примените к нему стиль Drop Shadow:

Шаг 12

Инструментом Rounded Rectangle Tool (U) с Радиусом (Radius) — 5 пикселей создайте фигуру цветом #f6a836. Примените к ней следующие стили:

Inner Shadow:

Blend Mode: Overlay, Цвет: Белый

Opacity: 60%

Angle: 120, Use Global Light: Включено

Distance: 7 пикселей

Size: 6 пикселей

Inner Glow:

Blend Mode: Normal, Цвет: Белый

Size: 4 пикселя

Остальное — по умолчанию

Stroke:

Size: 1 пиксель

Position: Inside

Цвет: #ce7e01

Сделайте выделение слоя с прямоугольником и перейдите в меню Select → Modify → Contract, введите значение 1 пиксель.

Создайте новый слой (Ctrl + Shift + N) и установите его Blending Mode на Overlay. Создайте тот же световой эффект, который описан в шаге 5. На этот раз используйте кисть маленького размера.

Выберите инструмент Horizontal Type Tool (T) и подпишите разделы сайта, используя шрифт “Arial”.

Шаг 13

Теперь переходим к созданию поискового поля. Инструментом Rounded Rectangle Tool (U) со значением Radius — 5 пикселей создайте фигуру на правой стороне холста в середине серой линии из шага 4. Примените следующие стили:

Inner Shadow:

(Blend Mode): Multiply, Цвет: Чёрный

Opacity: 9%

Angle: 90, Use Global Light: Включено

Distance: 0 пикселей

Size: 6 пикселей

Stroke:

Size: 1 пиксель

Position: Inside

Цвет: #dfdfdf

Напишите слово “Search …” и добавьте кнопку “GO”.

У нас уже собралось много слоёв, поэтому займёмся небольшой организацией. Создайте новую группу (кликните на иконке группы в нижней части палитры слоёв). Назовите её “search”. Выберите все слои, относящиеся к поисковому полю, и перенесите их в эту группу. В дальнейшем нужно группировать слои отдельных элементов дизайна для удобства.

Шаг 14

Создайте новый слой (Ctrl + Shift + N) и создайте кнопку “Sign Up” тем же способом, что и поле поиска.

Повторите создание эффекта из шага 5. Используйте кисть с мягкими краями размером 45 пикселей.

Шаг 15

Добавьте логотип сайта и подзаголовок.

Шаг 16

Займёмся организацией слоёв. Создайте новую группу и назовите её “top_bar”. Поместите все объекты верхней части холста в эту группу (логотип, подзаголовок, поисковое поле, кнопку “Sign Up”, навигационное меню и фоновые слои).

Создайте ещё одну группу “header”. Внутри этой группы мы поместим все слои, принадлежащие шапке сайта.

Шаг 17

Создайте новый слой (Ctrl + Shift + N) и создайте световой эффект, как в шаге 5. Сделайте выделение слоя с синей областью, и обрисуйте верхнюю часть большой кистью с мягкими краями. Установите Режим наложения — Перекрытие (Blending Mode — Overlay).

Используйте кисть размером 600 пикселей с мягкими краями белого цвета.

Шаг 18

Вставьте два изображения в наш документ и расположите их, как показано ниже. Сделайте копию обоих слоёв и инструментом Free Transform (Ctrl + T) отразите их по вертикали. Удерживая клавишу Shift, опустите перевёрнутые копии вниз. Инструментом Rectangular Marquee Tool (M) создайте выделение нижней половины переднего отражения. Затем перейдите в меню Select → Modify → Feather и введите значение 30 пикселей. Края выделения должны сгладиться. Нажмите клавишу Delete несколько раз на слое с отражением, чтобы получить эффект, показанный ниже.

Создайте новый слой (Ctrl + Shift + N) и установите Blending Mode на Overlay. Создайте эффект, описанный в шаге 5.

Поместите все эти слои в группу “header”.

Шаг 19

В области контента должны быть вкладки. Чтобы их создать, придётся проделать несколько шагов, но это того стоит. Инструментом Rounded Rectangle Tool (U) с радиусом 10 пикселей создайте фигуру высотой 70 пикселей. Теперь нужно избавиться от нижних закруглённых углов. Выберите инструмент Direct Selection Tool (A) и кликните на фигуре. Опустите угол вниз, удерживая Shift, чтобы он стал прямым. Потом нужно переместить рычажок контура вверх.

Шаг 20

Выберите инструмент Line Tool (U) толщиной 1 пиксель.

Шаг 21

Создайте разделитель, как показано ниже.

Шаг 22

Вставьте иконки, заголовки и описания на каждую вкладку. Я использовал иконки “Ray Cheung” с сайта “WebAppers.com”. Обычно одна из вкладок должна быть активной. Я не изменял цвет отдельной вкладки, а всего лишь сделал её ярче.

Шаг 23

Сделайте выделение слоя с фоном вкладок. Инструментом Rectangular Marquee Tool (M) обрежьте правую часть выделения (остальные вкладки). Для этого нужно установить значение Subtract from Selection.

Мягкой кистью белого цвета обрисуйте фон.

Шаг 24

Добавим тень. Создайте тёмно-серый прямоугольник позади вкладок, как показано ниже.

Добавьте маску к этому слою, кликнув на иконку в нижней части палитры слоёв.

Выберите большую мягкую кисть и обрисуйте чёрным края прямоугольника. Чёрный цвет на маске скрывает пиксели слоя.

В завершении создайте 1-пиксельую линию серого цвета, как показано ниже. Добавьте маску к слою с линией и подотрите края чёрной кистью на маске. Проделайте то же самое для другой стороны.

Шаг 25

Переходи к созданию контента. Для создания поста нужна картинка, заголовок и немного текста. Начнём с картинки. Инструментом Rectangle Tool (U) создайте прямоугольник. Примените к нему стиль Stroke: 1-пиксельная обводка светло-серого цвета. Затем примените стиль Drop Shadow: эффект не должен быть сильным.

Сделайте копию прямоугольника (Ctrl + J) и инструментом Free Transform (Ctrl + T) поверните её немного. Сделайте это ещё раз. Вращать нужно нижние слои.

Вставьте изображение и расположите его поверх белых прямоугольников. Не волнуйтесь, если изображение выходит за пределы прямоугольников, сейчас мы это исправим. Сделайте выделение слоя с верхним прямоугольником и перейдите в меню Select → Modify → Contract и введите значение 5 пикселей. К слою с изображением добавьте маску слоя.

Палитра слоёв должна выглядеть так:

Шаг 26

Займитесь организацией слоёв. Раскидайте все слои по группам.

Текстовым инструментом добавьте заголовок и напишите текст поста. Не забудьте вставить иконки. Чтобы ограничить область текста, инструментом Horizontal Type Tool (T) создайте выделение прежде чем что-то писать.

Опять организация слоёв.

Шаг 27: Рекомендации

Создайте большой прямоугольник высотой 220 пикселей. Добавьте ему 1-пиксельную серую обводку.

Внутри этого прямоугольника создайте ещё один на 10 пикселей меньше. Он также должен иметь 1-пиксельную светло-серую обводку.

Затем напишите текст.

Шаг 28

Переходим к созданию футера. Создайте прямоугольник высотой 400 пикселей тёмно-серого цвета.

Шаг 29

Создайте световой эффект, описанный в шаге 5.

Шаг 30

Над футером создайте прямоугольник высотой 10 пикселей. Потом создайте пару линий над и под границей прямоугольника.

Шаг 31

В нижней части холста создайте прямоугольник, который мы будем использовать для навигации. Его высота — 40 пикселей. Если нужно увеличить размер холста, чтобы всё уместить, перейдите в меню Image → Canvas Size.

Шаг 32

Добавьте белую 1-пиксельную линию над навигационным прямоугольником футера.

Шаг 33

Добавьте контент на футер, используя сетку.

Шаг 34

Займитесь организацией слоёв.

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

Ещё несколько примеров:

h2 pic

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта net.tutsplus.com, автор перевода указан в начале урока.