Композицією називається співвідношення різних елементів зображення, що створює відчуття цілісності і врівноваженості. Основними фігурами, які задають рамки композиції, є прямокутник, еліпс (коло), трикутник і півколо. Складність побудови композиції зростає саме в такому порядку.
Малюнки С. Чебаткова
Композицією називається співвідношення різних елементів зображення, що створює відчуття цілісності і врівноваженості. Основними фігурами, які задають рамки композиції, є прямокутник, еліпс (коло), трикутник і півколо. Складність побудови композиції зростає саме в такому порядку.
Сергій Чебатков - викладач Московського інституту дизайну і графіки, головний художник "Золотих сторінок".
Отже, композиція. Навіщо потрібно знання композиції? Може здатися, що до комп'ютерів це не має відношення: Ні в якому разі. Хоча композиційні закони століттями розроблялися художниками стосовно живопису, графіці, малюнку, вони точно так само відносяться до дизайну інтерфейсу, сайту, візитки або журналу. Ми розуміємо, на який ризик йдемо, намагаючись втиснути у вузькі рамки статті принципи і методи композиційної побудови, і заздалегідь просимо вибачення у побратимів-дизайнерів за трохи перебільшено, прикладну і дуже стислу форму подачі матеріалу.
Найчастіше при довгій роботі над будь-яким шедевром око замилюється, і тоді визначити, наскільки хороша і правильна ваша композиція стає майже неможливо. Або, наприклад, ви відчуваєте, що щось не так, а що - неясно. У подібних випадках варто використовувати одну хитрість: перевернути роботу "догори ногами" або подивитися на її дзеркальне відображення. Все, що не на своєму місці, відразу починає просто вистрибувати з листа! На рис. 2 наведено приклади врівноваженою і неврівноваженою композиції, і якщо ви переверне журнал, то незбалансовані ділянки заявлять про себе в повний голос. Це пов'язано з психологією сприйняття ілюстрації: картинка "догори ногами" вже не несе смислового навантаження, тому визначити її недоліки набагато простіше. Якщо журнал вертіти лінь або важко, можна в крайньому випадку примружити очі.
Підемо далі. Для того щоб композиція була стійкою, нижня частина її повинна бути візуально масивніше, а центральний об'єкт, якщо він є, ні в якому разі не повинен перебувати в геометричному центрі! Навіть композицію в перевернутому трикутнику за рахунок дотримання цих правил можна зробити значно стійкіше. При цьому абсолютно неважливо, "важкої" або "легкої" по візуальному відчуття є ваша робота: щоб вона не викликала відчуття приплюснутості або, навпаки, відірваності, балансуйте її по оптичному центру.
Права і ліва сторона врівноважуються щодо центральної вертикалі таким чином, щоб співвідношення заповненого / порожнього простору праворуч і ліворуч було приблизно однаковим.
Розглянемо тепер основні види композиційних рішень.
Композиція в прямокутнику
Найпоширеніший вид. В принципі, її можна назвати "композицією вищого рівня". Решта три види композиції зазвичай стають елементами першої, оскільки прямокутниками є і паперовий лист, і екран монітора, і візитна картка, і етикетка, і багато, багато іншого. Правда, не варто плутати кордон листа (або екрана) і кордон композиції: не забувайте про полях. Звичайно, композиція може бути "навиліт", наскрізний, а й в цьому випадку окремі її елементи (наприклад, текст на журнальної смузі) не повинні прилипати до крайки відведеного простору - це буде вже не "тонкий хід дизайнера", а елементарна неграмотність або неповагу до глядача. Розглянемо різновиди прямокутної композиції.
1) З автономними замками по всіх кутках. Замком називається елемент, "закриває" певну частину простору, обмежуючи рух погляду. Подібна композиція часто використовується для візиток, коли декоративні та текстові елементи розташовуються по кутах, залишаючи вільним центральне текстове поле. Зверніть увагу, що нижні замки важче верхніх.
2) Центрова з замками по кутах. Центральний елемент композиції розташований в оптичному центрі. Решта - як у попередньому варіанті.
3) По периметру з акцентом на кути. Низ і кутові елементи периметра погіршити. Таку композицію дуже люблять використовувати розробники ігор "від першої особи" при створенні інтерфейсу гри. У минулому столітті - улюблена композиція для створення меню, запрошень і подібної акціденціі.
4) По периметру центрова. Ну, це взагалі в чистому вигляді етикетка. Зверніть увагу, що низ знову обтяжать, однак знизу по вертикальній осі периметр може бути розімкнути.
5) Центрова з виділеним фоном. Центральна фігура розташована нижче оптичного центру, а нижня частина фону відступає від нижнього краю композиції приблизно на одну третину висоти.
8) Пейзажна. Назва говорить сама за себе. Лінія горизонту розташована на відстані однієї третини від нижнього краю композиції.
9) Натюрморт. Теж все зрозуміло. Однак тут є один нюанс: лінія горизонту практично збігається з верхнім краєм композиції.
10) Портретна врівноважена. Герой портрета трохи зміщений вправо, в напрямку входу погляду, і урівноважений який-небудь дрібницею в лівій частині. Лінія горизонту максимально наближена до нижнього краю композиції.
11) Змішана (довільна). Все що завгодно. Абстрактні композиції. Зберігається правило оптичного центру і утяжеленного низу.
Композиція в колі
Завдяки відсутності кутів композиція в колі виглядає м'якше і спокійніше (до речі, овал - теж різновид кола). Її дуже добре використовувати для створення фірмових знаків, логотипів, піктограм, оформлення фронтисписі (сторінка з ілюстрацією, що поміщається в розворот в титульному листі) і титульних аркушів книг, поміщаючи малюнок в колі в оптичний центр порожній смуги. Композицію в колі також дуже люблять Web-дизайнери, мабуть, від того, що вона дозволяє пограти на контрасті з квадратно-гніздовим інтерфейсом операційних систем, а значить - сайт запам'ятається і принесе його розробнику багато інших, усіма улюблених композицій в колі, тих, що карбує Монетний двір.
1) Центрова. Об'єкт, розташований в центрі композиції, не стосується круглої рамки. Використовується для медалей, товарних знаків.
2) Центрова з виділеним периметром. "Круглость" композиції додатково підкреслена рівномірним периметром. Ця композиція практично завжди застосовується при розробці печаток.
3) З акцентом на периметр. Основні елементи розташовані по периметру, підкреслюючи круглу форму. Низ обтяжать, елементи розімкнуті. Використана при розробці Аверс сучасних російських монет.
4) За вертикальної осі. Дуже елегантна композиція. За рахунок великої кількості порожнього простору дозволяє створювати запам'ятовуються емблеми та знаки. Низ обов'язково повинен бути обтяжать, композиція вимагає рамки. До речі, запам'ятайте, що по горизонтальній осі композиція в колі ніколи не будується! Велика кількість порожнього простору, що підкреслює елегантність вертикальної композиції, в горизонтальній "підвішує" об'єкт, позбавляючи його стійкості і опори.
5) За вертикальної осі з акцентом на периметр і замком. Важкий низ вимагає противаги, роль якого грає замок. Цю композицію дуже любив Монетний двір колишнього СРСР, і не дарма: для гербів, монет і медалей підходить якнайкраще.
6) За вертикальної осі з акцентом на периметр, без замка. Ця композиція поширена ну дуже широко. У книжковому дизайні, при оформленні обкладинок улюбленим прийомом художників книги було впихнути Персонажа в вінок з лаврового листя, і все це - тиснене золотом по темній обкладинці: Як і попередня, широко використовується в монетах, гербах і медалях.
7) Асиметрична з вільним центром. Балансування зображення йде по вертикальній осі. Композиція дуже ілюстративна - такий собі "дверне вічко".
8) "Навиліт". Також ілюстративна. Зверніть увагу, що вертикальні і горизонтальні лінії не спотворюються, кругла рамка як би "вихоплює" частина пейзажу. Як і для пейзажної композиції в квадраті, лінія горизонту відстоїть на третину висоти від нижньої рамки. Постійно використовується в оформленні книг і упаковки, переважно для харчових продуктів.
Врахуйте, що низ композиції в колі завжди повинен бути важче, інакше вона почне завалюватися (згадайте Ванька-встаньку). До речі, прикладом незбалансованої композиції є герб колишнього СРСР (рис. 3). За задумом, Сонце мало погіршити нижню частину герба, і це дійсно відбувається на барельєфі. Однак в графічній і повноколірного версіях герба темніший верх переважує, і земну кулю замість того, щоб парити, виявляється затиснутим між двома снопами класів, надаючи композиції нестійкість.
Композиція в трикутнику
Мал. 4.
На противагу колі трикутник агресивний, привертає увагу, мобілізує. Саме тому попереджають дорожні знаки мають трикутну форму. Виразна і лаконічна, ця форма чудово підходить для піктограм, однак, на відміну від квадрата і кола, практично не годиться для живопису. Її стихія - графіка. Трикутник не допускає композиції "навиліт". Композиція в трикутнику вістрям вниз нестійка, привертає увагу і часто використовується для нашивок та емблем. Порівняйте два трикутника - вістрям вгору і вниз - і зверніть увагу, як спочиває квадрат в першому і як він нестійкий, як важко тисне в другому випадку (рис. 4). Для трикутника (як нормального, так і перевернутого) можливі наступні варіанти композиції:
1) Центрова трипроменева. Ідеальна для піктограм. Згадайте хоча б знак "радіаційна небезпека".
2) За вертикальної осі. Фігура в трикутнику має Т-подібну форму. Використовується так само, як і попередня.
3) По замкнутому периметру. Як завжди, нижня частина повинна бути обтяжена, хоча в піктограмах і логотипах дотримання цього правила не настільки важливо. Найбільш відомий приклад - піктограма "Please Recycle".
4) За розімкненим периметру. Баланс по вертикальній осі.
5) З замком і прив'язкою до основи. Обтяжені форма, залишає вільним простір в центрі композиції.
6) Суцільна (декоративна). Єдиний ковток свободи в трикутному світі: Заповнюється вся картинна площина, але виліт за рамки неприйнятний.
Композиція в півколі
Це найбільш складний з усіх видів композиції. Напівкругла форма поєднує в собі недоліки трикутника і кола, але, на жаль, її часто доводиться застосовувати в дизайні інтерфейсів, хоча основне її призначення, безсумнівно, архітектура. Як і для трикутника, для півкола неприйнятна композиція навиліт, все елементи повинні бути обов'язково вписані в рамку. Наведемо лише основні види композицій в півколі.
1) За суцільному периметру з утяжеленним підставою.
2) Розімкнутий периметр з центральним замком.
3) З фігурним контуром верхньої частини підстави.
4) За вертикальної осі з акцентом на підставу.
5) Суцільна (декоративна).
6) Змішана, врівноважена межами рамки.