Стремление обновить сайт или создать нечто совершенное и гармоничное приводит веб-дизайнеров к пониманию в необходимости использования знаний геометрии. Казалось бы, удивительным во времена, когда господствует минимализм, насыщать страницы сайта обилием различных элементов. Но занятен тот факт, что геометрические формы важны в веб-дизайне по разным причинам.
Например, фигуры:
- могут располагаться на заднем или переднем плане всей конструкции;
- могут быть пустыми, полностью или частично заполненными;
- существовать в виде линий, плоских форм или объемных;
- применяться при планировании (сетки);
- быть постоянными или мимолетными, сменяющимися друг другом (анимация);
- быть основой для других элементов, таких как шрифты, логотипы, иконки и пр.
Геометрия в веб-дизайне по своей природе упрощена и организована, но это не значит, что у мастеров нет пространства для творчества. Как только перед вашим взором и в ваших мыслях появляется момент понимания смысла всех элементов дизайна страницы (хотя бы одной), приходит и осознание того, что геометрические формы могут быть использованы в разной степени.
Загадочность геометрических фигур
Когда заходит речь о геометрии в веб-дизайне, возникает вопрос, что действительно могут сделать фигуры с визуальной точки зрения или взаимодействия.
- Формы и линии создают ощущение симметрии и равновесия, что позволяет пользователям легче изучать сайт и продвигаться по страницам.
- На эмоциональном уровне, геометрические формы привносят в общий дизайн нечто успокаивающее и стабильное, чувствуется некое расслабления от просмотра сайтов.
- Сочетания геометрических форм придают дизайну уникальность и красоту, будучи заполненными или окрашенными полностью или частично.
- Фигуры в фонах особенно хорошо подходят для минимализма, придавая утонченность дизайну, воздушность.
- Разумеется, не следует забывать о структурности сайта, которая во многом зависит от расположения и использования фигур.
Общие слова, но понимание психологии и то, как пользователь может чувствовать сайт, дизайн, то, что он видит на экране, позволяет веб-дизайнерам создавать действительно эффективные проекты.
Эффект Polyscape – один и для всех целей
И одним из художественных решений является эффект Polyscape, что находит разные воплощения и служит разным целям. Так, например, сочетания фотографии и форм способны привлечь внимание, создать иерархическое изображение и сделать его более интересным. Нельзя просто взять и нарисовать поверх фотографии треугольник и ждать, что это сработает. Геометрические элементы должны размещаться в тех местах, к которым требуется привлечь внимание посетителей, близ текстовых блоков или призывов к действию. Эти же элементы могут добавить в общую палитру цветов несколько ярких и кричащих оттенков, создавая контраст и позволяя глазам пользователя быстрее ориентироваться в контенте. Разумеется, что если бренд состоит из четких форм, то их использование в фоне подчеркнет индивидуальность компании.
Все это к тому, что уже на протяжении двух материалов мы вам рассказали о многоугольниках в веб-дизайне и о создании абстракции, её использовании. Мы обещали вам, читатели, также и еще один материал о том, как создать занятную, красивую, сложноватую абстракцию в Photoshop, которую можно использовать в качестве фона в веб-дизайне. Об эффекте Polyscape.
Но для начала, давайте еще немного посмотрим на некоторые особо интересные и красивые проекты, которые используют геометрические формы совершенно по-разному. Так, например, проекты highstudios, newcastlenow, hiveboxx, gorohov, designkitchen, .nitroserv, metmuseum, 212conference включили геометрические формы с разными целями. Где-то это элементы меню, где-то добавление не более чем изюминки к общему оформлению, где-то подчеркивание особенности и структурности. При этом геометрические формы используются и в разном количестве.
Эффект Polyscape в Photoshop
Создавать геометрическую абстракцию всегда сложно и интересно, вне зависимости от того, создается ли общий дизайн страницы (макет) или изображение для фона. Интерес создания именно абстракций состоит в том, что они позволяют играть не только фигурами, но и изображениями. Например, можно сочетать разные по тематике фотографии, выложить из них замысловатый графический рисунок, придать несколько эффектов и разместить в фоне. Автоматически такой сайт будет совсем иначе восприниматься пользователями, нежели в фоне будет только обычная фотография.
И совершенно не обязательно делать абстрактную фигуру четкой и яркой. Границы могут быть приглушены или только кое-где выделены.
Но давайте меньше разговоров и все-таки приступим к творению и творчеству в Photoshop. Для начала нужно решить, что мы будем смешивать. Достаточно часто бывает сочетание сцен двух тематик: сельской и городской. Существуют варианты сельской и звездного неба, или космических фотографий с городскими. Важно: на фотографиях могут быть персонажи: люди, животные, птицы, но с ними сложно работать. От абстракции и самой её идеи может остаться мало, потеряться весь её смысл. Получится, в конце концов, изображение-фон, на которое наложили объект и украсили фигурой.
Суть нашей абстракции именно в смешивании двух типов. Мы отправились на unsplash.com и подобрали две вот такие фотографии от Bryan Goff и mohammad alizade. Они похожи, но в то же время различаются тематически, композиционно и по цветовой гамме тоже.
Открываем наше изображение, устанавливаем направляющие по геометрическому центру. Для этого переходим в Просмотр -> Новая направляющая. В появившемся окне последовательно выбираем горизонтальную или вертикальную, а затем значение устанавливаем 50%. Пересечение и будет геометрическим центром.
Теперь нужно создать квадратное выделение.
Если у вас уже квадратное изображение:
- Нажимаем Ctrl+A для выделения нашего изображения. Кликаем ПКМ для выбора «Трансформировать выделенную область». Появятся границы выделения с центрами-квадратиками. По ним вы сможете определить, правильно ли настроены направлявшие.
- Зажимаем Alt и пропорционально уменьшаем наше выделение до… нужного вам размера. Кому-то захочется сделать малую абстракцию, кому-то среднюю. Наше выделение появится автоматически на новом слое.
- Затем, не снимая выделения, кликаем вновь ПКМ, выбираем Поворот и разворачиваем квадрат наш на 45 градусов.
Если у вас широкоформатное изображение:
- Выбираем инструмент Выделение, зажимаем Alt+Shift и начинаем вести выделение от центра нашего изображения. Благодаря Alt выделение будет центрироваться, а Shift создаст квадрат.
- Создаем квадрат нужного размера, кликаем ПКМ, выбираем трансформирование и поворачиваем его на 45 градусов.
В любом случае, углы вашего квадрата должны совпасть с направляющими. Чтобы выделение оказалось на новом слое, нажимаем Ctrl+J.
Не снимая выделения, выбираем в цветовой палитре любой цвет и нажимаем Ctrl + Backspace, чтобы заполнить область. Снимаем выделение Ctrl+D.
Дадим названием слою – «Ромб» и режим наложение выбираем – Перекрытие. Затем два раза по нему кликаем и в свойствах выбираем обводку: внешнюю, белого цвета, шириной 5px, режим смешивания Перекрытие.
Переходим на слой с изображением, выбираем инструмент выделение «Овальная область» и, зажав Alt, из центра создаем овал чуть больше, чем ромб. Затем копируем выделение на новый слой. Способов много, выбирайте, какой вам удобнее. Слой назовем – «Круг» и размещаем его над слоем Ромб.
Выберем «Свободное трансформирование» и отразим наш круг по вертикали. Рисунок перевернется, а именно такой эффект достаточно часто используют в абстрактных геометрических рисунках Polyscape.
Зажмите Ctrl и кликните по слою Круг. Получится выделение фигуры. Кликните ПКМ и выберите в меню «Трансформировать выделенную область» (не свободное трансформирование, иначе ничего не получится) и зажав Shift+Alt, уменьшите круг как вам нравится (рис.сверху). В итоге вы увидите, что выделение уменьшилось, а исходный круг остался без изменений. Нажмите Enter и удалите выделение. Мы создали Кольцо.
Теперь создадим треугольник. Для этого выбираем инструмент Многоугольник, устанавливаем количество сторон 3 и, не зажимая никаких клавиш, от центра аккуратно рисуем фигуру, выравнивая по вертикали. Углы треугольника должны немного заходить на наше Кольцо.
У нас есть еще одна фотография звездной туманности. Помещаем её в наш документ, зажимаем Alt и располагаем курсор между слоями с туманностью и треугольником на Панели Слоев. У вас появится значок стрелочки. Кликайте и получится Обтравочная маска. Таким образом, фотография скроется и только часть её будет видна в треугольнике.
Выделив слой с туманностью можно нажать Ctrl+T (свободное трансформирование) и подвигать изображение, изменить размер и подобрать, тем самым, нужный кусочек, который будет гармонировать с общим рисунком.
В общем и целом, создание абстракции и эффекта Polyscape завершено. Теперь можно поиграть с режимами наложения, добавить несколько фотоштрихов, коррекций.
Например, добавим Уровни и сместим ползунки немного вправо, чтобы придать контрастности всему изображению. Затем добавим корректирующий слой «Цветовой тон/Насыщенность» и сделаем композицию немного светлее.
Также можно добавить «Кривые» и по отдельности отрегулировать значения Красного, Синего и Зеленого цвета, придавая тем самым изображению тот оттенок, который необходим.
Хорошая идея отдельно затонировать, осветлить, или размножить фигуры и развернуть их в виде геометрического абстрактного цветка.
Чтобы всю композицию увеличить или уменьшить, удобнее объединить их в группу, и уже эту самую группу выделить в «Свободное трансформирование» и изменять размер.
Главное не забывайте зажимать Shift+Alt, чтобы и квадрат сохранялся, и из центра шло выравнивание.
Таким образом, мы создали самую простую абстракцию, но в действительности форм может быть много, вплоть до вариаций сочетаний геометрических фигур. И неважно, какие они именно, такие фигуры подойдут для разных целей, и визуально будут отлично смотреться.
Как мы говорили в начале нашего материала: этот эффект называется Polyscape, и если открыть Google, то можно увидеть самые разные вариации сюрреалистических абстрактных изображений, что содержат в себе другие изображения и не одно даже. Конечное наше произведение обладает полной эстетикой стиля Polyscape, сочетает в себе природный пейзаж и звездную туманность, обладает геометрическими фигурами, зеркальным отражением, цветовыми наложениями и прочими эффектами.
Завершение
Эффект Polyscape или абстрактная геометрическая фигура, составленная из разных изображений – удивительный фотоэффект, который создается быстро и способен поражать только одним своим внешним видом. Неважно, есть дополнительные фильтры или нет, но это выглядит потрясающе красиво и ошеломляюще.
Несмотря на то, что фотоэффект не нов, шумиха вокруг него в среде веб-дизайна не стихает до сих пор. Причина тому, удобство и эстетика. Главное, что нужно помнить – простота фотографий. Все они должны отражать спокойные обстановки, сцены, тематику и не иметь обилия фильтров или пересветов. Тогда, создав такой эффект Polyscape, вместо изображений в сами фигуры можно включить элементы, блоки, меню, кнопки и многое иное. И получится, что весь дизайн, макет, создан по образу и подобию фотоэффекта. Но сама конструкция все равно будет представлять собой абстрактный геометрический рисунок.
Таким нехитрым образом, оба наших материала представили вам, читатели, разные способы создания геометрической абстракции или эффекта Polyscape, которые до сих пор приветствуются в веб-дизайне и навряд ли устареют еще долгое время.