Учимся работать с изолированными изображениями

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

Это композиция, собранная из нескольких отдельных изображений или графических объектов, объединённых в единый визуальный образ.

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

Условно визуал в веб-дизайне можно разделить на полноэкранный и изолированный.

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

При изолированной подаче текст и изображение разделяются. Фотография остаётся полноцветной и самостоятельной, а основным фоном блока становится отдельная нейтральная или цветная поверхность.

Такой подход даёт больше свободы, особенно когда использовать крупную фотографию на весь экран неудобно или однообразно.

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

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

Так даже обычная фотография становится частью более характерной композиции.

Другой вариант — отделить объект от исходного фона и разместить его на собственном фоне сайта. Это может быть мебель, автомобиль, упаковка, продукт или любой другой объект.

Самый простой сценарий — один вырезанный объект на однотонной поверхности рядом с текстом. Здесь особенно важно правильно подобрать размер и положение объекта относительно типографики.

При этом необязательно всегда ограничиваться одним изображением. Обтравленные элементы можно объединять между собой и постепенно переходить к более сложным композициям.

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

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

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

Когда текст и изображение расположены отдельно, между ними иногда возникает ощущение разрыва. Исправить это помогают элементы, которые визуально принадлежат сразу двум частям композиции.

Например, кнопка может частично заходить на фотографию и одновременно оставаться рядом с текстом. Её можно дополнительно встроить в вырезанную область изображения.

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

Изолированный визуал необязательно должен оставаться полностью плоским. Объекты можно располагать на разных планах.

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

Такие перекрытия помогают создать ощущение объёма даже без сложных 3D-эффектов. Главное — чтобы порядок слоёв оставался понятным и не мешал восприятию информации.

Фотографию можно дополнять рисованными элементами, линиями, небольшими иллюстрациями, плашками или декоративными формами.

Например, объект частично помещается внутрь фигуры, но отдельные его части выходят за границы. Рядом можно добавить нарисованные детали, связанные с тематикой блока. Это делает визуал менее предсказуемым и позволяет не строить весь сайт исключительно на фотографиях.

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

Изолированный и полноэкранный способы не исключают друг друга. Их можно сочетать внутри одного сайта и даже внутри одной композиции.

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

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

Главное — понимать, какой элемент находится на переднем плане, какой на заднем и за счёт чего визуал соединяется с текстом в единую композицию.

Перейти к следующему уроку