Всем привет и добро пожаловать в новый урок от hv-designs, в котором мы будем создавать новый шаблон для Software сайта с приятной деревянной текстурой на фоне.

Создание Документа и Фона

Создайте новый документ размером 1200 x 1120 pixels и с прозрачным фоном.

Когда то мы создавали деревянную текстуру от Matt Hamm. Скачайте ее, вставьте в работу и подвиньте в левый верхний угол документа.

Продублируйте слой, кликнув правой кнопкой мыши по его иконке и нажав “duplicate layer”. Отразите копию слоя по горизонтали и поместите справа от первой текстуры.

Повторите этот процесс и замостите слоями весь документ (после заполнения верхнего ряда, отражайте копии по вертикали, дабы состыковывать их снизу). В конце работы объедините все слои и назовите получившийся background. Обсцветьте слой background, выполнив image > adjustments > desaturate.

Создание Заголовка и Панели Навигации

Возьмите инструмент type tool и создайте название будущего сайта в верхнем левом углу. Шрифт и параметры текста, которые использовал я, можно посмотреть на изображении:

Ко всему прочему для слоя с текстом добавьте следующие стили слоя (Layer > Layer Style):

В правой части документа, на одной линии с логотипом сайта создайте надписи навигации, используя цвет #b3b3b3. Первое слово сделайте белым (цвет — #ffffff).

Для линка с первой белой надписью Home мы создадим плавающую фигурку. Возьмите rounded rectangle tool с размером 15 px.

На новом слое под слоем со словами вокруг первой гиперссылки создайте вот такую закругленную формочку:

Залейте выделение любым цветом и добавьте следующие стили слоя:

Результат должен быть таким:

Создание Внешней Центральной Области

Возьмите инструмент rectangular marquee tool и создайте большой белый прямоугольник размером примерно 850 x 700 pixels. К данному слою добавьте 15% шум, выполнив filter > noise > add noise. Для удобства можно задать слою имя Outer Content Area.

Теперь к слою с забитым шумом прямоугольником примените такие стили слоя:

Получиться должно вот так:

Создание Внутренней Центральной Области

Кликните по иконке слоя Outer Content Area, удерживая клавишу Ctrl, чтобы загрузить выделение и перейдите select > modify > contract. В появившемся диалоговом окне выставьте значение 20pixels. На новом слое залейте выделение белым. Назовите слой Inner Content Area.

Стили слоя такие:

В результате мы имеем вот такой центр:

Создание Визуальной Центральной Области

Загрузите выделение слоя Inner Content Area, кликнув по его иконке, удерживая Ctrl. Сожмите выделение select > modify > contract на 20pixels и на новом слое залейте белым цветом. К получившемуся прямоугольнику добавьте стиль слоя Stroke (Layer > Layer Style) размером 1 px и цветом #e4e4e4.

Возьмите rectangular marquee tool или любой другой выделяющий инструмент и создайте выделение, большее размеров прямоугольника снизу и по бокам, но отступив сверху примерно 200 px и нажмите Delete. Это обрежет изначальную область снизу и оставит вот такой узкий прямоугольник:

Загрузите выделение этого прямоугольника и сожмите его на 5—10 px (select > modify > contract). Получился еще меньший прямоугольник. Залейте его белым цветом, предварительно создав новый слой и добавьте стиль Gradient Overlay.

Результат на данном этапе таков:

На иконке слоя только что созданного голубого прямоугольника кликните левой кнопкой мыши, удерживая Ctrl, тем самым загрузив его выделение. Дальше создайте новый слой и идите filter > render > clouds и затем filter > pixelate > mosaic, используя значения как на картинке снизу.

Blend Mode слоя поставьте на soft light, а его непрозрачность на 75%.

Теперь сюда можно добавить нужную информацию и какую-либо иконку.

Создание Кнопок

Создайте два кружка по бокам визуальной области. не делайте их слишком маленькими, но и большими тоже. Добавьте к слою с кнопками следующие стили:

Получиться должно так:

В заключении работы с кнопками создайте на них вот такие серые стрелочки:

Содержимое

Дальше я не буду объяснять шаг-за-шагом как добавлять текст при помощи type text tool. Сделайте голубые заголовки, текст серого цвета под ними, используйте место в визуальной части.

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

Создание Нижнего Колонтитула

Возьмите rectangular marquee tool и выделите область внизу работы поверх деревянной текстуры. Залейте ее черным цветом и поставьте параметр Fill слоя на 45%.

Примените к слою вот такие стили:

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

Автор: Richard Carpenter.
Перевод: NINJA_49.

P.S - Надеюсь хоть такие уроки кому-то Интересны.