Сайт о софте

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

Загрузите эти иконки:

Классические иконки
Коробка софта


Создание документа
Создайте новый документ размером 1200х1200 пикселей. Установите цвет заливки - #d6d6d6, цвет фона – #efefef и выберите инструмент Градиент (Gradient Tool), стиль – линейный.

Сделайте заливку холста сверху вниз на 250-300 пикселей.

Создание шапки
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение высотой 160-170 пикселей на всю ширину холста.

Установите цвет заливки - #483f38, цвет фона - #1e1916. Выберите инструмент Градиент (Gradient Tool), стиль – зеркальный.

Из середины прямоугольного выделения сделайте заливку к любой из его сторон. Потом примените фильтр Добавить шум (Add Noise Filter):

Создание заголовка
Текстовым инструментом создайте заголовок и слоган. Цвета показаны ниже:

К заголовку примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Умножение

К одному из слов заголовка примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный

Малая навигация
Выберите инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 10 пикселей.

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

Примените к прямоугольнику эти стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени (Режим – Нормальный):

Внутренняя тень (Режим – Умножение):

Наложение цвета (Режим – Нормальный):

Напишите названия разделов.

Создание основной навигации
Перед созданием основной навигации, мы отделим область шапки. Инструментом Прямоугольная область (Rectangular Marquee Tool) или Горизонтальная строка (Single Row Marquee Tool) создайте две 1-пиксельные линии чёрного и белого цвета друг на друге. Эти две линии должны быть расположены прямо под шапкой.

Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) создайте фигуру, как показано ниже.

Примените к прямоугольнику эти стили:

Отбрасывание тени (Режим – Умножение):

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Создайте ещё один прямоугольник внутри высотой в половину первого внутри него. Цвет – белый.

Установите Непрозрачность слоя – 5%.
Создайте новый документ размером 25х25 пикселей с прозрачным фоном. Инструментом Карандаш (Pencil Tool) нарисуйте такой узор чёрного цвета.

Когда закончите, перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните узор под именем “Diagonal Lines”.
Вернитесь в основной документ, сделайте выделение основного прямоугольника навигации (Ctrl+Click), создайте новый слой (Create New Layer) и залейте выделение узором при помощи инструмента Заливка (Paint Bucket Tool). Установите Непрозрачность слоя – 10%.

Создание поискового поля
Текстовым инструментом напишите названия разделов навигации. Справа создайте прямоугольник с закруглёнными углами с радиусом 5 пикселей.

К прямоугольнику примените эти стили:

Отбрасывание тени (Режим – Нормальный):

Внутренняя тень (Режим – Умножение):

Наложение цвета (Режим – Нормальный):

Добавьте иконку лупы и текст “Search Here”.

Создание рекламной области
Под навигационной панелью напишите текст с заголовком.

Справа от текста вставьте иконку коробки.

Сделайте копию слоя с коробкой, уменьшите её и расположите сзади. Примените к ней фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 1 пиксель.

Сделайте копию размытой коробки и примените тот же фильтр размытия со значением 1 пиксель. Уменьшите её и расположите так:

Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 10 пикселей создайте две кнопки. Примените к ним те же стили слоя, что и к навигационной панели.

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

Создание разделителя
Создайте две 1-пиксельные линии:

Создайте выделение прямо под этими линиями:

Установите цвет заливки - #e6e6e6, цвет фона - #efefef, и сделайте заливку линейным градиентом сверху вниз.

Добавьте маску слоя к линиям (Layer Mask), цвет заливки – белый, цвет фона – чёрный. Сделайте заливку зеркальным градиентом от середины линий к краю. Проделайте это для обеих линий и градиентной заливки.

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

Примените к нему эти стили:

Внутренняя тень (Режим – Нормальный):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Заполните этот прямоугольник:

Справа от прямоугольника напишите немного текста и вставьте иконки.

Футер
Сделайте копию шапки и опустите её вниз. Сожмите его немного и скопируйте разделительную линию. Допишите информацию футера.

Финальный результат: