Акварельный дизайн сайта в фотошопе

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

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

Вот, над чем мы будем трудиться:

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

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

Шаг 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) в панели инструментов.

Для того чтобы  изображение сделать особенным, в первую очередь, необходимо сделать  мгновенный снимок работы. Для этого перейти  в Windows-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 линию, которая используется как разделитель. Можно сделать ь футер, на свое усмотрение.

Больше об этом можно узнать тут:

http://constantin.at.ua/load/grafika_dlja_sajta/sozdaj_akvarelnyj_dizajn_dlja_sajta_v_fotoshop/5-1-0-125