Веб-дизайн, если рассматривать его как способ доставки контента пользователю, планируется и создается с особой ответственностью и важностью. Но сама работа упрощается тем, что в основе макета используются сетки, колонки и различные геометрические формы. Квадраты, прямоугольники, трапеции, ромбы, шестиугольники, треугольники, окружности – наиболее распространенные элементы для оформления дизайна, причем, в самых разных стилях. Их можно увидеть в навигации, визуальном акценте отдельных частей, оформления фреймов и блоков, секций. Более того, геометрические форы могут сочетаться друг с другом, создавая оригинальный визуальный эффект рисунка. Четкие, прямые, резкие и неокруглые линии и фигуры часто способствуют ассоциации сайта с передовыми технологиями, даже если сам контент рассказывает о… котятах, например.
В конце лета мы затрагивали немного тему многоугольников в веб-дизайне, рассматривали интересные работы веб-мастеров, упоминали об особенностях многоугольников. Сегодня мы повторно не будем подробно останавливаться на всех тонкостях геометрического веб-дизайна, но уделим внимание тому моменту, когда геометрические формы способны создавать потрясающий визуальный эффект коллажа. Поскольку такую красоту создавать несколько кропотливо, то мы разделим весь этот огромный объем информации на две части, последовательно и обстоятельно рассказывая о каждом варианте. Иными словами: практике работы в Photoshop с геометрическими формами мы посвятим два материала.
В целом, геометрические формы могут использоваться в веб-дизайне в разном назначении. В качестве фоновой текстуры, элемента навигации, но частенько такое применяют и в дизайне 3600 или с эффектом дополненной реальности. Геометрические элементы – отличный вариант для оформления портфолио, галерей, домашних страниц. Для наглядности и вдохновения посмотрим на некоторые особо яркие примеры дизайна сайтов, которые и послужат нам основой для творения в Photoshop. Речь идет о bigbang, paseoitaigara, webey, mrsaghafi, jtcdesign, paseodegracia.
Геометрия, симметрия, абстракция в Photoshop
А если немного пофантазировать и превратить фотографию в абстрактный коллаж из геометрических фигур? Мы создадим нашу форму, а потом разрежем изображение по ней и выложим новую композицию. Немного цветооткорректируем и придадим эффектов. Ничего не напоминает? Возможно, некоторые из вас вспомнят старые ретро коллажи из фотографий, газет, рисунков, когда из изображений вырезались геометрические фигуры, а затем ими выкладывалась совершенно новая симметричная фигура.
Сложно? Не совсем. Некоторые мастера используют в дополнение к Photoshop еще и Illustrator, но мы сделаем все силами одного только фоторедактора.
Для начала нам предстоит нарисовать в новом документе фигуру «Эллипс» размером 500х500 px. Можно создать такой же по размеру Документ, а затем пропорционально увеличить размер холста до 700х700 px. Можно сразу большой и нарисовав фигуру, отредактировать размеры в окне свойств. Путей много, тут как вам удобнее.
Мы же создали новый документ 500х500 пикселей, включили направляющие через центр (Меню Просмотр – Новая направляющая и затем передвинули их в центр).
Выбираем фигуру «Эллипс» на панели инструментов, отключаем заливку и оставляем контур в 2 пикселя (нам так нравится). Рисуем Окружность и при необходимости редактируем в окне свойств её ширину и высоту до 500 px. Переходим в Изображение - > Размер холста и увеличиваем до 700х700 px.
Отдельные геометрические фигуры мы будем рисовать разными цветами. Это для наглядности, для удобства выравнивания, чтобы все кружочки, уголочки визуально не сливались в черном цвете.
Затем рисуем отдельный маленький круг размером в половину большого, то есть 250х250 px и располагаем его внутри большого по центру. Поскольку мы рисуем симметричную абстракцию, то эту симметрию и придется создавать по направляющим.
Зажав кнопку Alt, инструментом Перемещение (чтобы автоматически создавались новые слои) создадим еще три копии маленького кружочка и разместим внизу, справа и слева, создав крестик. При этом сами кружочки должны пересекаться между собой и только границей соприкасаться с большим. Затем в центре тоже разместим один кружочек. И вот что должно получиться в итоге.
Поскольку мы рисуем геометрические фигуры, то одних только кругов мало. Давайте создадим треугольник, который должен будет вписаться в большой круг. Выбираем инструмент Многоугольник, устанавливаем количество сторон 3 и размер 250px. Рисуем его, а затем с помощью Трансформирования (Ctrl+T) подгоняем под размер (это чуть удобнее), так чтобы нижняя грань соприкасалась с тремя точками трех горизонтальных центральных кружочков.
А затем этот треугольник копируем и переворачиваем по вертикали. Итог ниже.
Таков наш рисунок.
Несложно, но красиво. Объединяем все слои в группу и делаем копию группы. Вот это нужно для того, чтобы затем иметь в будущем возможность отредактировать фигуру. Если бы мы использовали Illustrator, то фигура осталась бы там, и мы могли бы её там и редактировать. Но в данном случае, мы сохраним её в слоях как группу, а с копией поработаем дальше.
Выбираем группу копию и объединяем все слои. У нас получается отдельная целая фигура. Фон у нас белый, но если его отключить, то фигура будет прозрачной и с ней можно работать дальше.
Открываем наше изображение в новом документе, копируем слой-абстракцию и при необходимости с помощью Трансформирования (Ctrl+T) увеличиваем фигуру до нужного размера. Согласитесь, что создать по четким размерам ее проще, а затем увеличить или уменьшить. Инвертируем цвета на слое с фигурой (Ctrl+I) или Изображение -> Коррекция -> Инверсия.
Теперь:
- Выбираем инструмент «Волшебная палочка» и выделяем некий объект в нашей фигуре.
- Переходим на инструмент выделение «Прямоугольная область» и перемещаем выделение в любое понравившееся вам место на изображении.
- Делаем активным слой с картинкой, копируем (Ctrl+V), вставляем (Ctrl+C).
- Берем инструмент Перемещение и переносим новым слой с кусочком картинки на старое место внутри абстрактной фигуры.
И так каждый кусочек фигуры мы меняем. Поначалу будет казаться, что получается, откровенно говоря, «белиберда полнейшая». Но… к слою двадцатому вы заметите заметное преображение всего рисунка.
Важно: чтобы слой-кусочек ровно занял положение внутри фигуры, корректируйте его положение с помощью кнопок-стрелок на клавиатуре при активном инструменте Перемещение. Если все равно остаются нежелательные разрывы, активируйте Трансформирование (Ctrl+T) и поправьте форму кусочка. Затем соберите все их в группу.
И вот, что получилось в итоге.
Но фигура-то у нас цветная, несмотря на то, что мы её инвертировали. Да, черное стало белым, но цветное осталось. Можно аккуратно заполнить белым (инструмент Заливка), но тогда контур будет очень толстым и выглядеть будет несколько неказисто, рвано даже (на наш вкус). Поэтому мы выделяем слой с фигурой, выбираем Изображение -> Коррекция -> Цветовой тон/Насыщенность и снижаем параметр Яркость до нуля. И теперь границы по-современному четкие и белые.
А можно сделать их немного голубоватыми. При этом тонироваться будут только цветные границы. Проблема в том, что у нас кружочки в центре белые (ранее черные), а это значит, что они не затонируются с помощью параметра Цветовой тон. Наложим цветность другим способом.
Поэтому в окне «Цветовой тон/Насыщенность» меняем яркость на ноль и переходим в «Режим наложения» для данного слоя-фигуры. Здесь накладываем цвет и можно немного поиграть с «Внешним свечением», создав тем самым небольшую дымку.
Еще к оригиналу можно добавить теней немного, будто сверху рамка фигурная с линзами (рисунок-то искажен внутри) наложена и от её граней отбрасываются тени.
Мы оставим себе беленький оригинал для дальнейшего работы.
Веб-дизайн в последнее время несколько прохладно относится к коллажам в целом, но наши кусочки, размещенные несколько случайно и хаотично, образуя симметричную геометрическую фигуру, сохраняют целостность композиции и сбалансированность. Поэтому при размещении на главной странице под названием или логотипом, в качестве фона или в ином варианте (затонированым основным изображением или с уменьшением общей яркости и насыщенности) такой эффект не является устаревшим или признаком дурного тона.
Но давайте добавим немного ретро-веяния в коллаж. Мы подобрали вот такую текстуру пыли на черном фоне и добавляем её к нашему документу. Поскольку текстура черная, то режим наложения выбираем «Экран», что позволит сделать её прозрачной, светлой и скрыть, тем самым, всю черноту. Изображение обретет вид временной потертости, потеряет некоторую строгость и четкость.
Теперь над всеми слоями создаем Корректирующий слой «Кривые» (внизу панели слоев иконка есть). Отдельно меняем кривизну для Красного, Зеленого и Синего цвета, создавая тем самым ретро стиль и эффект обработанной старой пленки. Дополнительно можно охладить наше творение, добавив фотофильтр – «Глубокий синий» со средней плотностью.
Окончательный результат наших манипуляций является не чем иным, как абстрактным произведением искусства с частичками изображения, что были изначально вырезаны, а затем выложены в коллаже. Геометрические линии создают баланс произведения, в то время как дополнительное текстурирование и регулировка цветности завершает творение и превращает его в старинное изображение. При этом геометрические узоры могут быть самые разные, как и исходные изображения.
Ниже, например, мы отключили границы фигуры, придавая всей композиции больше воздушности, парения и нечто заоблачного. Таким образом, создается ощущение и ассоциация, что произведение не только представляет красоту технологического города, небоскребы которого поднялись гораздо и гораздо выше облаков, но и все многообразие этой красоты, преломляя и разбивая сцену на отдельные части, смешивая их в строгую симметрию.
Важно принять во внимание, что главное в таком эффекте – контраст. Располагать в верхней части фигуры кусочки светлых облаков неправильно. Фигура бы слилась со сценой, и даже наличие линий (белых или иного цвета) не решило бы проблему визуальной ясности. Поэтому подбирая изображение, смотрите всегда на общий контраст композиции; прикидывайте мысленно, можно ли разбить сюжетную картинку и будет ли сочетание геометрии и художественного произведения смотреться и гармонировать.
Выводы
Геометрические фигуры используются не только в веб-дизайне. И причина тому – способность простых форм строить общение на динамике, движении. Они олицетворяют все это собой, а человек воспринимает геометрию, как нечто прогрессивное. Попробуйте отодвинуться от монитора и посмотреть на созданный нами коллаж издалека. Вы увидите совсем иное произведение, будто бы совсем новое. Возможно, вам покажется, что вот-вот оно закрутится или начнет распадаться на отдельные элементы.
Теперь представьте, что такую небольшую анимацию можно создать в Photoshop, или можно использовать параллакс и двигать отдельно фигуру и фон (он остался у нас целым и невредимым). Идей, в действительности, очень много.
Каждый год конструкции с геометрическими фигурами становятся популярными. В 2011 году в моде были диагонали; в 2013 – стиль METRO и квадраты с прямоугольниками; в 2016-2017 – параллакс породил безумие форм от треугольников до шестигранников. Это они только появились, а потом, в последующие годы, их старались применять практически везде. Таким образом, используя абстрактный коллаж, можно поразить и пользователей, и заказчиков необычностью и ассоциативной технологичностью.