1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 | 2003 | 2004 | Оглавление текущего номера /286, 1999 г./ | Бонус | Поиск  

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

Сергей Чебатков,
Опубликовано: 23.2.1999


© 2003, Журнал «Компьютерра» | http://www.computerra.ru/offline
Этот материал вы сможете найти в Интернете по адресу: http://www.computerra.ru/offline/1999/286/2409/


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

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


Сергей Чебатков - преподаватель Московского института дизайна и графики, главный художник "Золотых страниц".


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

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

src=../../../../printimages/286/24-1.gif

Рис. 1.

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

src=../../../../printimages/286/24-2.gif

Рис. 2.

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

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

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

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

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

src=../../../../printimages/286/24-c-1.gif


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

src=../../../../printimages/286/24-c-2.gif


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

src=../../../../printimages/286/24-c-3.gif


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

src=../../../../printimages/286/24-c-4.gif


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

src=../../../../printimages/286/24-c-5.gif


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

src=../../../../printimages/286/24-c-6.gif


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

src=../../../../printimages/286/24-c-7.gif


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

src=../../../../printimages/286/24-c-8.gif


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

src=../../../../printimages/286/24-c-9.gif


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

src=../../../../printimages/286/24-c-10.gif


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

src=../../../../printimages/286/24-c-11.gif


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

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

src=../../../../printimages/286/24-cr-1.gif


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

src=../../../../printimages/286/24-cr-2.gif


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

src=../../../../printimages/286/24-cr-3.gif


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

src=../../../../printimages/286/24-cr-4.gif


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

src=../../../../printimages/286/24-cr-5.gif


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

src=../../../../printimages/286/24-cr-6.gif


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

src=../../../../printimages/286/24-cr-7.gif


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

src=../../../../printimages/286/24-cr-8.gif


src=../../../../printimages/286/24-3.jpg

Рис. 3.

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

   Композиция в треугольнике
src=../../../../printimages/286/24-4.gif

Рис. 4.

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

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

src=../../../../printimages/286/24-t-1.gif


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

src=../../../../printimages/286/24-t-2.gif


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

src=../../../../printimages/286/24-t-3.gif


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

src=../../../../printimages/286/24-t-4.gif


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

src=../../../../printimages/286/24-t-5.gif


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

src=../../../../printimages/286/24-t-6.gif


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

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

src=../../../../printimages/286/24-p-1.gif


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

src=../../../../printimages/286/24-p-2.gif


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

src=../../../../printimages/286/24-p-3.gif


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

src=../../../../printimages/286/24-p-4.gif


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

src=../../../../printimages/286/24-p-5.gif


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

src=../../../../printimages/286/24-p-6.gif





1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 | 2003 | 2004 | Оглавление текущего номера /286, 1999 г./ | Бонус | Поиск  

© 2004, Издательский дом «Компьютерра» | http://www.computerra.ru
Телефон редакции: (095) 232-22-61
E-mail редакции: inform@computerra.ru