Фотошоп для фотографа 2013

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Высокая

В данном уроке Фотошопа мы рассмотрим процесс создания макета/дизайна сайта в джинсовом стиле.
Внимание: Сложный урок. ВНИМАНИЕ: Урок предназначен для уже продвинутых пользователей Фотошопа.


Финальный результат

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Приступаем к уроку Фотошопа


Для начала создаем новый документ размером 766 х 700 (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Потом можно будет перегнать с небольшим усилием в 1024 х 768, но мне привычней работать так. Тем более, что максимальное разрешение, которое поддерживает моя видюха это 1024 х 768. Ну да ладно черт с ней. Берем нашу основу это кусок равномерной джинсовой материи: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Делаем из него группу "BG". Слой именуем. как "base".

Создаем новый слой "clouds" (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")). Цвет 1 = #174e81, цвет 2 = #1f466a. Топаем в Filter > Render > Clouds (Фильтр > Рендеринг > Облака). Затем два раза Filter > Render > Difference Clouds (Фильтр > Рендеринг > Облака с наложением).


Меняем режим наложения нашего "clouds" слоя на Overlay (Перекрытие), а прозрачность на 75%.

Создаем текст → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T"). Шрифт: XBAND rough (но можно естественно на ваше усмотрение). Размер: 96 рх. Сглаживание отсутствует. Сначала я написал "JEANS", а затем "FASHION". И раставил их в хаотичном порядке. Затем растиризировал и поставил прозрачность на: 35%.


На последок я взял газету. Немного повернул, скопировал и слих их в один слой "gaz". режим наложения: Multiply (Умножение), прозрачность: 55%. На этом создание фона я закончил. У меня вышло следующее: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Создаем новую группу слоев "Header"

Берем такую картинку и выделяем следующую область (выделено красным), нарпимер используя Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M"): ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Дублируем слой через копирование (Ctrl+J) и перетаскиваем на наш дизайн (Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V")).


Копируем слой сдвигаем в лево и подправляем недостатки с помощью Clone Stamp Tool Инструмент - Клонирующий штамп (Инструмент Клонирующий штамп / Клавиша "S").

Скопируем группу "Header" и переименуем в "Footer". Поместив ее в низ документа и инвертировав по вертикали скроем ее.

С другой картинки вырезаем бретельки (или черт, как там они называются): ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

И ставим их поверх основной линии, приблизительно подогнав по яркости (Image > Adjustments > Brightness/Contrast (Изображение > Коррекция > Яркость/Контрастность)). Именно по яркости, так как цвет нас не интересует. С помощью Blending Options (Параметры наложения) бросаем тень (Drop Shadow (Тень)). И применяем Filter > Sharpen > Sharpen More (Фильтр > Резкость > Резкость+) cливаем с основным куском хэдэра. Назовем слой "header base" и теперь выставляем для него настройки: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Копируем группу "BG". И копию сливаем в один слой. Назовем его "mask". Через Ctrl+G сгрупируем его со слоем "header base", режим наложения сменим на: Multiply (Умножение), а прозрачность на 75%.


Теперь настроим яркость слоя "header base" так, что бы цветовой тон хэдэра соответсвовал фону. Многие могут сказать, что стежков не видно, а без стежков джинсы не цикави. Что ж сделаем стежки. Некоторые могут сделать это фильтрами, но я предпочитаю вручную.


Однако перед этим что бы не делать лишней работы сначала поставим кожанную бирку: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

А вот теперь займемся стежком. Создаем прямоугольник цветом #e49515 и размером 2 рх х 4 рх - Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ). Растеризируем. выделяем половину и делаем ее темнее, что бы придать стежку шва объемности. И теперь весело и натхненно копируем стежок туда, где он должен стоять в реале. Закончив стежкоипопею переимменовываем слой со стежками в "header seam".


Кое где зятеняем используя Burn Tool Инструмент - Затемнитель (Инструмент Затемнитель / Клавиша "O") с Exposure (Экспозиция): 25%, что бы шов не выглядел просто однородной линией.


Должно выйти примерно так: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

"Пришиваем" бирку по периметру темно-коричневой ниткой и заставляем отбасывать тень (Blending Options (Параметры наложения)): ↓


Drop Shadow (Тень): ↓

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

В качестве логотипа я взял значек "Техаских Рейнджеров" и заретушировав надпись добавил свою. Настройки Blending Options (Параметры наложения) для логотипа: ↓


Drop Shadow (Тень): ↓

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Inner Glow (Внутреннее свечение): ↓

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Затем я сделал надпись на бирке и слоган - Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T"). Что бы надпись выглядела, как бы вдавленная я применл к ней следующие настройки Blending Options (Параметры наложения): ↓


Bevel and Emboss (Тиснение и рельеф): ↓

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Займемся нашим "footer"ом. Как ты мой дорогой друг уже догадался нам надо применить к нашему футеру маску и подогнать яркость, так же как мы сделали и с хэдэром. Затем кинуть шов: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Вырезаем кармашек (Lasso Tool Инструмент - Лассо (Инструмент Лассо / Клавиша "L")), тянем на наш дизайн и называем "pocket": ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Применяем к нему наш фирменный прием "маска/подбор яркости", что бы не слишком рознился с фоном.


И делаем строчку.

Затем я взял такую вот байду: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

И сделал нашим кармашкам две клепки. Настройки Blending Options (Параметры наложения) для кармана: ↓


Drop Shadow (Тень): ↓

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Outer Glow (Внешнее свечение): ↓

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Под слоем "pocket" создаем скругленный бокс, назовем его "button".

Скопируем часть нашей бирки и сгруппируем ее со слоем "button". Теперь сливаем в один слой, применив эффект не большей Inner Shadow (Внутренняя тень).

Наконец копируем текстовый слой заголовка. Немного уменьшаем и пишем "Home".

Объединяем весь этот беспредел в группу "home". Копируем четыре раза, меняя названия и сдвигая вниз. И четыре кармана с кнопками объединяем в группу "navigation": ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Займемся контентом. С уже знакомого нам изображения вырезаем полоску помеченую зеленой линией. Пичем там, где линия толстая должна быть растушевка около 5 рх.


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Опять копируя этот кусок и где нужно подправляя используя Clone Stamp Tool Инструмент - Клонирующий штамп (Инструмент Клонирующий штамп / Клавиша "S") мы должны получить такой вот результат: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Применяем наш прием "маска/подбор яркости", ставим по углам рамки четыре клепки.


Берем картинку с молнией: ↓


Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Где вырезаем отмеченную область. И путем копирование делаем молнию под только что созданой рамкой.


Еще ниже зубцов создаем бокс, называем его "content base". Вырезаем из бирки кусок побольше и групируем с "content base", с помощью Clone Stamp Tool Инструмент - Клонирующий штамп (Инструмент Клонирующий штамп / Клавиша "S") увеличиваем область покрытия. так что бы фактура закрыла весь бокс.

Сливаем воединно.


Ну и наконец кидаем контент.


Вот пожалуй и все. Надеюсь вам понравилось. Удачного всем джинсового креатива!


Финальный результат

Рисуем дизайн сайта в джинсовом стиле используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru