Для этого урока мы использовали: изображение стеклянной лестницы (фото Chris Borrell) и Векторные кисти набор #2 от PAULW.
Скачать кисти Abstract - Vector brushes 2 можно здесь: Вы не можете скачивать файлы с нашего сервера



Скачать изображение можно здесь: Вы не можете скачивать файлы с нашего сервера

Шаг 1 – создаем фон:
Открываем новый документ 750 на 550px.
Заливаем фон цветом #41432B.



Шаг 2a - регулируем настройки Кистей:
Откройте Brush Palette (Палитру Кистей), нажав F5.
Проверяем настройки в Shape Dynamics, Scattering и Other Dynamics (Динамика Формы, Рассеивание и Другая Динамика).
В «Динамика Формы» выставляем значения, показанные ниже:



Шаг 2b - регулируем настройки Brush Settings (Рассеивания кисти):
Выставляем значения, приведенные в примере ниже:



Шаг 2c - регулируем настройки Other Dynamics (Другая Динамика):
Выставляем значения как в примере ниже.
Эти параметры создают двойную форму кисти и рассеивание мазков вокруг курсора в процессе рисования.



Шаг 3a – красим Shapes:
Создайте новый слой и назовите его «Фигура 1».
Устанавливаем цвет foreground (переднего плана)#48180A и выбираем Brush 4 (из нового архива). Рисуем подобно примеру ниже. Нет никакого правила, как красить кистью, все рисуем произвольно.



Шаг 3b:
Создайте другой новый слой выше предыдущего и назовите «Фигура 2».
Устанавливаем цвет foreground #EEF4DA и выбираем Brush 25.
Рисуем этой кистью как в шаге 3a. Возможно, вы захотите уменьшить кол-во сгенерированных форм и выделить центр более ярким цветом.



Шаг 4 - группируем слои:
Создайте новую папку (Create a new group) и назовите «Узор». Перемещаем слои «Фигура 1» и «Фигура 2»в эту папку.
Проведите белую вертикальную линию в 2px, как в примере ниже.
Это определит справа пустую область, где вы позже сможете добавить текст.



Шаг 5 - маскируем Группу:
Используя инструмент Rectangular Marquee tool, выделяем левую часть холста, ограниченную белой линией.
Выберите папку «Узор» и создайте маску слоя с загруженным выделением (левой части).



Шаг 6a – добавляем лестницу:

Выделяем часть изображения лестницы, используя инструмент Pen tool. Нет необходимости точно очерчивать контур.
Разместите слой «Лестница» в папке «Узор» и выровняйте изображение, как в примере:



Шаг 6b -

В слое «лестница» идем Image > Adjustments > Levels (Изображение > Регулировка > Уровни).
Устанавливаем значения 60, 1, 180. Это должно увеличить контраст изображения.



Шаг 6c -
Меняем Blending Mode (Режим смешивания) слоя «лестница» на Multiply (Умножение).
Разместите слой выше слоя «Фигура 2».



Шаг 7 - добавляем больше деталей:

Повторяем Шаги 6a, b и c, чтобы вставить в проект больше деталей.
Возможно, понадобится изменить значения Непрозрачности и Уровней, чтобы достичь лучших результатов.



Шаг 8 – рисуем прямоугольники:
Рисуем на разных слоях цветную навигацию сайта.
Цвета, которые я использовал (сверху вниз) - #4C0C02, #A3CA9D, #3B2F19 и #000000.



Дополнение:
Макет сайта готов. Теперь вы можете добавить текст различного размера и непрозрачностью. Я предлагаю использовать пиксельные шрифты, так как они лучше сочетаются с данным проектом. Шрифт, который я использовал, называется Visitor.

Заключительный результат: