Создаем красочный текстурированный макет сайта в Photoshop

На этот раз мы спроектируем креативный красочный макет для веб-сайта с использованием разнообразных деревянных/бумажных текстур. Картинки все будут выуживаться поиском из Сети, а собирать все будем, естественно, в Photoshop. У средне-опытных пользователей на урок уйдет порядка часа. Новичкам же придется немного повозиться. В общем, поехали!

Необходимые ресурсы:

1 Шаг

Начнем с создания нового документа размерами 1000 на 1000 пикселей.

2 Шаг

Теперь скачайте бесшовную деревянную текстуру с Grafplus.com. Откройте файл “texture-small.jpg” в Photoshop и откройте Edit > Define pattern. Выберите имя для своего шаблона и нажмите OK. Теперь можно закрыть этот документ.

3 Шаг

Выберите слой “background” и нажмите Ctrl + J. Это дублирует слой. Выберите его и откройте меню Layer > Layer Style > Pattern Overlay. Задайте шаблон, который вы создали несколько секунд назад.

4 Шаг

Используя Rectangle Tool, создайте набор вертикальных разноцветных полос, как показано на рисунке.

5 Шаг

Теперь выберите все эти объекты в палитре Layers (удерживая Ctrl, кликаем поочередно по каждому слою).

6 Шаг

Выбрав все объекты, нажимаем Ctrl + E — это объединит все слои в один единственный. Смените режим наложения на Color Dodge, а значение Opacity задайте между 40% и 50%.

7 Шаг

Пришло время добавить еще одну великолепную текстуру. Заходим на Grafplus еще раз и загружаем гранж-текстуру. Перенесите ее в основной документ.

8 Шаг

Убедитесь, что у вас выбран именно новый слой и добавьте к нему тень. Это делается через меню Layer > Layer Styles > Drop Shadow.

9 Шаг

Далее выберите Rectangular Marquee Tool и создайте выделение, как показано ниже.

10 Шаг

Проверьте, выделен ли у вас слой с гранж-бумагой, и нажмите Ctrl + J — нажатием этих горячих клавиш в комбинации с имеющейся выделенной областью мы дублировали лишь содержимое этой области на новом слое. Теперь разверните этот слой на 180 градусов (Edit > Transform > Rotate 180). Передвиньте этот слой в верхнюю часть макета с помощью Move Tool (V). Нанесите на эту импровизированную часть шапки свой логотип. Я там написал «PSDtuts+».

11 Шаг

Смените режим наложения логотипа на Color Burn.

12 Шаг

При помощи аналогичной техники сформируйте кнопки и подвал. Ниже можно видеть результат этих действий.

13 Шаг

Если вам нужно сделать выделенную кнопку — выберите слой с ней и нажмите Ctrl + U — появится меню настроек Hue/Saturation. Отметьте чекбокс Colorize и подстройте ползунки нужным образом.

14 Шаг

С помощью Rectangle Tool создайте белый прямоугольник в правой части макета.

15 Шаг

Возьмите инструмент Line Tool и нанесите с помощью него несколько горизонтальных линий поперек этой фигуры. Цветом для линий пусть будет #d3d1d2.

16 Шаг

Выберите белую форму и все ее линии в палитре Layers и нажмите Ctrl + E, чтобы слить их все в один. Теперь возьмите ластик (Eraser Tool, E) и, задав ему миниатюрные размеры, удалите соответствующие детали белой формы, чтобы в результате получился симпатичный клочок бумаги.

17 Шаг

Теперь добавьте необходимые стили.

18 Шаг

Выберите Horizontal Type Tool и добавьте на макет немного текста. Я взял шрифт Myriad Pro — его можно найти в списке шрифтов по умолчанию в Windows 7 и Vista.

19 Шаг

Теперь добавьте еще какую-нибудь картинку в центр макета, а справа от нее добавьте пару стрелок, которые можно найти в стандартном наборе инструмента Custom Shape Tool.

20 Шаг

Теперь к композиции необходимо добавить несколько ярких деталей. В моем случае это красивый алый цветок и несколько зеленых листьев. Эти картинки у меня уже были под рукой, вы можете по аналогии подобрать что-нибудь свое. И так. Я открыл оба изображения: цветка и листка в Photoshop и удалил им фон. Это можно сделать, как с помощью Lasso Tool, так и с помощью пера (Pen Tool). Либо вообще применив Magic Wand — как вам удобнее.

21 Шаг

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

22 Шаг

Дублируйте этот слой несколько раз и смешайте листы покрасивее, параллельно меняя им размер.

23 Шаг

Последний штрих — поместить красивый красный цветок сверху на зеленые листья.

Конечный результат

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

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

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.