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

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

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

<ul class="withmargin withmdash">
  • Гранж-бумага,
  • Деревянная доска,
  • Любая фото цветочного бутона,
  • Любая фото зеленого листка.
  • </ul>

    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, автор перевода указан в начале урока.