Ресурсы, использованные в этом уроке:
-кожаная текстура
-эмблема Apple Imac

Шаг 1
Создайте новый документ (1000X2000px).
Начните с расположения текстуры кожи в верхней части холста.



Примените опцию наложения (стиль слоя) Наложение цвета (color overlay) к вашему слою с кожаной текстурой.

Параметры стиля слоя Наложение цвета
Режим наложения (Blend Mode): Нормальный (Normal)
Цвет (Color): 585858
Непрозрачность (Opacity): 90%



Примените корректирующий слой Цветовой тон/Насыщенность (hue/saturation adjustment layer), создав предварительно обтравочную маску. Это позволит применить коррекцию именно к нижеследующему слою.

Параметры слоя коррекции Цветового тона/Насыщенности
Тон (Hue): 0
Насыщенность (Saturation): -100
Яркость (Lightness): -30



Шаг 2
Сгруппируйте слой с текстурой и корректирующий слой, после чего создайте копию этой группы.

Переместите копию группы в нижнюю часть холста, покрывая его полностью.

Если ваши текстуры состыкуются не идеально, можно замаскировать верхнюю часть текстуры-дубликата при помощи мягкой, черной кисти. Это должно состыковать их бесшовно:



Шаг 3
Создайте новый слой и назовите его “Затемненный низ”.

Выделите нижнюю часть холста, оставив сверху полосу, шириной примерно 350 пикселей. Залейте эту область черным цветом. Уменьшите непрозрачность этого слоя до 30%.




Шаг 4
Добавим текстовый элемент по центру верхней части холста. Напечатайте крупную букву “f”, задав следующие параметры текста:

Параметры текста (Text Settings)
Шрифт (Font Face): PT Banana Split
Размер шрифта (Font Size): 480pt
Интервал (Kerning): -50
Цвет (Color): 000000



Теперь уменьшите непрозрачность ЗАЛИВКИ (FILL opacity) (не основную Непрозрачность) до 15%.

Примените стиль слоя Внутренняя тень (inner shadow), чтобы придать объемность:

Параметры стиля слоя Внутренняя тень
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): 000000
Непрозрачность (Opacity): 10%
Угол (Angle): 90
Расстояние (Distance): 5px
Стягивание (Choke): 0%
Размер (Size): 5px




Шаг 5
Создайте копию слоя с буквой “f” и переместите ее в правую нижнюю часть холста.



Шаг 6
Создайте новый слой и назовите его “Подсветка шапки”.

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



Уменьшите Непрозрачность (Opacity) этого слоя до 40% и измените его Режим Наложения (blend mode) на Перекрытие (overlay). Это немного сгладит эффект.



Повторите этот прием, создавая светлое пятно в левой части “шапки”, именно там, где вы намерены в последующем разместить ваш логотип.



Шаг 7
Настало время поместить на холст направляющие (guides), которые помогут нам выполнить компоновку страницы. Расставьте направляющие в следующем порядке:

Вертикальные направляющие:
50px, 100px, 150px, 600px, 650px, 850px, 900px, 950px

Горизонтальные направляющие:
200px, 900px



Шаг 8
Опираясь на расставленные направляющие, при помощи Прямоугольника со Скругленными Краями (rounded rectangle) обозначьте на холсте белым цветом область основного контента (задайте радиус закругления краев равным 20 px).



Примените стили слоя Внешнее свечение (outer glow) и Обводка (stroke). Это четче обозначит грани вашей области основного контента.

Параметры стиля слоя Внешнее свечение
Режим наложения (Blend Mode): Normal
Непрозрачность (Opacity): 15%
Шум (Noise): 0%
Цвет (Color): 000000
Размах (Spread): 0%
Размер (Size): 13px

Параметры стиля слоя Обводка
Размер (Size): 13px
Позиция (Position): Внутри (Inside)
Режим наложения (Blend Mode): Normal
Непрозрачность (Opacity): 15%
Тип заливки (Fill Type): Цвет (Color)
Цвет (Color): d4d4d4




Шаг 9
Создайте новый слой под слоем с областью основного контента. Назовите новый слой “Контурные линии”. При помощи жесткой кисти из стандартного набора Photoshop чтобы обозначить кромку контентной области. Уменьшайте непрозрачность этого слоя, пока эффект не станет едва уловимым (я использовал 20%).



Шаг 10
Разместите текст логотипа на вашей “шапке”.

Установки текста логотипа
Шрифт (Font Face): Proxima Nova
Размер шрифта (Font Size): 480pt
Интервал (Kerning): -50
Цвет (Color): ffffff
Начертание (Styling): Italics



Параметры стиля слоя Падающая тень (Drop Shadow)
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): 000000
Непрозрачность (Opacity): 50%
Угол (Angle): 90
Расстояние (Distance): 1px
Размах (Spread): 0%
Размер (Size): 2px




Шаг 11
Теперь займемся иконкой нашего логотипа.
Начните с прорисовки с базовой фигуры, которая станет основой логотипа. Лично я использовал стандартную фигуру щита, входящую в стандартный набор произвольных фигур (custom shape) Photoshop. Эта фигура может быть любого цвета.



Примените к этому слою стили слоя Падающая тень (drop shadow) и Наложение градиента (gradient overlay).

Параметры стиля слоя Падающая тень
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): 000000
Непрозрачность (Opacity): 25%
Угол (Angle): 90
Расстояние (Distance): 5px
Размах (Spread): 0%
Размер (Size): 5px

Параметры стиля слоя Наложение Градиента
Режим наложения (Blend Mode): Normal
Непрозрачность (Opacity): 100%
Градиент (Gradient): 0d77d0 to 38a3ff
Стиль (Style): Линейный (Linear)
Угол (Angle): 90




Теперь, удерживая Ctrl, кликните ЛКМ по иконке слоя на палитре слоев. Это создаст выделенную область вокруг фигуры логотипа. При активной выделенной области создайте новый слой. Назовите его “Свечение иконки логотипа”. Протащите радиальный градиент “от белого к прозрачному” (white to transparent) из середины верхней части логотипа. В силу активного выделения, градиент ляжет как раз в рамках иконки.



Измените непрозрачность этого слоя на 50% и задайте режим наложения Перекрытие (overlay), что бы сделать эффект менее очевидным.



Шаг 12
Напишите пункты меню в правой верхней части вашего холста.

Параметры текста пунктов меню
Шрифт (Font Face): Arial
Размер шрифта (Font Size): 18pt
Интервал (Kerning): -50
Цвет (Color): ffffff



Шаг 13
Создайте новый слой под слоем с пунктами меню и назовите его “Активный пункт”.

При помощи инструмента Перо (Pen) создайте красивый контур, выделяющий активный пункт меню, и залейте его черным цветом. Далее, уменьшите Непрозрачность (Opacity) этого слоя до 60%.



Шаг 14
Проявляя некоторую оригинальность, отсюда я сразу перепрыгиваю к нижней части, чтобы заняться текстом “подножки”. Со всеми приемами, которые здесь нам понадобятся, мы уже знакомы, работая с созданными выше слоями, кроме слоя с областью контента.

Параметры слоя с нижним текстом
Шрифт (Font Face): Arial
Размер шрифта (Font Size): 14pt
Интервал (Kerning): -50
Цвет (Color): a3a3a3



Шаг 15
Скачайте изображение “Imac” и вставьте его в правый верхний угол области контента.



Шаг 16
Добавьте приветственный текст слева от изображения “Imac”.

Параметры текста заголовка
Шрифт (Font Face): Arial
Размер шрифта (Font Size): 48pt
Интервал (Kerning): -50
Цвет (Color): 3a3a3a
Начертание (Styling): Bold

Параметры меньшего текста
Шрифт (Font Face): Arial
Размер шрифта (Font Size): 18pt
Интервал (Kerning): -50
Цвет (Color): 7a7a7a
Начертание (Styling): Regular



Шаг 17
Создайте кнопку “Читать далее” ниже вашего приветственного текста.
Примените стиль слоя Наложение градиента с такими же установками, как для иконки логотипа. Затем примените стили слоя Падающая тень (drop shadow) и Внутренняя тень (inner shadow).

Параметры стиля слоя Внутренняя тень
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): 000000
Непрозрачность (Opacity): 10%
Угол (Angle): 90
Расстояние (Distance): 4px
Размах (Spread): 0%
Размер (Size): 3px

Параметры стиля слоя Падающая тень
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): 000000
Непрозрачность (Opacity): 10%
Угол (Angle): 90
Расстояние (Distance): 4px
Размах (Spread): 0%
Размер (Size): 0px



Теперь наложите слой со свечением в точности, как мы сделали со свечением иконки (для получения более сглаженного эффекта, используйте радиальный градиент).



Шаг 18
При помощи инструмента Кисть (brush tool) прочертите неровный разделитель серого цвета ниже раздела с приветствием:



Шаг 19
В центре области основного контента и ниже линии разделителя напечатаем подзаголовок “Популярные работы”.

Параметры текста подзаголовка
Шрифт (Font Face): Arial
Размер шрифта (Font Size): 18pt
Интервал (Kerning): +100
Цвет (Color): 6e6e6e



Ориентируясь по направляющим, уменьшенные изображения со скриншотами ваших дизайнерских работ. Каждая иконка со скриншотом должна быть размером 200X150px.



Примените стиль слоя Обводка (Stroke) к каждой из иконок.

Параметры стиля слоя Обводка
Размер (Size): 7px
Позиция (Position): Снаружи (Outside)
Режим наложения (Blend Mode): Normal
Непрозрачность (Opacity): 5%
Тип заливки (Fill Type): Цвет (Color)
Цвет (Color): 000000




Шаг 20
Продолжите область основного контента вниз, создавая раздел “Лучшие клиенты”.
Здесь следует разместить не просто иконки, а логотипы клиентов, с которыми вы работали:



Шаг 21
Пририсуйте прямоугольник светло-серого цвета (f3f3f3) между разделами с популярными работами и лучшими клиентами. Этот прямоугольник должен слегка выступать (примерно на 15 пикселей) за боковые грани вашей области с основным контентом.



Теперь примените стили соля Падающая тень (drop shadow), Внутренняя тень (inner shadow) и Тиснение (bevel/emboss).

Параметры стиля слоя Падающая тень
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): 000000
Непрозрачность (Opacity): 10%
Угол (Angle): 90
Расстояние (Distance): 5px
Размах (Spread): 0%
Размер (Size): 5px

Параметры стиля слоя Внутренняя тень
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): d4d4d4
Угол (Angle): 90
Расстояние (Distance): 1px
Размах (Spread): 0%
Размер (Size): 0px

Параметры стиля слоя Тиснение
Стиль (Style): Внутренний скос (Inner Bevel)
Метод (Technique): Плавное (Smooth)
Глубина (Depth): 1000%
Направление (Direction): Вверх (Up)
Размер (Size): 0px

Угол (Angle): 90
Высота (Altitude): 1
Непрозрачность подсветки (Highlight Opacity): 0%
Непрозрачность тени (Shadow Opacity): 20%




Шаг 22
Создайте новый слой и назовите его “Область 3D”. При помощи инструмента Лассо (lasso tool) создайте маленький черный треугольник прямо под областью, где ваш светло-серый прямоугольник выступает за грани области основного контента:




Шаг 23
Наконец, для завершения нашей верстки, в центре светло-серого прямоугльника добавьте в дизайн кнопку “Смотреть остальные”.
Для этого просто скопируйте слой с кнопкой “Читать далее” и переместите ее в нужное место. Измените надпись.



Итак, мы закончили!
Ниже вы можете посмотреть законченное изображение. Я надеюсь, урок вам понравился, и хотел бы услышать ваши отзывы о показанных здесь приемах и самом результате.