Как создать Гранж веб-дизайн в фотошопе

 Photoshop часто является правильным инструментом для веб-дизайна, особенно, если вы создаете дизайн, используя многочисленные изображения и кисти эффекты.  В этом учебнике я покажу вам, как создать дизайн домашней страницы полный гранж. Мы дизайн заголовка, боковой панели, тело, нижний колонтитул и все, чтобы работать вместе в сильно текстурированных и изношенные дизайн в стиле.

Шаг 1

На этот раз мы собираемся создать полноценный веб-дизайн в стиле гранж, используя Photoshop и множество стоковых изображений. Поскольку это учебник среднего и продвинутого уровня, я пропущу объяснение некоторых основных шагов. Сначала создайте новый документ 950 пикселей на 800 пикселей с RGB 72 точек на дюйм. Покажите линейки и перетащите четыре направляющих, ограничивающих документ, это будет оптимальной областью дизайна. Я планирую сохранить макет фиксированной ширины.

Перейдите в раздел Image > Canvas Size и увеличьте ширину и высоту намного больше, 1200 пикселей на 1000 пикселей - это нормально, так мы будем проектировать для более широких разрешений экрана. Затем добавьте дополнительные руководства, в которые вы планируете добавить контейнеры (верхний колонтитул, панель навигации, боковая панель, нижний колонтитул).

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

Шаг 2

Теперь мы собираемся создать шаблон для фона заголовка, который довольно прост. Создайте новый документ 50 на 300 пикселей и нарисуйте что-то похожее на изображение ниже. Я использую направляющие, чтобы сделать мою форму максимально симметричной. Затем перейдите в Edit> Define pattern и сохраните форму как 'pattern 1.'

Шаг 3

 На новый слой в нашем файле основной дизайн Нарисуйте 300 px Высота прямоугольника с помощью инструмента «прямоугольник». Перейдите в меню «Фильтры» и добавьте наложение шаблона, найдите новый шаблон и примените его. Чтобы он выглядел правильно, вы должны нажать кнопку «Привязать к оригиналу». Измените слой Fill на 0%, создайте новый пустой слой над слоем формы и объедините оба, таким образом, у вас будет готовый шаблон, чтобы добавить к нему некоторые эффекты. Назовите этот слой 'Pattern 1.'

Шаг 4

Выберите слой «Pattern 1» и примените к нему несколько стилей слоя: Drop Shadow, Gradient Overlay и Pattern Overlay. Попробуйте получить нечто похожее на нижнюю часть изображения ниже, используя следующие значения.

Шаг 5

Теперь мы собираемся добавить фон панели навигации. Нарисуйте прямоугольник, скрывающийся немного от слоя «Pattern 1». Примените к этому прямоугольнику наложение Pattern, наложение градиента от черного к красному черному и мягкую тень. Используйте значения изображений ниже для справки. Затем добавьте Layer mask > Hide all и нарисуйте отраженный градиент от черного к белому к черному на маске слоя, вы получите нечто похожее на нижнее изображение ниже.

Шаг 6

Теперь нарисуйте эллипс (691E1B) над слоем «Pattern 1», назовите его «Light» и примените к нему Gaussian Blur с радиусом 50 пикселей. Я создал дополнительное руководство, чтобы нарисовать свет в центре заголовка. Удалите все под панелью навигации и измените режим смешивания слоя на Color Dodge.

Шаг 7

Чтобы закончить первую часть макета, мы собираемся нарисовать фон боковой панели. Нарисуйте несколько направляющих, чтобы отграничить боковую панель, а также отредактируйте существующие направляющие, чтобы они соответствовали реальному дизайну. Затем нарисуйте красный прямоугольник (3D100B) и примените следующие стили: «Тень», «Наложение цвета» и «Наложение рисунка».

На данный момент, вы должны рассмотреть, как вы собираетесь вырезать изображение в HTML + CSS; поэтому большую часть времени я использую падающие тени с расстоянием 0px и только горизонтальные или вертикальные градиенты. Текстура в этом случае имеет много горизонтальных линий. Это должно легко преобразовать его в повторяющийся фон для многих областей. Кроме того, это хороший момент, чтобы сделать перерыв и организовать слои в ваших папках, чтобы все было организовано.

 Шаг 8

Теперь начнем с деталей, я хочу добавить название сайта на видном месте, поэтому я буду использовать этот красивый гранжевый ярлык. Очевидно, что вы должны извлечь этикетку и поместить ее в верхний левый угол нашего дизайна. Попробуйте получить что-то вроде первого изображения ниже. Затем с помощью инструмента «Волшебная палочка» выделите маленький коричневый кружок, затем Ctrl + Shift + I, чтобы инвертировать выделение. Отрегулируйте уровни и оттенок/насыщенность, используя значения, показанные ниже.

Шаг 9

Теперь, используя инструмент Eraser и нерегулярную кисть, удалите некоторые области границы метки. Чтобы добавить эффект обрезки бумаги, выберите инструмент «Уклонение» и используйте ту же форму кисти, чтобы применить уклонение к границе метки.

Шаг 10

Мы собираемся добавить тень на наш лейбл дальше. Для этого продублируйте слой «Метка», измените Hue/Saturation> Lightness на -100 и примените Gaussian Blur с радиусом 10 пикселей. Затем измените режим смешивания «Копирование этикетки» на «Умножение» и установите непрозрачность на 75%.

Шаг 11

Последняя ретушь для метки, измените насыщенность на -40, чтобы сделать ее более серой.

Шаг 12

Теперь мы добавим несколько вспомогательных изображений, попробуем найти изображения, окружающие концепцию, но так как это руководство по методам, я выбрал случайное. Это красивая картина старинного поезда здесь, в горах Боливии. Извлеките форму поезда, как вы хотите. Затем измените режим смешивания слоя 'train' на Darken.

Шаг 13

Давайте добавим немного текста, сначала название страницы. Напечатайте что-нибудь, используя шрифт гранж; вы можете найти некоторые интересные здесь. Для заголовка используйте черный тип и измените режим смешивания слоя на Overlay, затем продублируйте слой и измените непрозрачность копии на 75%. Чтобы сделать немного размытия, переместите скопированный слой на один или два пикселя влево или вправо. Добавьте больше текста, используя эту технику, например, слоган или что-то. Кроме того, это хороший момент, чтобы добавить ссылки навигации.

Шаг 14

Теперь добавьте больше вещей, это стиль гранж! Отсюда я скачал несколько кистей Jenn B’s. Эти кисти имеют ограничения.  Используя эти кисти добавить некоторые цифры, углы, маскирующие ленты и whatnot, не стесняйтесь делать все, что вы хотите в этом шаге. Просто помните, добавить всех слоев ниже «Label» и «Метка копирования» слои.

Шаг 15

Теперь мы начнем добавлять разделы страницы. Прежде всего, в шапке нам понадобится строка поиска. Введите поисковый ярлык. Затем нарисуйте красный (6A0400) прямоугольник в качестве поля ввода для поиска, затем примените эффект наложения слоя Stroke и Pattern.

Шаг 16

Теперь мы начнем добавлять основное содержание нашего дизайна. Сначала мы собираемся добавить поле поставить некоторые рекомендуемые текст на. Нарисуйте прямоугольник темно-серый (0D0F0E) в слой ниже боковой панели. Я создал четыре папки для организации макета: одну для «Заголовка» над всем, одну для «Боковой панели» под «Заголовком», одну для «Контента» под «Заголовком» и «Боковой панелью», и последнюю один для «Нижнего колонтитула».

Вы можете добавить этот прямоугольник в слой «Содержимое», также вы можете добавить столько папок, сколько необходимо внутри этих четырех папок. Как только вы поместите прямоугольник в нужное место, примените тень и эффект Stroke, используя значения ниже.

Шаг 17

Загрузите несколько гранжевых углов и рамок здесь и вставьте один на серый фон. Затем примените эффект Overlay к углу с цветом 171612. Кроме того, добавьте еще один угол поверх фона боковой панели, но на этот раз уменьшите непрозрачность ниже 25%.

Шаг 18

Давайте добавим немного текста. Вы можете добавить любой образец текста, представив, что это раздел недавних сообщений, основанный на javascript, или раздел избранных сообщений, что-то в этом роде. Я использую ту же самую гранжевую гарнитуру дисплея, что и для навигационной панели с цветом 4D0D0D и Arial с цветом 3F3F3F для основного текста.

Примените эффект тени к заголовку и добавьте тот же эффект к элементам навигации. Когда вы конвертируете этот PSD в файл HTML + CSS, вам нужно будет конвертировать эти заголовки в изображения, поэтому все нормально, если вы хотите добавить к ним больше стилей. Наконец, используйте несколько направляющих, чтобы поместить текстовые слои в нужное место.

Шаг 19

Наша рекомендуемая панель выглядит немного пустой, поэтому давайте добавим изображение поддержки. В этом случае я использовал поляроидный выстрел. Вы можете скачать изображение поляроида здесь. Извлеките поляроид, вставьте его в слой над серым фоном и углом гранж в папке «Содержимое», затем измените оттенок / насыщенность, чтобы сделать поляроид немного более сепийным (выберите параметр «Цвет»).

Используйте те же приемы для краев слоя «Метка» (шаг 9). Сотрите и уклонитесь от краев изображения Polaroid. Наконец, добавьте тень, используя ту же технику, что и в шаге 10 этого урока.

Шаг 20

У меня была эта фотография с сепией, поэтому я добавляю ее в дизайн. Добавьте любое изображение в новый слой над слоем «Polaroid», выберите черный квадрат поляроида, затем Ctrl + Shift + I, чтобы инвертировать выделение. Выберите слой с изображением и удалите все лишнее. Затем вы можете добавить больше деталей гранж, например, немного маскирующей ленты поверх изображения, как показано на изображениях ниже. Я применил эффект Drop Shadow 1px также к добавленной ленте.

Шаг 21

Это хороший момент, чтобы добавить значок RSS на боковой панели. Нарисуйте прямоугольник с закругленными углами (99917E), затем примените к нему следующие эффекты: внутреннее свечение, наложение рисунка и тень, используйте значения, показанные на рисунке ниже. Затем нарисуйте или вставьте в новый слой над прямоугольником стандартную форму RSS и заполните его черным. Наконец, измените режим смешивания слоя 'RSS shape' на Overlay.

Шаг 22

Теперь поместите значок RSS в левом верхнем углу боковой панели. Добавьте текст, например, «RSS FEED». Нарисуйте еще один кусок маскирующей ленты и напишите на нем число подписчиков. Помните, что теперь мы работаем в папке «Боковая панель».

Шаг 23

Пришло время добавить один пост в наш дизайн. Просто напишите какой-нибудь случайный текст в качестве заголовка, другую строку для даты, категории и автора. Также несколько слов в качестве текста поста. Типография является наиболее важным на этом этапе. Я люблю использовать шрифты Serif для названий и Sans-Serif для тела, но это только я. Выберите то, что вы считаете самым лучшим для вашего дизайна.

Шаг 24

Чтобы наш пост был лучше, мы собираемся добавить изображение для предварительного просмотра, как на сайтах TUTS, но так как это гранж-дизайн, нам нужно добавить гранж-фон для наших изображений. Это так же просто, как добавление отступа сверху и снизу с помощью CSS, а затем установка повторяющегося фонового изображения.

Это изображение будет 35-мм фильм. Извлеките две маленькие полосы из пленки и измените их оттенок/насыщенность, используя значения на изображении ниже. Затем, используя неправильный ластик, удалите некоторые области полос. Наконец, добавьте Drop Shadow к каждой полосе. Когда вы закончите с фильмом, вставьте любое изображение под слои пленки. Я добавляю фотографию одного из моих путешествий. Наконец, примените эффект Stroke (2F261D) к этому изображению.

Шаг 25

Нарисуйте красную линию размером 2 пикселя ниже поста и немного текста для комментариев. Рекомендуется добавить все слои, связанные с постом, в новую папку под названием «Пост». Затем немного увеличьте высоту документа, вы можете сделать это с помощью инструмента Обрезка, просто посмотрите, как будет выглядеть наш дизайн, если на нем будет два или три сообщения. Дублируйте группу «Опубликовать» и измените текст и изображение, как показано ниже.

Шаг 26

На самом деле это выглядит довольно хорошо, теперь добавьте названия элементов боковой панели. Вы также можете создать папку для каждого элемента.

Шаг 27

Теперь добавьте значок списка. Вы можете использовать любую пользовательскую форму. Добавьте случайный текст, я использую Georgia для боковой панели. Дублируйте значки и отредактируйте один, чтобы представить состояние наведения. Сделайте то же самое для каждого элемента боковой панели.

Шаг 28

Мы уже близко у концу. Добавьте некоторые детали гранж в нижней части боковой панели, добавив несколько гранжевых кистей в новый слой над фоновым слоем боковой панели. Выберите фоновый слой боковой панели, затем перейдите в Layer> Layer Mask> Reveal all. Затем скройте некоторые области в нижнем левом углу фона боковой панели, используя неправильную черную кисть.

Шаг 29

Наконец, выберите фоновый слой боковой панели и скопируйте его стиль слоя. Нарисуйте прямоугольник в нижней части дизайна внутри папки «Нижний колонтитул» и вставьте в него стиль слоя. Затем извлеките и вставьте это изображение над фоном нижнего колонтитула.

Отрегулируйте насыщенность, чтобы сделать ее немного более серой. Кроме того, вы можете нанести на этот лист бумаги тень, повторяющую метод шага 10. Добавьте текст поверх листа бумаги, может быть, лозунг или что-то. А также добавьте текст нижнего колонтитула, например панель быстрой навигации, и информацию об авторских правах.

Заключение

Веб-дизайн не легкий труд, но я надеюсь, что этот урок поможет вам улучшить свои навыки. Теперь все зависит от вас, создайте свой собственный дизайн или подпишитесь на PLUS, чтобы загрузить исходник PSD и поработать над ним. Я хотел бы видеть некоторые гранжевые веб-дизайны в группе Psdtuts + Flickr. Вы можете просмотреть окончательное изображение ниже или посмотреть увеличенную версию здесь.

Подпишитесь на Psdtuts + RSS Feed для лучших статей и статей о Photoshop в Интернете.