Основи композиції. Основні поняття, базові елементи у композиції, види композиції

Композиція є невід'ємною частиною всього, що створює людина: музичних творів, букетів квітів, будівель, інтер'єрів, газет та журналів, літературних творів та навіть гардеробу.

Слово "композиція" походить від латинського "Compositio" - складання, з'єднання, об'єднання. Тобто це складання цілого з окремих частин. Але насправді композиція – явище трохи складніше, ніж просто поєднання об'єктів. Ключове завдання у тому, щоб реалізувати авторську думку, об'єднавши компоненти гармонійно.

Що означає "гармонійно"?

Слово " гармонія " походить від давньогрецької, що означає " зв'язок " чи " відповідність " . За своєю природою, гармонія це впорядкованість, протилежність хаосу.

У дизайні найчастіше шукаємо гармонію. Це прагнення до впорядкованості, природності та ідеальності. Один із ключових елементів, який допомагає у пошуку гармонії, — це форма, в рамках якої створюється композиція.

Види композиції

Залежно від того, в якій формі створюється продукт дизайну, композицію поділяють на:

• фронтальна або площинна композиція,
• об'ємна композиція,
• глибинно-просторова композиція.

Кожен тип композиції використовується для досягнення певних візуальних та емоційних ефектів у дизайні, враховуючи як просторові, так і візуальні аспекти об'єкта, що створюється.

Фронтальна композиція

Фронтальна композиція характеризується розподілом елементів на площині, простір якої обмежений висотою та шириною. Це може бути будь-яка поверхня, наприклад, аркуш паперу, екран монітора або стіна.У цьому типі композиції важливо вміло використовувати межі площини, щоб створити врівноважене та привабливе візуальне сприйняття. Елементи можуть бути розподілені симетрично або асиметрично, залежно від завдання та стилю дизайну.

Об'ємна композиція

В об'ємній композиції об'єкти створюються у тривимірному просторі. Це може включати скульптури, меблі, архітектурні елементи або тривимірні моделі в комп'ютерній графіці. Розробка такої композиції вимагає врахування всіх трьох вимірів: висоти, ширини та глибини. Це дозволяє створювати динамічні та складні структури, які можна сприймати з різних точок зору, забезпечуючи багатогранність сприйняття та інтерактивність. Важливо враховувати, як елементи взаємодіятимуть з навколишнім простором та один з одним, щоб досягти бажаного візуального та функціонального ефекту.

Глибинно-просторова композиція

Глибинно-просторова композиція включає поєднання окремих тривимірних об'єктів в одному просторі таким чином, щоб створити враження глибини та просторової повноти. Цей тип композиції часто використовується у кінематографі, театральній постановці, архітектурі, а також у віртуальній та доповненій реальності, де важливо створити відчуття обсягу та просторового контексту для глядача чи користувача.

У такій композиції ключовим елементом є правильне розташування об'єктів, які повинні взаємодіяти не тільки між собою, але і з навколишнім середовищем, щоб створити єдину сценографічну картину. Використання перспективи, світлотіні, контрасту та пропорцій дозволяє досягти гармонії та переконливості сприйняття простору.

Зупинимо увагу на фронтальній чи площинній композиції.Цей тип композиції так називається, тому що незважаючи на можливість зображення об'єктів з ілюзією об'єму, насправді всі елементи розташовані на одній площині. Особливості людського сприйняття дозволяють сприймати ці зображення як об'ємні, хоча обсяг тут — це лише оптична ілюзія. Ефект простору або об'єму створюється за допомогою різних прийомів та елементів композиції.

Незважаючи на те, що часто здається, що такі ілюзії складаються з безлічі деталей, в основі площинної композиції лежать чотири ключові елементи:

Ці елементи формують структуру будь-якої площинної композиції, забезпечуючи її візуальне сприйняття та естетичну дію.

Використовуючи ці елементи та комбінуючи їх, ми можемо створювати продукти дизайну.

Крапка

Крапка - це певний акцент у композиції, елемент, який привертає до себе увагу. Незважаючи на свою простоту форми, точка має унікальну здатність створювати повноцінні сюжети. З її допомогою можна зобразити зірки, передати ідею недомовленості чи створити складні візуальні твори. Ця здатність робить точку потужним інструментом у руках художника чи дизайнера.

Свого часу у Франції існувало напрям у мистецтві, яке отримало назву пуантилізм. У цьому стилі картини створювалися виключно із точкових мазків. Цей метод дозволяв художникам досягати особливої ​​глибини та насиченості кольору, створюючи унікальні візуальні ефекти та враження.

Відомі художники: Жорж Сірка, Поль Сіньяк, Люсьєн Пісарро

Деякі з робіт Вінсента Ван Гога можуть нагадувати пуантилізм завдяки техніці, яку він використовував для створення окремих точок та вкраплень, особливо в таких картинах, як "Зоряна ніч над Роною".

Лінія

Лінія в мистецтві та дизайні є одним з основних елементів, і її використання може сильно змінюватись в залежності від стилю та мети твору. Лінії можуть бути:

• Прямими - чіткі та суворі лінії, які створюють структуру та порядок.
• Кривими — м'які та плавні лінії, що надають динамічності та природності.
• Товстими – сильні та виразні лінії, які можуть домінувати у композиції.
• Тонкими — тонкі та тонкі лінії, ідеально підходять для деталізації та додавання тонкощі.

За допомогою різних типів ліній можна створювати складні образи, такі як портрети, пейзажі та сюжетні композиції. Лінії можуть допомогти створити відчуття обсягу та простору, спрямовуючи погляд глядача та моделюючи форми. Використання ліній дозволяє художникам та дизайнерам передавати різноманітні емоції та настрої через свої роботи.

Пляма

Коли ми говоримо слово "пляма", у свідомості часто виникає образ чогось безформного. Однак насправді пляма — це заповнена область, яка може мати різні форми. Це може бути просто випадкова пляма, але також і важливий елемент композиції, який надає зображенню додаткових кольорів або акцентів, формуючи візуальне сприйняття твору. Пляма використається в мистецтві для створення фону, виділення елементів або навіть як самостійний об'єкт в абстрактних роботах.

Пляма може приймати різні форми, включаючи трикутник, квадрат або абстрактні образи. Використання плями в мистецтві та дизайні дозволяє ще ефективніше створювати відчуття об'єму та простору в композиції. Ці елементи можуть служити для посилення глибини та додавання динамічності зображення, а також допомагають у створенні фокусних точок та напрямку погляду глядача.

Відчуття об'єму та простору може створити четвертий елемент композиції – колір. З його допомогою можна передавати настрій, посилювати сприйняття обсягу та глибини простору.

Всі твори мистецтва створюються завдяки поєднанню цих чотирьох елементів: крапки, лінії, плями та кольори.

Розбираємось у законах композиції за 10 хвилин

Композиція в мистецтві та дизайні – цілий розділ науки. Зібрали у статті найважливіші принципи.

Ілюстрація: Polina Vari для Skillbox Media

Пише про дизайн у Skillbox. Працює директором з маркетингових комунікацій, вивчає рекламну графіку та 3D.

Будь-яка дизайнерська робота, чи то ілюстрація, візуалізація чи 3D-сцена, починається з побудови композиції. Ще до початку роботи ви повинні чітко уявляти, як виглядатиме картинка загалом і що в ній буде головним елементом, до чого ви хочете привернути увагу та яку ідею донести. Важливо розуміти, що композиція — це не тільки малюнки, її знання необхідне і дизайнерам UX/UI, і продуктовим дизайнерам в діджиталі.

Часто новачки покладаються на власний смак. Але є низка правил і законів, які дозволяють зробити роботу гармонійнішою, збалансованішою, посилювати бажане враження або задавати настрій. Законам композиції присвячені цілі підручники: ми вибрали їх найважливіше і розповімо основні правила простими словами.

Розбираємо, як працюють:

• композиційний центр;
• зв'язок між об'єктами;
• золотий переріз;
• правило третьої;
• рамка;
• керування поглядом;
• ракурс;
• атмосфера та емоції;
• світло та колір;
• динаміка та статика;
• ритм;
• порушення правил.

Композиційний центр

Незважаючи на слово «центр» у назві, композиційний центр далеко не завжди знаходиться у геометричному центрі площини.Така композиція буде виглядати нудно. Композиційний центр зазвичай містить головне послання, і його виділяють кольором, світлотою, іноді він може знаходитися взагалі в кутку. а й графічно.

При погляді на цю рекламу очок не виникає жодних сумнівів, що на постері дизайнер зробив головним.
Зображення: KELOPTIC / Éric Esculier / Behance

Зв'язок між об'єктами

Побудова композиції варто починати з розподілу ролей між зображеними об'єктами. , вже відштовхуючись від нього, мати інші елементи, користуючись прийомами привернення уваги, про які ми поговоримо нижче.

Головний об'єкт на цій рекламі – книга в руках фотографа, наступний за значимістю – жовтий ліфлет унизу
Зображення: Público / дизайн агентства Nossa

Золотий перетин

Про золотий переріз писав ще Евклід у III столітті до нашої ери. Він застосовував цей принцип для побудови правильного «золотого» прямокутника.

За підсумками цієї пропорції будується золота спіраль.Якщо розташувати головні елементи композиції на її лінії або в ключових точках, зображення буде виглядати гармонійніше - тобто приємно для ока.

Розповідаємо в цьому матеріалі про золотий переріз докладно історію, принцип, показуємо приклади.

Правило третьої

Це правило можна назвати простішою альтернативою золотому перерізу. Оскільки тут не потрібно обчислювати жодних співвідношень, а принцип працює безвідмовно, його використовують у багатьох сферах: у кіно, на знімках рекламних кампаній, листівках, фотографіях чи роботах художників.

Працює це правило дуже просто. Зображення ділиться лініями на третині по вертикалі та горизонталі. На перетині цих ліній чи самих лініях знаходяться ключові об'єкти. Композиція в цьому випадку виходить динамічною, але при цьому збалансованою.

Створюючи складні композиції, дуже важливо стежити, як поєднуються елементи за кольором. Показуємо, з чим добре поєднуються синій, зелений, помаранчевий та червоний кольори.

Рамка

Художники і дизайнери часто вдаються до цього прийому, розташовуючи на краях зображення елементи, що обрамляють ключовий об'єкт. Наприклад, розмиті гілки дерев у разі фотографії, або показують об'єкт через раму вікна, двері, ворота. Такий прийом дозволяє зробити візуалізацію більш закінченою та підкреслити її елементи.

Робота хедлайнера курсу «Рекламна графіка» Дмитра Глазиріна: використано ефект рамки з листя
Зображення: Dmitriy Glazyrin / Mondlicht Studios / Behance

Як працюють закони композиції практично? Показуємо на прикладах семи робіт американського дизайнера Мілтона Глейзера.

Управління поглядом

Правильно вибудовуючи композицію, можна змусити глядача звернути увагу до потрібний об'єкт. Щоб це зробити, продумайте вигляд та конструкцію додаткових об'єктів на картинці, щоб вони відводили погляд глядача до об'єкта. Наприклад, дорога, що веде до хати, що звисає над подорожнім гілка дерева або вказує на об'єкт рука допоможуть зосередити увагу на головному.

У рекламі кетчупу Heinz шматочки картоплі фрі підводять погляд глядача до пляшки із соусом
Зображення: Mahmoud Alkhawaja / Behance

Ракурс

Сміливі та незвичайні ракурси завжди привертають увагу. Але до того, щоб створити сцену з незвичайним ракурсом, потрібно підготуватися та переглянути безліч зображень. Інакше результат може виглядати неприродно чи навіть потворно. Але якщо все зроблено грамотно – зображення справить ефект.

Показуємо 11 ракурсів, які можна використовувати як для фотографії, так і для ілюстрації.

Атмосфера та емоції

Композиція, ландшафт, кольори можуть добре наголосити на головній емоції, закладеній у сюжеті. Не просто так щось позитивне асоціюється у людей з чистими та яскравими відтінками, а фільми жахів — із похмурою атмосферою занедбаних будинків та пустельних вулиць.

Робота хедлайнера курсу «Рекламна графіка» Дмитра Глазиріна, в якій обігрується назва моделі Rolls-Royce Phantom — машина виглядає загадково та фантомно.
Зображення: Western Jack / Dmitriy Glazyrin / Behance

Читайте, як працюють різні кольори:

• Жовтий: щастя, оптимізм та інтернаціональність
• Рожевий: солодощі, ніжність та дитинство
• Коричневий: розкіш, стабільність та простодушність
• Зелений: екологія, свіжість та безпека
• Білий: елегантність, лаконічність та доброта
• Синій: довіра, умиротворення та мужність
• Червоний: виклик, перемога та пристрасть

Світло та колір

Ви ніколи не звертали увагу на те, що фотографії з гарним заходом подобаються людям набагато більше за інших? Вся справа в насиченості кольорів та гарному переході відтінків. Яскраві зображення та збалансовані переходи найчастіше викликають позитивні емоції.

Велика кількість світла та яскраві градієнти наповнюють заставку презентації Apple радістю

Йоханнес Іттен - швейцарський художник і викладач школи Баухаус, який розробив одну з ключових теорій про колір. Розповідаємо, як вона працює і що таке колірне коло Іттена. Інший наш огляд присвячений книзі Іттена «Мистецтво кольору», де розбирає оптичні ефекти, побудовані на кольорі.

Динаміка та статика

У композиції є два поняття — динамічна та статична діагоналі. Динамічна йде від лівого кута до правого нижнього. Її зміст зрозумілий з її назви - зображення наповнюється рухом. Статична діагональ уповільнює сприйняття, і зображення здається застиглим.

Після ребрендингу 1991 року логотип adidas отримав великий заряд динаміки за рахунок діагоналей та ритму
Зображення: Adidas

За повну статику відповідає симетрія, оскільки вона найчастіше побудована щодо вертикальної або горизонтальної осі. Частини по обидві сторони схожі, зображення стає передбачуваним.

Логотип adidas 1972 року здається зрозумілим і виглядає статичним за рахунок повної симетрії — динаміку створюють лише лінії, що його розтинають.
Зображення: Adidas

Ритм

Ритм - яскравий прийом, що задає тон всієї композиції. Регулярний — ритм, що механічно повторюється, — передбачуваний, у ньому немає вишукування. Набагато цікавіше, якщо він порушується.Це привносить елемент несподіванки та робить зображення живим.

У логотипі видавництва MIT Press регулярний ритм порушується двома лініями, що виступають, що відразу робить логотип цікавим
Зображення: MIT Press

Зображення, яке задіює ритм, побудоване не тільки на темних областях малюнку, але також активно використовує вільні області. Розповідаємо у нашій статті, що таке негативний простір.

Порушення правил

Ми розповіли про одинадцять ключових прийомів у композиції. Але, як відомо, правила потрібні для того, щоб їх порушувати. Тому, перш ніж переходити до нестандартних рішень, потрібно добре розуміти, що буде порушено і якого ефекту ви таким чином досягнете.

Якщо ви хочете розібратися в законах композиції краще, ми підготували ще один докладний матеріал. У ньому досконало розбираємо динаміку, ритм, баланс і розповідаємо, які дослідження сприйняття проводили вчені.

Більше цікавого про дизайн у нашому телеграм-каналі. Підписуйтесь!

Читайте також:

• 5 базових правил гарного дизайну: закон Фіттса, теорія близькості, відступи, якорі та герби
• Прийоми з фільмів, які стануть у нагоді в роботі дизайнера
• Мінімалістичний дизайн: як він з'явився і що в ньому найголовніше
• «Подання інформації»: базові правила візуалізації даних
• Модульні сітки у графічному дизайні: основи швейцарської верстки