Создаём акварельный дизайн для сайта в Фотошоп

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

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

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

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

Шаг 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.

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

Шаг 14 - Добавляем кисть

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

Шаг 15 . Добавляем реалистичную тень

Дублируйте слой "кисть", назовите копию "Тень" и разместите его под оригиналом, а затем перейдите в панель Hue / Saturation (Цветовой тон/Насыщенность) и измените его Насыщенность до -100.

Теперь перейдем в Filter-Blur-Gaussian Blur (Фильтр-Размытие-Размытие по Гауссу) радиус 4px, далее измените его непрозрачность до 50%.

Шаг 16.Осветление и Затемнение

Я всегда использую инструменты Dodge(Осветление) и Burn(Затемнение) после извлечения и добавления тени.

Шаг 17 . Блок "о нас"

Добавляйте текст, я использовал шрифт Futura Std для заголовков и Tahoma (11px, Резкость: Нет) для основного текста, и серая линия, как разделитель (используйте инструмент Линия, чтобы сделать это). Давайте добавим поле для краткого текста. Нарисуйте Прямоугольник со скругленными углами, радиус 15px и заполните его зеленым цветом (# 434726), а затем применить стиль Stroke (Обводка) с тем же цветом и измените его значение Fill (Заливка) до 50%. Далее преобразуйте слой в смарт-объект и добавьте Маску слоя к нему. Используйте большую, черные, мягкую кисть чтобы скрыть некоторые части фона, как в шаге 11. Наконец, вы можете добавить дополнительные детали, например, акварельный знак под текстовым слоем с "О нас", как показано на картинке ниже.

Шаг 18. Некоторые детали

Это абсолютно необязательный шаг, Вы можете добавить некоторые стили слоя для логотипа и названия, просто чтобы увеличить контраст между ними и фоном. Я просто на этот раз добавлю немного тени. Кроме того, мне не нравится, как выглядит кисть позади навигационной панели, поэтому я перемещу её вперед, но вы можете следовать вашим инстинктам и делать так, как вы предпочитаете.

Шаг 19. Главный Ajax Баннер

Часто бывает необходимо показывать более одной части информации на сайте, поэтому мы будем создавать Ajax слайдер. Добавим большое изображение как активный баннер разместим его около восьми колонн направляющих шаблона.Ниже в четыре-пять квадратных миниатюр остальные баннеры. Наконец добавьте синий (# 5D8CB6) треугольник (вы можете сделать это с помощью Polygon Tool (Инструмент "Многоугольник")), который указывает на активный баннер.Совет:Используйте реальные фотографии а не только наполнители изображения.

Шаг 20 . Баннерный текст

Некоторые существующие библиотеки включают опцию добавления какого-нибудь текста на баннере, в этом случае я буду использовать шрифты Futura Std для заголовков и Tahoma 11px для содержания. Используйте белый прямоугольник, Fill (Заливка) 50% и 1px белой обводки в качестве фона.

Шаг 21 . Фон Сайдбара

И так, самую трудную часть процесса мы уже закончили, но есть еще некоторые важные области слева, такие как боковая панель. Мы начнем с простого фона, используя Прямоугольник со скругленными углами(радиус 5 пикселей) нарисуйте белый прямоугольник. Измените Заливку слоя до 25% и добавьте Обводку 1px (#FFFFFF).

Шаг 22 . Фон Сообщений

Добавьте несколько акварельных знаков в новый слой, выше фонового содержания. Любого подходящего к фону цвета.

Шаг 23 . Сообщения

Теперь мы добавим одно сообщение. Используйте шрифты Futura Std для заголовков и Tahoma для краткого описания и 1px в высоту строки как разделитель. После на новом слое нарисуйте один синий знак используя акварельную кисть для фона комментария,"Количество комментариев" напишите используя Futura и слово "комментарии" с Tahoma.

Шаг 24 - RSS иконка

Пришло время добавить содержимое в боковой панели, и мы начнем с помощью кнопки RSS. Загрузите иконки. Откройте значок RSS, скопируйте и вставьте его в макет, добавьте RSS соответствующий текст: электронная почта, форма подписки, количество читателей и 1px высоту строки как разделитель.

Шаг 25 - Поиск

Добавьте акварельный мазки в качестве фона. Над фоном нарисуйте прямоугольник с закругленными углами (радиус 5 пикселей), цвет: # 1D1D1D. Добавить Обводку 1px (#FFFFFF), значение Fill (Заливка) уменьшите до 50%. С помощью инструмента Текст и шрифта Tahoma напишите слово "поиск". Наконец загрузите этот Icon Pack и вставьте значок лупы как кнопку поиска. Положите все это в группу под названием "Поиск" или что-то вроде этого и перейти к следующему шагу.

Шаг 26- Объявления

Стандартный формат для креативной рекламы составляет 125 на 125 пикселей, поэтому мы добавим несколько блоков, на боковой панели.

Совет: Чтобы сэкономить время, можно создать документ 125 на 125 пикселей с приятным дизайном заполнителя рекламы, а затем преобразовать его в смарт-объект и сохранять его где-то. Вы можете использовать его для многих конструкций без необходимости редизайна его каждый раз.Если у вас есть достаточно времени, вот список с большинством стандартных размеров объявлений (через объявление смысле Google). Рассмотрим работу над PSD с некоторыми заполнителей для них?

Шаг 27 . Twitter

Как большой поклонник Twitter, я решил поставить заметную ссылку чуть ниже объявлений. Добавьте немного акварельного фона, копировать / вставить значок Twitter из библиотеки (обсуждалось в Шаге 24). Введите текст,"Follow Us" или что-то на подобии этого. Положите все эти слои в группу под названием "Twitter".

Шаг 28 . Вкладки на боковой панели

Используя прямоугольник с закругленными углами, нарисуйте белый прямоугольник с 1px серой (# 979797) Обводкой, чуть ниже блока "Twitter". Теперь нарисуйте три меньших прямоугольников за ними, они будут вкладки. Нарисуйте маленький белый прямоугольник между одной из вкладок и фон для активной вкладки.

Шаг 29.Добавляем текст на вкладках

Добавьте названия вкладок, я использовал шрифт Futura. За содержание я добавлю пару Последних сообщений на первой вкладке.

Шаг 30 .Футер

Этот футер будет очень простой, мы просто нарисуем несколько случайных акварельных знаков разных цветов, затем повторим процесс шагов 8 - 9, сделаем пару скругленных прямоугольников. Наконец, пора добавить текст футера, небольшой бар навигации и информация об авторских правах подходит совершенных там, к тому же я добавил 1px линию как разделитель. Вы же можете разработать футер, какой хотите.

Заключение

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

Источник