Закладки

Композиция

Свойства формы и приемы для работы над композицией
Основная проблема композиции в том, что на самом деле знания по ней разрознены. Знаний очень мало, а то что преподают в художественной школе — не совсем подходит нам, так как мы занимаемся графическим дизайном. Это, пожалуй, одна из самых сложных в изучении дисциплин. Мы рассмотрим композицию с точки зрения графики и дизайна.
Четкое определение композиции дать сложно, это понятие из раздела эстетического восприятия гармонии, ее задача — сделать вашу работу графически выразительной. А ее создание связано с экспериментами.

Композиция — такое положение объектов и элементов, когда все они гармоничны друг с другом и своим окружением.
1

Как можно сделать крутую графику

Композиция нужна, чтобы сделать работу более выразительной. С помощью нее мы можем управлять вниманием и чувством зрителя. Но. Как мы можем ее оценивать? Нравится, не нравится? Существует два способа сделать классный дизайн:

Почувствовать. Например, вам необходимо сделать ключевую фотографию для архитектурного бюро. Идея – сфотографировать сверху стол архитектора. Для этого вам нужно расположить некие ключевые объекты, которые бы воссоздавали атмосферу: компьютер, молескин, мышка, чашка, скетчи, ручки-карандаши, тубус. Все эти объекты нужно как-то классно скомпоновать на листе, найти правильное положение их относительно друг друга. Вы делаете много-много итераций, двигаете и перекладываете, пока не почувствуете, что все встало на свои места.
constructive.su
Это самый интересный и плодотворный способ. За время долгой практики вы научитесь чувствовать композицию. Надо отметить, что поначалу — сложно. С практикой вы строите ее уже не думая. Композиция становится частью вас как навык.

Рассчитать математически. Для этого применяют разные системы расчетов типа Золотого сечения, схемы Виллара и рядов Фибоначчи, распределяя все по гайдам и сеткам. Для этого нужно знать теорию. Точные расчеты можно встретить в отрисовке логотипов, в верстке. Один дизайнер заверстает текст в листе, расставит все графические элементы и определит поля на глаз, а другой будет применять точные расчеты.
Гармонический делительный канон Виллара де Оннекура.
Система, которую Виллар разработал, известна как cхема деления прямой линии на логические и гармоничные части, состоящие из трети, четверти, пятых частей и так далее, до бесконечности. Схема была описана Яном Чихольдом как средство проектирования книги.
Схема пропорционирования по золотому сечению, ее еще называют «Божественной пропорцией». Это такие отношения размеров, когда большая часть относится к меньшей также, как их сумма к большей.
Ряд Фибоначчи — такая последовательность чисел, в которой каждое последующее число равно сумме двух предыдущих. Некоторые рассчитывают по нему сетки.
2

Основные составляющие объекта на плоскости

Предположим какой-то объект на плоскости. У него есть характерные составляющие, свойства, по которым мы его идентифицируем, и которые влияют на общую композицию. Рассмотрим для начала, какие есть свойства у объекта на плоскости:

Форма

Любой объект, будь это пятно или точка, имеет форму. Это может быть круг, треугольник, иконка, что угодно.

Композиция

Положение объекта на листе и диалог с соседями. Считается, что самое статичное и основательное положение в композиции — центр, зона комфорта. Поставив что-то в центр, мы делаем его главенствующим. Это можно сравнить с камнем, брошенным в воду. Точка падения — это центр, все остальное будет второстепенным дополнением, как разводы на воде.

Если немного отодвинуть предмет в сторону, в композиции появятся визуальное движение и динамика.

Цвет

Цвет может быть способом выделения. Если в черно-белом изображении появляется, например, красный, он сразу становится главным и выделяется.

Перспектива

Это такое положение объектов, когда они визуально находятся на разных плоскостях на листе. Один смотрится ближе, а другой дальше. Есть разные виды передачи перспективы (перекрытие объектов, разница размеров, светлое дальше, а темное — ближе). Они играют важную роль в изобразительном искусстве, но в дизайне им почти не придают значение.
3

Упругость линии

Возьмем линию как базовую единицу композиции (многие дизайнеры для себя пытаются найти аналогии в реальном мире чтобы легче объяснить некоторые понятия). Линия может быть упругой или вялой и ломкой. Упругую линию можно представить в виде металлического прута: она гнется, в ней чувствуется энергия и напряжение. Это — то, что нужно.

Ломкие и дряблые линии не выразительны и не вызывают никаких эмоций, как будто их неуверенно и слабо провели. Их движение задает некрасивую форму.
4

Вертикаль и горизонталь

Формат листа выбирайте исходя из поставленной задачи: подвижная живая картинка или спокойная графика. Считается, что вертикальный формат более динамичный, выражает состояние действия, движения, а горизонталь отвечает за статичность, покой, длительность.
5

Положение объекта на листе (верх / низ)

Считываемость и эмоциональное восприятие объекта зависит от его положения на листе. Объект, расположенный наверху композиции активный, а внизу листа — статичный, не активный.
Первый кружок выглядит активным и подвижным, он легкий, тогда как второй — статичный, он как будто уже упал и находится в покое
6

Устойчивость

Она зависит от формы объекта или группы. Самая устойчивая композиционная схема вписывается в квадрат или простой треугольник, она же и самая статичная. Перевернутый треугольник самый неустойчивый и динамичный. Связано это с нашим осознанием силы гравитации и существованием ограниченного пространства.
Устойчивая композиционная схема. Главные герои композиции (человек и клавиши) вписаны в треугольник и крепко «держатся» за край листа
Все содержание вписывается в форму перевернутого треугольника, композиция неустойчивая и намного более динамичная
7

Единство и контраст

Посмотрите, в природе все гармонично. И единство, и контраст можно встретить вокруг нас: тепло и холод, мужское и женское, белое и черное и так далее. Единство композиции дает отклик человеческому сознанию, в котором заложено чувство гармонии.

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

Контраст объема

Есть замкнутые и открытые формы. Чем меньше «воздуха» в композиции, тем тяжелее и нагруженнее она выглядит.
Две фигуры занимают одинаковое количество места по длине и ширине, но в целом они контрастны друг другу. Вторая фигура собрала вокруг себя много воздуха, свободного пространства «листа», она легкая. Квадрат — завершенная форма, пространство внутри него уже не воздух, а «плотная масса». Контраст!

Контраст по углам

Или контраст направлений. Например, в композиции, много прямых углов, вертикальных и горизонтальных линий. Они делают ее статичной и монотонной. Поставьте в композицию наклонный элемент, и он оживит всю картинку, будет контрастным по отношению к остальным.
«T» с диагональной направляющей имеет ту же толщину линий, примерно те же пропорции, что и остальные. Но именно диагональ явно контрастирует и забирает на себя внимание.

Контраст большого и малого

Контраст размеров — самое простое. Если у вас на рисунке или фотографии огромные секвойи, а внизу стоит человек, он будет контрастен по отношению к массиву высоких деревьев.

Свой / чужой

«Свой / чужой», также можно назвать принципом смыслового контраста. Это когда все объекты в группе ведут себя одинаково (например, все направлены в одну сторону), а какой-то из них выделяется тем, что повернут в другую. Отличия могут быть в цвете, в форме, в положении на плоскости и так далее.

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

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

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

Статичный объект, скорее всего, пропорциональный, простой по форме, направляющие его линии замкнуты, в основном вертикальные или горизонтальные.

Интроверт и экстраверт

Мы видим открытую и закрытую форму. Элементы отличаются не только степенью своей динамики, но и эмоциональным посылом. «Экстраверт» — это такой фрик в мире формы, она яркая и вызывает бурные эмоции, а форма «интроверт» — закрытая и строгая.
8

Акцент / фон / событие

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

Равновесие

Сложнее всего уравновесить в листе несимметричные объекты. Чем ближе к краю листа расположен объект, тем больше он нагружает его. Крупную несимметричную форму нужно уравновешивать другими объектами, находя гармоничное их положение на листе.
Два одинаквых объекта симметрично расположены в листе, композиция уравновешена
Как только один из кругов стал больше, композиция стала распадаться, левый край начал перевешивать
Чтобы добиться симметрии с такими объектами, нужно подвинуть крупный ближе к центру, по принципу весов.
Как пример — фотография на обложке сайта, занятая фигурой человека слева. Тексты и кнопка композиционно ставят все на свои места и осмысливают фото, дополняют его.
10

Основные законы композиции. Выразительные средства

Все, что мы до этого узнали — в целом не больше, чем погружение в предмет и почти не дает ни вдохновения, ни ответа на вопрос «Что делать?». Это важно запомнить и знать, но самое интересное впереди. Итак, приступим.

Ритм

Ритм, это самое крутое, излюбленное и часто встречающееся правило. Ритм — это неслучайное расположение объектов на одной траектории. У ритма есть направление движения, в него входит понятие цикличности, повторения какого-то набора элементов во времени. Ключевое свойство ритма — движение, он задает характер и направление. С помощью ритма можно привести внимание зрителя к смысловому центру.
Почему ритм работает? Глазу приятно перемещаться по линии ритма, цеплять вниманием меняющиеся размеры и направления формы, подъемы и спады линий. Ритм — один из самых важных и ключевых приемов в композиции.
Вся композиция фотографии строится на ритмах: по-разному поворачиваясь, уводя за собой внимание зрителя, ритмы лодок и белых лавочек задают движение.
Классный пример проявления ритма в композиции. Одна и та же фигура повторяется в новом ракурсе, задает движение и направляет зрителя. Микроистория, рассказанная на одном листе, которую интересно «считывать».
Еще один способ выделить главное – если стройный ритм перебивает встречное движение, оно и начинает привлекать внимание, становится главным в композиции.

Никита Обухов
Основатель Tilda Publishing, креативный директор студии FunkyPunky
На протяжении многих лет я коллекционирую картинки для того, чтобы объяснить моим студентам, что такое ритм. Сейчас уже трудно восстановить авторство изображений, поэтому прошу прощения, если разместил без спроса вашу работу. Итак, расслабьтесь и просто листайте слайдер. Смотрите на картинки, старайтесь уловить всю красоту графики и идею, насколько этот прием может быть вариативен.
По сути веб — весь построен на ритме простых фигур. Не пытайтесь понять для себя ритм, проводя ассоциации с музыкальным ритмом. Это разные понятия, просто слово употребляется одно. Весь недостаток языка в том, что не все можно выразить четко словами.

Большое и малое

Это тоже один из распространенных приемов построения композиции. На разнице размеров. Его часто можно заметить на билбордах. Когда есть большой объект, а где-то в стороне маленький логотип.
Основное правило: Большой объект должен быть низко детализированный, а меньший, наоборот, быть более проработанным в графике и подробным. Большая форма и так привлекает внимание своим размером, ее сложно не заметить. А маленький на контрасте должен привлекать внимание за счет того, что его хочется подробнее рассматривать.

Самая частая ошибка, которая встречается в графическом дизайне — желание сделать наоборот, или сделать предметы одинаковыми по детализации и насыщенности.

Форма и контрформа

Дизайнер всегда должен учитывать, что негативное, то есть пустое пространство, которое не заполнено изображением в композиции, на самом деле так же важно, как и само изображение.

Контрформа — та форма, которую образует пустое пространство относительно занятого. Очень часто композиция складывается из-за того, что контрформа работает активно. Это очень классно делают в плакатах, на обложках.
В иллюстрации собрано несколько композиционных приемов. Большая синяя контрформа здесь образована активным ритмом движениями рук и фигур. Вертикальный формат подачи и расположение героев наверху усиливает динамичность картинки.
Автор: iv orlov
Контрформа может быть построена за счет ритмов. Две композиции в одной иллюстрации с разными типами ритмов и контрформ. Правая часть картинки намного более живая и подвижная.
В постере используется несколько графических приемов. Активная контрформа, где линия ног практически соприкасается с краем листа и создает визуальное напряжение, контраст большого и малого (все тело — крупный черный силуэт, который считывается сразу, а небольшие элементы вроде маски и ботинок детально проработаны, и на них падает основное внимание зрителя). Подпись сверху уравновешивает композицию. Если бы ее не было, весь лист нагружался бы в левом нижнем углу и композиция осталась незавершенной. Ни убавить, ни прибавить!

Табличность

Глазу приятно считывать таблицу, то есть структуру. Даже если разметки как таковой нет, упорядоченная систематизированная компоновка нам близка, потому, что понятна. Конструктивистские обложки — отличный пример четкой и структурированной верстки.

Наложение двух структур

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

Рамочность

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

Два события на одном листе

Также одна из основных ошибок, это когда на листе получается два события. Идей так много, что хочется и то, и другое. Или же дизайнер просто не чувствует перебора. Из-за этого графика теряет выразительность. Что делать? Просто смело отрезать лишнее. Упрощать, оставляя четкий и ясный акцент. Событие на листе должно быть одно. Старайтесь следовать этому правилу.

Случайность в композиции, или Бог — лучший дизайнер

Композиция может быть простроенной и случайной. Это не значит, что одна хуже другой, просто у них разное назначение и эмоциональная отдача. Если дизайнеру в композиции нужно изобразить случайность, задача в разы усложняется. Наш глаз и чувства устроены так, что мы всегда стремимся все упорядочить, но в природе не так. Наш мозг пытается все «загнать в клетку».

Попробуйте скомпоновать фотографию «Рабочее место дизайнера» и поймете, что это на самом деле непросто. Фото должно быть живое, как случайно выхваченный кадр. Первое, с чем сталкиваешься — постоянное стремление все уложить ровно друг рядом с другом, даже расстояния между предметами окажутся одинаковыми.
Мы все устроены так, что наше сознание со временем начинает жить как будто в «замкнутом» пространстве и становится «клетчатым». Мы вечно стремимся навести порядок и стерильность во всем.

Задача изобразить случайность — одна из самых сложных задач дизайнера. Возьмите набор из шариков: 15 красных, 10 синих, 5 желтых. Попробуйте сложить из них случайную, живую композицию просто, расположив их на листе. Уйдет куча времени, чтобы выйти за рамки «запертого» мышления и перестать делать безжизненные композиции.

Попытка сложить как бы случайную композицию чаще всего выглядит зажатой и не особо естественной. Чтобы решить такую задачу, подойдет имитация случайности — рассыпать их.
Дизайн обложки журнала Channel 4 , на которой изображены упавшие сосновые иглы.
Лучше всего с задачами композиции, конечно, справляется сама природа. Так что Бог — лучший дизайнер.

Также в этом курсе

9
Флэт-иллюстрация
Основные принципы. Иллюстрация как важный компонент Flat Design. Примеры и полезные советы.
Предыдущая
11
Цвет
Новый подход к применению теории цвета на практике.
Следующая
Оглавление

© Обухов Н.В., 2015 Все права защищены. Перепечатка и цитирование материалов — только с разрешения автора.

По всем вопросам пишите на hello@tilda.cc