Создай акварельный дизайн для сайта

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

Вы узнаете как использовать "Архивную художественную кисть", создать неповторимый образ фона хедера и многое другое. Давайте начнем!

Вот, что мы будем создавать:

(нажмите на изображение, чтобы увеличить)

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

Данный шаблон будет у нас фиксированной ширины с выравниванием элементов по центру. Давайте начнем проектирование!

Шаг 1 - Настройка шаблона
Скачайте PSD шаблон от 960 Grid System (Это не является обязательным, вы можете создать документ шириной в 960px и просто нарисуйте несколько направляющих), откройте шаблон, создайте новую группу и поместите туда все слои. После Вам необходимо увеличить ширину изображения, чтобы увидеть, как ваш проект выглядит на более широких разрешениях, для этого перейдите в " Изображение> Размер холста " и увеличьте значение ширины до 1420 пикселей.

Шаг 2 - Редактирование текстуры
Найдите текстуру бумаги, или же скачайте эту. Это изображение будет фоном страницы, но оно нуждается в небольшом редактировании. Скопируйте текстуру бумаги и вставьте в новый документ.
Затем перейдите на Filter> Other> Offset (Фильтр>Другое>Сдвиг) и сдвиньте изображение так, чтобы его границы были по центру. Далее используя инструмент Clone Tool (Инструмент "Штамп") уберите границу. После того как вы закончили клонирование, выделите всё (Ctrl + A) и копию отредактированного изображения вставьте в наш шаблон.

Шаг 3 - Настройка Фона
Используя инструмент " Free Transform " (Свободное трансформирование) трансформируйте слой так, чтобы он покрывал примерно половину шаблона. После того как вы разместите первый слой с бумагой дублируйте его и поместите его возле первого слоя, таким образом вы будете покрывать фактически 960px области. Затем дублируйте эти слои дважды, чтобы разместить их слева и справа от границы,чтобы покрыть всю поверхность холста, а затем объедините эти 4 слоя, затем дублируйте их по вертикали и разместите их ниже существующих, делайте это столько раз, сколько необходимо, пока не покроете все полотно. Наконец создайте группу "Фон" и поместите туда все слои текстуры.

Шаг 4 - Фон для хедера
Теперь давайте добавим фон для хедера. Для этого я использую этот образ горного пейзажа. Используя Marquee Tool (Инструмент "Выделение") выделите широкую часть изображения и вставьте её в основной документ и назовите слой что-то вроде "Пейзаж". Теперь сделаем изображение более похожим на картину чем на фотографию.
Дублируйте слой и нажмите Ctrl + I чтобы инвертировать цвета, затем перейдите в панель Цветовой тон/Насыщенность (Ctrl + U) и уменьшите Насыщенность до -100, затем измените его режим смешивания на Overlay. Наконец объедините оба слоя "Пейзаж" и "Пейзаж копию" в один.

Шаг 5 - Используем Архивную художественную кисть
Теперь мы будем использовать " Архивная художественная кисть " чтобы наше изображение выглядело как настоящая картина, выберите Архивная художественная кисть (Y) в Панели инструментов. Чтобы сделать это изображение особенным, первое, что вам нужно сделать, это моментальный снимок работы. Для этого перейдите в Window>History (Окно>История) для просмотра истории группы, и нажмите на кнопку " Новый снимок " внизу. Затем в панели Options, выберите кисть (я использую 36px Chalk tip) установите "Режим: Нормальный", а "Непрозрачность:25%", "Стиль: Tight Short", Размер: 25px и Tolerance: 0%. Теперь легкими мазками превратите простое изображение в картину. После поиграйте с настройками и обработайте края изображения, чтобы закрасить границу.

Шаг 6 - Акварельная маска слоя
Создайте Маску слоя для слоя "Пейзаж", сейчас мы постраемся сделать так, чтобы изображение лучше сливалось с фоном. Для этого используем некоторые акварельные кисти. Я использую эти акварельные кисти.
Скачайте этот набор кистей, так как мы будем использовать их в течение всего процесса. Возьмите любую кисть, установите цвет переднего плана черный и кликните несколько раз. Эти кисти имеют различные помутнения, так что вы можете поиграть с ними, в случае если вы используете другие кисти вы должны изменить непрозрачность кисти и значение расхода каждый раз когда вы рисуете. Попробуйте разместить акварельные пятна по всей границе и в некоторых местах внутри изображения.

Шаг 7 - Добавление градиента
Для того, чтобы кодирование было немного труднее (шутка) мы добавим вертикальный градиент (# 96AFCE - # FFFFFF). Режим для слоя с градиентом Linear Burn (линейный затемнитель).

Шаг 8 - Контент
Используя Rounded Rectangle Tool (Прямоугольник со скругленными углами)(U), радиус - 15px, нарисуйте прямоугольник начиная со второй направляющей слева и заканчивая предпоследней направляющей с права. Fill (Заливка) уменьшите до 35% и добавьте этому слою Обводку 1px (# FFFFFF) "Положение: Внутри". Вы можете назвать этот слой "Контент".

Шаг 9 - Дорабатываем блок контент
Дублируйте слой "Контент" и поместите копию над ним. Установите Fill до 100% и скройте обводку. Теперь добавьте маску слоя и залейте его Линейным градиент (#000000 - #FFFFFF).

Шаг 10 - Навигация
Используя Rounded Rectangle Tool (Прямоугольник со скругленными углами)(U), добавьте синий (# 3F5060) прямоугольник в верхней части шаблона, установите его значение Fill 50% и добавьте стиль слоя к нему Обводка 1px синий (# 3F5060). Возьмите инструмент Текст ,шрифт "Futura Std" (но вы можете изменить его).

Шаг 11. Далее растрируйте слой "Контент" или преобразуйте его в смарт-объект, добавьте маску слоя к нему и, используя, мягкую черную кисть скройте верхнюю часть блока как показано на картинке.

Шаг 12 - Логотип
Давайте добавим логотип сайта. Я использовал шрифт "Futura Std", цвета: # F2F6FC и # E1EDFF. Теперь возьмите любую кисть из набора (который мы скачали ранее), цвет(# 112C37) и кликните один раз на новом слое, поместите этот слой под слой с логотипом и изменить его режим смешивания на Soft Light (Мягкий свет). Создайте новую группу "Лого" и поместите туда эти два слоя.

Шаг 13. В целях увеличения визуального воздействия фона, добавьте больше акварельных мазков разных цветов, разместите их по всей верхней границы как раз над слоем "Пейзаж". Затем измените его режим смешивания на Overla y (Перекрытие). Наконец добавьте большое голубое небо (# 51D3D3) на новом слое любой кистью нарисуйте небо как на картинке ниже, и разместите данный слой прямо над слоем "Пейзаж" и ниже слоя "Контент" Затем измените режим смешивания на Overlay (Перекрытие).

Шаг 14 - Добавляем кисть
Использование реальных жизненных объектов в веб-дизайне очень модно, мы добавим реальное изображение кисти к нашему проекту. Откройте изображение извлеките часть кисти и вставьте его в шаблон.

Шаг 15 - Добавляем реалистичную тень
Дублируйте слой "кисть", назовите копию "Тень" и разместите его под оригиналом, а затем перейдите в панель Hue / Saturation (Цветовой тон/Насыщенность) и измените его Насыщенность до -100. Теперь перейдем в Filter>Blur>Gaussian Blur (Фильтр>Размытие>Размытие по Гауссу) радиус 4px, далее измените его непрозрачность до 50%.

Дата добавления: 2015-07-18