Геометрия творчества

Архив

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

Рисунки С. Чебаткова

   Итак, композиция. Зачем нужно знание композиции? Может показаться, что к компьютерам это не имеет отношения: Отнюдь. Хотя композиционные законы веками разрабатывались художниками применительно к живописи, графике, рисунку, они точно так же относятся к дизайну интерфейса, сайта, визитки или журнала. Мы понимаем, на какой риск идем, пытаясь втиснуть в узкие рамки статьи принципы и методы композиционного построения, и заранее просим прощения у собратьев-дизайнеров за немного утрированную, прикладную и очень сжатую форму подачи материала.

   В предыдущей статье уже отмечалось несовпадение оптического и геометрического центра листа. Для композиции это столь же верно: почти никогда оптический центр не совпадает с геометрическим, и все уравновешивание должно проводиться именно относительно оптического центра, повинуясь движению взгляда. Взгляд человека всегда путешествует сверху-справа вниз и влево, и именно в таком порядке должны быть расположены важные элементы композиции художественной, давая возможность взгляду плавно "войти", "прогуляться" и остановиться в центре. К рекламной композиции это правило зачастую отношения не имеет, поскольку необходимость "поймать" аудиторию приводит к созданию ловушек, останавливающих взгляд и заставляющих глаза поработать. Однако размещение рекламы в полосе полностью подчиняется этому закону, и на рис. 1 показаны наиболее и наименее выгодные места (определенные опытным путем) расположения объекта на полосах разворота. Впрочем, это применимо и к отдельному листу, и к сайту, и вообще к любой графической композиции).


Рис. 1.

   Зачастую при долгой работе над каким-либо шедевром глаз замыливается, и тогда определить, насколько хороша и правильна ваша композиция становится почти невозможно. Или, к примеру, вы чувствуете, что что-то не так, а что - неясно. В подобных случаях стоит использовать одну хитрость: перевернуть работу "вверх ногами" или посмотреть на ее зеркальное отражение. Все, что не на своем месте, сразу начинает просто выпрыгивать из листа! На рис. 2 даны примеры уравновешенной и неуравновешенной композиции, и если вы перевернете журнал, то несбалансированные участки заявят о себе в полный голос. Это связано с психологией восприятия иллюстрации: картинка "вверх ногами" уже не несет смысловой нагрузки, поэтому определить ее недостатки гораздо проще. Если журнал вертеть лень или тяжело, можно в крайнем случае прищурить глаза...


Рис. 2.

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

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

   Рассмотрим теперь основные виды композиционных решений.

   Композиция в прямоугольнике
   Самый распространенный вид. В принципе, ее можно назвать "композицией высшего уровня". Остальные три вида композиции обычно становятся элементами первой, поскольку прямоугольниками являются и бумажный лист, и экран монитора, и визитная карточка, и этикетка, и многое, многое другое. Правда, не стоит путать границу листа (или экрана) и границу композиции: не забывайте о полях. Конечно, композиция может быть "навылет", сквозной, но и в этом случае отдельные ее элементы (к примеру, текст на журнальной полосе) не должны прилипать к кромке отведенного пространства - это будет уже не "тонкий ход дизайнера", а элементарная неграмотность или неуважение к зрителю. Рассмотрим разновидности прямоугольной композиции.

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



   2) Центровая с замками по углам. Центральный элемент композиции расположен в оптическом центре. Остальное - как в предыдущем варианте.



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



   4) По периметру центровая. Ну, это вообще в чистом виде этикетка. Обратите внимание, что низ опять утяжелен, однако снизу по вертикальной оси периметр может быть разомкнут.



   5) Центровая с выделенным фоном. Центральная фигура расположена ниже оптического центра, а нижняя часть фона отступает от нижнего края композиции примерно на одну треть высоты.



   6) Центровая уравновешенная. Все элементы композиции уравновешены относительно оптического центра. Часто используется при создании афиш, суперобложек, упаковки для видеокассет: главный герой выводится по центру вниз, остальные "отъезжают" вверх и на задний план. Еще одно применение - в рекламных полосах: рекламируемый объект отправляется в область оптического центра, низ уравновешивается тяжелым текстовым блоком.



   7) Центровая с диагоналями. Центральная фигура вновь смещена вниз. Диагональные элементы удерживают ее от сваливания, при этом нижние "подпорки" тяжелее. Хороша для рекламного фото (девушка, свернувшаяся клубочком на большой-пребольшой постели, и складки, складки покрывала...).



   8) Пейзажная. Название говорит само за себя. Линия горизонта расположена на расстоянии одной трети от нижнего края композиции.



   9) Натюрморт. Тоже все понятно. Однако здесь есть один нюанс: линия горизонта практически совпадает с верхним краем композиции.



   10) Портретная уравновешенная. Герой портрета немного смещен вправо, по направлению входа взгляда, и уравновешен какой-нибудь мелочью в левой части. Линия горизонта максимально приближена к нижнему краю композиции.



   11) Смешанная (произвольная). Все, что угодно. Абстрактные композиции. Сохраняется правило оптического центра и утяжеленного низа.



   Композиция в круге
   Благодаря отсутствию углов композиция в круге выглядит мягче и спокойней (кстати, овал - тоже разновидность круга). Ее очень хорошо использовать для создания фирменных знаков, логотипов, пиктограмм, оформления фронтисписов (страница с иллюстрацией, помещаемая в разворот с титульным листом) и титульных листов книг, помещая рисунок в круге в оптический центр пустой полосы. Композицию в круге также очень любят Web-дизайнеры, видимо, оттого, что она позволяет поиграть на контрасте с квадратно-гнездовым интерфейсом операционных систем, а значит - сайт запомнится и принесет его разработчику много других, всеми любимых композиций в круге, тех, что чеканит Монетный двор.

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



   2) Центровая с выделенным периметром. "Круглость" композиции дополнительно подчеркнута равномерным периметром. Эта композиция практически всегда применяется при разработке печатей.



   3) С акцентом на периметр. Основные элементы расположены по периметру, подчеркивая круглую форму. Низ утяжелен, элементы разомкнуты. Использована при разработке аверсов современных российских монет.



   4) По вертикальной оси. Очень элегантная композиция. За счет обилия пустого пространства позволяет создавать запоминающиеся эмблемы и знаки. Низ обязательно должен быть утяжелен, композиция требует рамки. Кстати, запомните, что по горизонтальной оси композиция в круге никогда не строится! Обилие пустого пространства, подчеркивающее элегантность вертикальной композиции, в горизонтальной "подвешивает" объект, лишая его устойчивости и опоры.



   5) По вертикальной оси с акцентом на периметр и замком. Тяжелый низ требует противовеса, роль которого играет замок. Эту композицию очень любил Монетный двор бывшего СССР, и не зря: для гербов, монет и медалей подходит как нельзя лучше.



   6) По вертикальной оси с акцентом на периметр, без замка. Эта композиция распространена ну очень широко. В книжном дизайне, при оформлении обложек излюбленным приемом художников книги было впихнуть Персонажа в венок из лавровых листьев, и все это - тисненое золотом по темной обложке: Как и предыдущая, широко используется в монетах, гербах и медалях.



   7) Асимметричная со свободным центром. Балансировка изображения идет по вертикальной оси. Композиция очень иллюстративна - эдакий "дверной глазок".



   8) "Навылет". Также иллюстративна. Обратите внимание, что вертикальные и горизонтальные линии не искажаются, круглая рамка как бы "выхватывает" часть пейзажа. Как и для пейзажной композиции в квадрате, линия горизонта отстоит на треть высоты от нижней рамки. Постоянно используется в оформлении книг и упаковки, преимущественно для пищевых продуктов.




Рис. 3.

   Учтите, что низ композиции в круге всегда должен быть тяжелее, иначе она начнет заваливаться (вспомните ваньку-встаньку). Кстати, примером несбалансированной композиции является герб бывшего СССР (рис. 3). По задумке, Солнце должно было утяжелить нижнюю часть герба, и это действительно происходит на барельефе. Однако в графической и полноцветной версиях герба более темный верх перевешивает, и земной шар вместо того, чтобы парить, оказывается зажатым между двумя снопами колосьев, придавая композиции неустойчивость.

   Композиция в треугольнике

Рис. 4.

   В противоположность кругу треугольник агрессивен, привлекает внимание, мобилизует. Именно поэтому предупреждающие дорожные знаки имеют треугольную форму. Выразительная и лаконичная, эта форма великолепно подходит для пиктограмм, однако, в отличие от квадрата и круга, практически не годится для живописи. Ее стихия - графика. Треугольник не допускает композиции "навылет". Композиция в треугольнике острием вниз неустойчива, привлекает внимание и часто используется для нашивок и эмблем. Сравните два треугольника - острием вверх и вниз - и обратите внимание, как покоится квадрат в первом и как он неустойчив, как тяжело давит во втором случае (рис. 4). Для треугольника (как нормального, так и перевернутого) возможны следующие варианты композиции:

   1) Центровая трехлучевая. Идеальна для пиктограмм. Вспомните хотя бы знак "радиационная опасность".



   2) По вертикальной оси. Фигура в треугольнике имеет Т-образную форму. Используется так же, как и предыдущая.



   3) По замкнутому периметру. Как всегда, нижняя часть должна быть утяжелена, хотя в пиктограммах и логотипах соблюдение этого правила не столь важно. Наиболее известный пример - пиктограмма "Please Recycle".



   4) По разомкнутому периметру. Баланс по вертикальной оси.



   5) С замком и привязкой к основанию. Утяжеленная форма, оставляющая свободным пространство в центре композиции.



   6) Сплошная (декоративная). Единственный глоток свободы в треугольном мире: Заполняется вся картинная плоскость, но вылет за рамки неприемлем.



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

   1) По сплошному периметру с утяжеленным основанием.



   2) Разомкнутый периметр с центральным замком.



   3) С фигурным контуром верхней части основания.



   4) По вертикальной оси с акцентом на основание.



   5) Сплошная (декоративная).



   6) Смешанная, уравновешенная границами рамки.