Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Создаем шаблон сайта с ручной природной раскраской в Фотошоп

В этом уроке мы создадим шаблон сайта природной тематики. Очень простой урок Фотошопа.

Создаем шаблон сайта с ручной природной раскраской

работа с цветом в фотошоп Шаг 1. Прежде чем приступить к созданию сайта, скачаем два свободнораспространяемых комплекта кистей.
Watercolor Brushes с сайта Bittbox и Complete Tree Brush Pack с сайта Brusheezy
Cоздадим новый документ (Ctrl+N) шириной 1100 и высотой 900 пикселей. Теперь, надо подобрать цвета для будущего сайта. Исходя из предполагаемого дизайна сайта, разделим все цвета на три группы: небо, дальние горы и близлежащие холмы с деревьями

brushШаг 2. Начнем рисовать. Рисуем небо, слой с ним будет находиться под остальными. Выбираем Инструмент Кисть (Brush Tool (B)) и загружаем набор акварельных кистей BB_Watercolor_II. Выставляем диаметр около 300-400 пикселей.
рисуем кистьюВыбрав самый светлый оттенок из группы "небо", рисуем начиная с середины документа вверх, меняя постоянно вид кисти и её размер. Продолжаем рисовать пока не заполним по ширине весь документ, а по высоте не будет около 300 пикселей.
рисуем небоПовторите это с дригими оттенками цвета неба.
рисуем горыШаг 3. Пришло время нарисовать дальние горы. Задаем основным (foreground) цветом - цвет горы и, выбрав Инструмент Перо (Pen Tool), рисуем заготовку под будущие раскрашенные кистями горы.
brush toolВыбираем Инструмент Кисть (Brush Tool) и, используя тот же набор акварельных кистей, рисуем горы, не забывая менять диаматр кистей (начинаем c 300 пикселей), форму и цвет. Для того, чтобы горы не выглядели плоским добавим им немного теней.
рисуем деревьяШаг 4. Используя ту же технику, добавим близлежащие холмы, раскрасив их более темными цветами (из нашей третьей цветовой группы). А чтобы добавить жизни нашим холмать нарисуем несколько деревьев, воспользовавшись вторым набором кистей (Complete Tree Brush Pack).
рисуем текстуруШаг 5. наш шаблон уже выглядит великолепно, но как-то скучновато и размыто. Добавить некой изюминки позволит следующий прием. Создаем новый слой (Ctrl+Shift+N), меняем Blend Mode (Режим Смешивания) на Multiply (Умножение) и, выбрав большую (большую чем раньше) акварельную кисть промежуточного цваета из группы "небо", рисуем текстуру. Если поэкспериментировать с различными видами кистей, можно добиться очень интересных эффектов.
На рисунке показан макет до добавления текстуры (слева) и после (справа).
Шаг 6. Для того, чтобы убрать размытость доваим резкость. А для этого (находясь на слое с новой текстурой) идем Filter>Noise>Add Noise (Фильтр>Шум>Добавть шум) с параметром amount (количество) - 3.
макет сайта в фотошопеШаг 7. Ну вот и всё, осталось только добавить логотипы и тескт. Поздравляю, наш самостоятельно нарисованый макет сайта готов!

Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайт обязательна. Автор DesignReviver. Оригинал статьи на английском


Другие уроки Photoshop >>