Текстурированный макет сайта

В этом Фотошоп уроке мы будем проектировать красочный макет сайта, используя деревянные и бумажные текстуры. Все материалы для урока мы будем брать из сети интернет. У опытного пользователя на создание такого макета потребуется около часа, а начинающие пользователи постигнут азы и узнают некоторые полезные советы. Приступим!

Ресурсы для урока:

Макет сайта:

Текстурированный макет сайта

Начнем мы как всегда с создания нового рабочего холста в Фотошоп размером 1000х1000 пикселей.

Текстурированный макет сайта

Загрузите бесшовную текстуру дерева. Загруженный файл под названием texture-small.jpg откройте в Фотошоп и зайдите во вкладку Edit > Define pattern (Редактирование – Определить узор). Дайте название шаблону и нажмите OK. Документ с деревянной текстурой нам больше не понадобится, можете его закрыть.

Текстурированный макет сайта

Перейдите на слой background и продублируйте его. К копии примените стиль Наложение узора. В качестве узора выберите текстуру дерева.

Текстурированный макет сайта

Инструментом Прямоугольник (U) нарисуйте набор вертикальных полос разного цвета, каждую на отдельном слое, опирайтесь на изображение ниже.

Текстурированный макет сайта

Выберите все слои с полосками (удерживайте Ctrl и кликайте по каждому слою с полоской поочередно).

Текстурированный макет сайта

Нажатием клавиш Ctrl + E объедините все слои на одном отдельном. Для полученного слоя режим смешивания смените на Color Dodge (Осветление основы) и непрозрачность задайте между 40 – 50%.

Текстурированный макет сайта

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

Текстурированный макет сайта

К этому слою примените стиль тень, установив следующие параметры:

Текстурированный макет сайта

При помощи инструмента Прямоугольная область (M) образуйте выделение, подобно скриншоту ниже:

Текстурированный макет сайта

Убедитесь, что вы находитесь на слое с гранж-тукстурой и продублируйте выделенную область. Затем содержимое копии разверните на 180 градусов, перейдя в меню Edit > Transform > Rotate 180 (Редактирование – Трансформирование – Поворот на 180). Инструментом Перемещение (V) переместите скопированную область в верхнюю часть холста на место логотипа. Напишите на нем название сайта, я написал PSDtuts+.

Текстурированный макет сайта

Для логотипа (текста) режим смешивания смените на Color Burn (Затемнение основы).

Текстурированный макет сайта

Аналогичным путем сформируйте меню и подвал для сайта. Каждую кнопку меню создавайте на отдельном слое. Ниже показан результат.

Текстурированный макет сайта

Чтобы сделать выделенную кнопку меню, выберите подходящий слой, и нажатием клавиш Ctrl + U, откройте окно настроек коррекции Цветовой тон/Насыщенность. Все изменения смотрите на изображении ниже.

Текстурированный макет сайта

Инструментом Прямоугольник (U) создайте белый прямоугольник в правой части макета.

Текстурированный макет сайта

Инструментом Линия (U) создайте горизонтальные линии на всей прямоугольной белой форме. Цвет линий - #d3d1d2.

Текстурированный макет сайта

Выделите слои с формой и линиями и объедините их на новом слое Ctrl + E. Ластиком небольшого размера сотрите соответствующие части белой формы, чтобы получился листок в виде бумажного стикера, смотрите скриншот ниже:

Текстурированный макет сайта

К стикеру добавьте стиль тень.

Текстурированный макет сайта

При помощи инструмента Текст (T) добавьте на макет немного текста. Я использовал шрифт Myriad Pro, который по умолчанию входит в набор шрифтов Windows 7 и Vista.

Текстурированный макет сайта

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

Текстурированный макет сайта

Макет сайта готов. Нам осталось добавить дополнительные детали, которые придадут макету яркость и оригинальность. В нашем случае – это алый цветок с ярко-зелеными лепестками. Вы можете выбрать что-нибудь другое на свое усмотрение. Я открыл эти два изображения в Фотошоп и удалил у них фон. Как удалить фон в Фотошоп при помощи Пера, Лассо или Волшебной палочки – смотрите соответствующий урок.

Текстурированный макет сайта

Поместите лепесток под стикером в правой части сайта.

Текстурированный макет сайта

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

Текстурированный макет сайта

Поверх лепестков поместите алый цветок.

Текстурированный макет сайта

Текстурированный макет сайта – конечный результат:

Текстурированный макет сайта

Ссылка на источник урока.