Уникальный гранжевый дизайн сайта

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


Гранжевый дизайн


Шаг 1
Создайте новый документ размером 1000х800 пикселей. Создайте новый слой (Create New Layer) и залейте его цветом #E3D4B9.


Уникальный гранжевый дизайн сайта


Шаг 2
Загрузите этот набор изображений. Инструментом Волшебная палочка (Magic Wand Tool) вырежьте бумагу в наш документ и обесцветьте слой (Desaturation). Потом примените стиль Отбрасывание тени (Layer Style — Drop Shadow):

Режим – Умножение


Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта


Шаг 3
Теперь загрузите этот набор изображений.
Сперва расположите кофейные разводы на бумаге. Их нужно расположить только на бумаге, но не на фоне. Поэтому, после того, как закончите с расположением кофейных разводов, выберите слой с бумагой и инструментом Волшебная палочка (Magic Wand Tool) кликните где-нибудь на фоне. Потом выберите слой с разводами от кофе и нажмите Delete. Затем установите Непрозрачность (Opacity) этого слоя – 25.
Теперь расположите скрепку на бумаге и инструментом Лассо (Lasso Tool) вырежьте ту часть, которая должна быть расположена под бумагой. Примените к этому слою стиль Отбрасывание тени (Layer Style — Drop Shadow).
Затем вставьте изображение липучки. В конце напишите текст на бумаге заметок. Шрифт – “Handwriting Dakota”.

Уникальный гранжевый дизайн сайта


Несколько указаний:
Чтобы ваши липучки на углах лучше сочетались с общим фоном, понизьте их насыщенность до -45 в меню Тон/Насыщенность (Hue/Saturation). Потом понизьте Непрозрачность (Opacity) слоёв до 90%. Для изображения с бумагой заметки измените насыщенность и яркость.


Уникальный гранжевый дизайн сайта


Шаг 4
В сочетании с остальными элементами, бумага с линиями выглядит мрачно. Поэтому, перейдите в меню Цветовой баланс (Color Balance) и настройте так:

[/edit]
Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта


Шаг 5
Вставьте изображение солнечных лучей из набора High-Res Sunburst в центр маленькой бумаги, но позади неё. Уже известным способом удалите лучи с фона, оставив их только на бумаге. Также не забудьте выделить дырки на бумаге при удалении. Потом установите Режим наложения слоя с лучами – Затемнение основы (Blending Mode – Color Burn) и Непрозрачность (Opacity) – 8%.


Уникальный гранжевый дизайн сайта


Шаг 6
Создайте новый документ и нарисуйте тёмно-коричневый квадрат, используя инструменты Прямоугольная область (Rectangular Marquee Tool) и Заливка (Paint Bucket Tool). Не снимайте выделение и перейдите в меню Сжатие (Modify – Contract), введите значение 10 пикселей и нажмите Delete. У вас получится рамка. Выберите инструмент Ластик (Eraser Tool) и акварельной кистью сотрите рамку. Затем вставьте любое изображение на белую область, уменьшите его размер, чтобы оно не выходило за пределы рамки.


Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта


Шаг 7
Скройте фоновый слой документа с рамкой и перейдите в меню Слой»Объединить видимые (Layer>Merge Visible). Скопируйте полученное изображение в наш основной документ.
Повторите этот процесс, чтобы вставить несколько картинок. Вам не обязательно повторять все шаги, нужно всего лишь заменить картинку в рамке. Также можете дописать текст:


Уникальный гранжевый дизайн сайта


Шаг 8
Вставьте ещё одно изображение из набора “Paper Textures” и расположите его в основании. Этот слой должен находиться под слоем с бумагой с линиями. Установите Режим наложения – Линейный затемнитель (Blending Mode – Linear Burn) и Непрозрачность (Opacity) – 30%. Затем примените стиль Внутренняя тень (Layer Style — Inner Shadow):

Режим — Умножение


Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта


Шаг 9
Теперь всё зависит от вашей креативности. Вставьте несколько изображений бумаги, изменяйте их насыщенность и режимы наложения, чтобы они лучше сочетались. Смысл в том, чтобы наложить побольше бумажных изображений, и при этом не создать большую загруженность. Также используйте маленькое значение Непрозрачности (Opacity) слоёв.


Уникальный гранжевый дизайн сайта


Шаг 10
Вставьте изображение с логотипом и наклоните его инструментом Свободное трансформирование (Free Transform).


Уникальный гранжевый дизайн сайта


Шаг 11
Теперь нужно создать меню. Инструментом текста напишите текст меню. Затем инструментом Линия (Line Tool) нарисуйте линии и стрелки. Не старайтесь рисовать стрелки одного размера и формы. Пусть они будут неаккуратными. Затем объедините все слои с линиями в один слой, потом все слои со стрелками. Выберите акварельную кисть с маленькой непрозрачностью и сотрите части ваших линий и стрелок, чтобы создать более приятный гранжевый эффект.


Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта


Шаг 12
Вставьте гранжевое изображение поверх бумаги с линиями, но под остальными слоями. Используйте технику вырезания инструментом Волшебная палочка (Magic Wand Tool), если нужно. Затем установите Режим наложения – Жёсткий свет (Blending Mode – Hard Light) и Непрозрачность (Opacity) – 70%. Акварельной кистью сотрите основание изображения.


Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта


Шаг 13
В нашем дизайне не хватает структуры. Я не имею ввиду разбросанные бумаги, так как это гранжевый стиль, и это нормально. Нам нужно лишь добавить больше определённости. Поэтому я создал две линии, как показано ниже. В результате у нас начинает получаться небольшая рамка. Запомните, что беспорядок не означает отсутствие структуры.


Уникальный гранжевый дизайн сайта


Шаг 14
Создайте поля подписки под меню. Для этого используйте различную непрозрачность и яркость фигур.


Уникальный гранжевый дизайн сайта


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


Уникальный гранжевый дизайн сайта


Шаг 16
Чтобы придать больший эффект рукописного стиля, инструментом Кисть (Brush Tool) размером 1 пиксель грубо обведите некоторую область нижнего меню. Потом сделайте несколько копий слоя и уменьшайте их. Когда закончите, акварельной кистью подотрите части линий.


Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта

Уникальный гранжевый дизайн сайта


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


Гранжевый дизайн





Делаем Web-дизайн

Вас может также заинтересовать:

20 сентября 2017

Дата анонса: 2009/07/16 Эффективное разрешение, МП: 12 Диагональ ЖК-дисплея, дюймы: 3

20 сентября 2017

Вы ищете объектив удобных размеров, но при этом с оптикой высокого класса и широкой диафрагмой? Тогда Вас наверняка заинтересует разработка инженером компании Nikon – объектив Nikon AF-S DX NIKKOR 35mm f/1.8G, который оснащен матрицей формата DX. Помимо этого, он оснащен большой диафрагмой f/1,8, которая гарантирует получение яркого снимка в поле видоискателя и станет настоящей находкой для фотографов, которые работают в условиях недостаточного света. С этой моделью Вы наверняка достигнете высокого разрешения и контраст с бесшумной системой автофокуса.

20 сентября 2017

Дата анонса: 2007/01/18 Эффективное разрешение, МП: 7.1 Диагональ ЖК-дисплея, дюймы: 2 Вес с батареей и картой памяти, г: 160


Стилизованный пейзаж