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

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

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

• Бумажная гранж-текстура
• Деревянная текстура
• Бутон цветка (ваш выбор)
• Зеленый лепесток (ваш выбор)

Макет сайта:

Начнем мы как всегда с создания нового рабочего холста в Фотошоп размером 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.

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

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

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

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

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

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

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