Рисуем живописный фон с помощью кистей

Когда я впервые увидел вот этот блог, я был серьезно впечатлен. Фон, можно сказать, целиком и полностью выполнял свою функцию — увлекать читателя. И это великолепно. После изучения сайта я так и не смог определить: настоящий ли это рисунок, или его создавали с нуля при помощи Photoshop. Но, вне зависимости от того, как автору удалось добиться такого результата, это — великолепный пример уникального веб дизайна. В этом уроке я расскажу, как можно добиться подобного эффекта.

1 Шаг

Перед тем как начать, вам нужно скачать пару бесплатных кистей и перенести их в соответствующую папку в фотошоп:

Поскольку мы будем создавать фон для веб с итоговым разрешением 1024 px в длину, создайте новый документ и задайте размеры 1100px на 900px. Теперь мы можем работать.

Первым делом нужно определить для себя цветовую схему, на которой будет основана наша картина. Для этого примера я решил подобрать три основных группы цветов: небо, горы вдали, холм первого плана с деревьями. Мне нравится пользоваться цветовыми палитрами в своей работе — это позволяет быстро переключаться между подобранными для работы цветами.

2 Шаг

Приступим к непосредственно рисованию. Начнем, конечно же, с неба, поскольку оно находится на самом последнем плане. Выберите Brush Tool (B), а затем из опций Brush Preset Picker загрузите сет BB_Watercolor_II. Это — наши акварельные кисточки, которые мы загружали с Bittbox. Их с легкостью можно использовать на высоких разрешениях, поэтому установите размер кисти в районе 300-400 пикселей.

Выберите самый светлый оттенок из нашей небесной палитры. Начните с середины документа совершать единичные мазки через всю страницу, комбинируя различные кисти и их размеры. Продолжайте наносить мазки до тех пор, пока не получите закрашенную площадь по всей длине документа, высотой порядка 300px.

Так же, как и в случае с реальными кисточками — не перебарщивайте. Иначе, закрасив все подчистую, вы лишитесь тех маленьких деталей, которые делают применение кистей таким незаменимым.

Теперь повторите то же самое, только уже другим цветом из своей небесной палитры. Каждый раз двигайтесь все выше, перекрывая свой предыдущий цвет.

3 Шаг

Теперь создадим горы вдалеке. Возьмите средний оттенок со свой палитры для гор и с помощью Pen Tool (P) нарисуйте желаемую форму скал по всей длине документа. Это нам послужит направляющей для работы кисточкой, ну и сразу задаст цветовую основу.

Снова выберите Brush Tool и подберите какую-нибудь акварельную кисточку, максимально плоскую в верхней части. Не забудьте выставить размеры порядка 300px. Теперь ваша задача — обвести мазками кистью горный контур по всей длине, слегка его перекрывая. Так вы получите более приближенные к нашему стилю очертания горы.

Так как наши скалы получились довольно-таки плоскими, придадим им немного глубины. Выберите красивую кисточку, задайте ей размеры 100-150px и самым светлым и темным тонами для наших гор нанесите на них свет и тени. Имейте в виду, что это все должно выполняться очень тонко и едва заметно, так как детализацию необходимо оставлять близкой к минимальной — горы ведь вдалеке.

4 Шаг

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

Теперь немного оживим холм при помощи деревьев. Как вы проделывали с акварельными кистями — загрузите кисти с деревьями. Название этого сета — Trees_by_Horhew. Они также высокого разрешения, поэтому используйте их соответственно. Композиция — дело лично вашего вкуса, но, опять же, не перестарайтесь.

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

5 Шаг

Теперь цвета и краски выглядят действительно великолепно, но все до сих пор выглядит чересчур искусственно и нарочито. Нужно добавить немного текстур. Создайте новый слой поверх всех остальных и установите его режим смешения равным Multiply. Переключитесь на Brush Tool и выберите одну из акварельных кистей, только на этот раз задайте ей максимально возможный размер. Выберите средний оттенок из палитры для неба и поставьте одну кляксу такой кистью посередине вашего документа. Таким способом вы за один лишь клик добавили аккуратную текстуру на свой фон. Поэкспериментируйте с разными формами кистей для достижения наилучшего вида.

6 Шаг

Такой прием немного помог, но итоговое изображение все еще нуждается в небольшой доработке. Слейте все слои в один и добавьте немного шума (Filter > Noise > Add Noise) с параметром в 3px.

7 Шаг

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

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта designreviver.com, автор перевода указан в начале урока.