Размещение объектов на плоскости, при котором устанавливаются гармоничные отношения между ними и с самим рабочим пространством, называется композицией.
«Композиция» в переводе с латыни означает «сочинение», «составление» целого из частей.
В широком понимании – это художественный замысел, структура произведения, наиболее полно выражающая его идею.
Композиция есть и в типографике и в в работе с цветом, как только вы начинаете создавать любой визуальный образ, даже с самыми минималистичными средствами – вы начинаете работать с композиции.
И даже когда вы еще ничего не разместили на листе – вы уже начали работу с ней. Потому что вы уже имеете дело с пропорциями, с соотношением ширины и высоты рабочего листа – это уже нам о чем то говорит.
Далее – у нас появляется объект(точка, буква, какое-то пятно и пр.) В зависимости от того, как этот элемент взаимодействуют с вашим рабочим пространством - и строится композиция.
Многое зависит от того где вы поставите эту точку, какого размера и цвета.
Все становится гораздо интереснее и сложнее, как только в вашей композиции появляются два объекта. Теперь уже они взаимодействуют не только с форматом, но и друг с другом.
Три объекта создают законченную, можно сказать, классическую композицию. Это уже не противопоставление одного объекта к другому, а некая завершенная, многоуровневая, многовариативная композиция.
Четыре же и более объектов - это открытое море с неограниченным количеством интерпретаций.
Давайте подытожим и определим основные цели композиции:
- понятность сюжета/истории
- выделение главного и второстепенного
- привнесение смысла в хаос
- эстетическая красота
Все это звучит логично и понятно до тех пор, пока мы не сталкиваемся с пустым холстом.
Чем руководствоваться, чтобы достигать целей композиции? Как выделить главное от второстепенного?
Начнем с инструментов для выделения главного:
1. Цвет
Ниже размещены пять абсолютно равноценных кубика и нельзя сказать, что какой-либо из них является главным.
Но, если один из кубов мы окрасим в другой цвет, то взгляд начинает будто "прилипать" к выделенному объекту, меняется общее впечатление от картинки и мы получаем уже некую историю.
Обратите внимание как, например, в картине ниже автор выделяет главный объект за счет уникального цвета, который есть на юбке героини и нигде больше.
2. Масштаб
Вариации размеров изображаемых объектов - это очень простой и эффективный способ показать иерархию объектов.
Например, наиболее крупный объект будет автоматически восприниматься более значимым.
3. Контраст
Объекты, находящиеся в зоне наибольшего контраста будут главенствовать.
На примере ниже около персонажа выделены наиболее явные контрасты и именно этот персонаж становится главным объектом всего холста, даже не смотря на то, что вокруг еще множество иных фигур.
Рассмотрим еще один пример, с применением контраста по тону, то есть контраст светлого и темного.
Так же выделение главного объекта возможно за счет цветового контраста.
4. Фокус
довольно специфический прием, скорее пришедший из фотографии, но это тоже очень хорошо работает.
5. Направляющие.
Под направляющими мы понимаем любые элементы, так или иначе сопровождающие взгляд в определенную область. Это могут быть линии/формы/силуэты.
И еще один пример:
Итак, мы рассмотрели тему выделения главного, как обратить внимание на тот или иной объект.
Вопрос следующий. Куда это главное поместить на рабочем пространстве?
1 .Начнем с правила третей.
Правило третей - это один из старейших принципов композиции. Чтобы понять, как работает правило, нужно визуально разделить рабочую область на три равных части по вертикали и три равных части по горизонтали, тем самым получить сетку.
На пересечении линий будут 4 точки, на которые зритель обращает внимание в первую очередь. Расположив элемент в этих областях, дизайнер привлекает к нему дополнительное внимание. В примере ниже на одной точке пересечения находится кнопка, на другой – заголовок, а на оставшихся двух точках расположена иллюстрация:
2. Золотое сечение
Говоря о композиции мы, конечно, не можем не затронуть тему золотого сечения.
Многие думают, что всё, что сделано по принципу золотого сечения будет как минимум шедеврально.
Для начала давайте разберемся, что же такое золотое сечение. Если отбросить сейчас все не нужные нам математические формулы, то под правилом золотого сечения мы понимаем композиции, содержащие пропорции близкие к 3/8 или 5/8.
В золотом сечении есть красота и гармония — факт, мы все это видели.
Но не стоит стопроцентно полагаться на правило золотого сечения в своей работе - иногда оно работает гениально, иногда не работает совсем, иногда с некоторыми оговорками и т.д.
При расположении объектов на рабочем листе, необходимо помнить об еще одном важном пункте -
3. Баланс
Мы подсознательно любим баланс. Любовь к устойчивым конструкциям заложена в нас на подсознательном уровне. В то время как дисбаланс, напротив, вызывает чувство отторжения. Именно поэтому второй вариант, расположенный ниже воспринимается как более устойчивый и гармоничный.
И когда мы представляем себе баланс, то проще всего его сравнить с понятием веса.
Когда какая-то часть изображения перетягивает внимание зрителя, мы сталкиваемся с термином «несбалансированная композиция». Например, если это визуально тяжелый объект, который безуспешно пытаются уравновесить два меньших объекта:
Важно отметить, что балансировка может происходить не только за счет распределения объектов, но и за счет падающих теней.
Очень важным элементом баланса является в том числе и цвет.
В качестве примера рассмотрим композиции ниже. Вторая из низ выглядит более целостно и гармонично, за счет распределения цвета на другие элементы композиции.
4. Эффект обрамления.
Эффект обрамления - это важный элемент зрительского комфорта.
Для создания комфорта и создания некой поддержки объектам мы можем добавлять дополнительные элементы, которые будут как бы обрамлять весь кадр.
Давайте рассмотрим примеры
5. Заполнение кадра (full frame)
Опять же прием, пришедший из мира фотографии. Его суть заключается в использовании крупных планов и максимального заполнения площади.
Сравните примеры ниже и заметьте насколько богатые эмоции вызывают кадры с эффектом full frame.
6. Ритм, повторения и движение
Ритм практически всегда состоит из некий повторений одного и того же и ритм создает движение.
Зачастую общая большая, сложная форма создается ритмически зацикленными более мелкими элементами.
Пример из современной архитектуры
Фишка в том, что мозг легче запоминает один какой-либо повторяющийся элемент и с помощью этой информации проще воспринять целое.
Повторение малого в большом дает нам понимание общего принципа.
С помощью повторения ритма мы можем создать определенное ощущение от изображения.
Например, ощущение тишины и спокойствия. Обычно это характерно для вертикальных вытянутых форм, с соответствующим повторением.
Или мы можем создать эффект движения. Обычно, в таком случае в ход идут горизонтальные линии.
С помощью зацикленности и ритма мы так же можем управлять взглядом зрителя, проводя его в какую-то определенную точку.
Обратите внимание как на примере ниже, за счет вертикальных линий композиции создается ощущение умиротворения и спокойствия
Диагональные линии так же создают ощущение движения
7. Касание/соприкосновение объектов.
Сравним между собой следующие варианты:
Отметьте, как объекты соприкасаются друг с другом прямо по силуэту. За счет таких соприкосновений мы рискуем сбить фокус внимания зрителя с главного именно на эти зоны.
8. Ракурс
Ракурс имеет важнейшее психологическое значение.
Например, фигура человека, изображенная с разной высоты, с разного ракурса - передает совершенно разные ощущения от картинки.
Таким образом, исходя из цели, мы можем задавать кадру тот или иной характер.
С данными правилами композиции вам будет проще начать ее освоение.
И напоследок данной "стартовой базы" правил и принципов композиции, хочется отметить, что на каждое ее правило есть сотни исключений :)
Правила не должны ограничивать вас в креативности и в творчестве.
Старайтесь отталкиваться от содержания вашего проекта. Рассматривайте такие моменты, как цели проекта, типы контента, визуальный вес элементов, ожидания аудитории и пр.