{"id":3882,"url":"\/distributions\/3882\/click?bit=1&hash=7c8157436f39ac9930a6c5087f1d437feef1115a4e25ef1e95d1c67dc223957e","title":"\u041d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0432\u0438\u0434\u0435\u043e \u0432 \u043f\u0440\u044f\u043c\u043e\u043c \u044d\u0444\u0438\u0440\u0435","buttonText":"\u041a\u0430\u043a?","imageUuid":"135b72ce-4b43-5240-a9ca-242ab0616d40","isPaidAndBannersEnabled":false}
Gamedev
Smirnov School

Понимание композиции: основы

Как расположить объекты на рисунке? Как сделать сцену визуально приятной и понятной для зрителя?

Художник Эндрю Прайс, также известный как Blender Guru рассказал, как можно сбалансировать свои работы и выделить главные элементы сюжета.

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

Статья — пересказ этого видео.

Разбираемся в композиции

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

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

Работу над композицией можно разбить на три стадии: центральный элемент, структура и баланс.

Центральный элемент — одна очевидная деталь, привлекающая внимание                    Структура — организация сцены по определенному правилу                                                        Баланс — сбалансированная нагрузка сцены

Центральный элемент

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

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

Если центральных элементов слишком много и они привлекают внимание с одинаковой силой, то зритель просто не поймет, куда смотреть:

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

А вот простой пример изображения, не имеющего центрального элемента:

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

Но если выделить один из стульев, сцена будет выглядеть совершенно иначе.

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

Также можно привлечь внимание к определенной части изображения с помощью контраста.

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

Есть множество способов выделить центральный элемент.

  1. Резкий контраст
  2. Насыщенность
  3. Фокус камеры
  4. Действие или движение
  5. Лица или фигуры

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

Приведем несколько примеров удачного использования центрального элемента.

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

Вот еще один пример:

Здесь наше внимание направлено на движущегося человека на фоне относительно статичной сцены. Человеческий силуэт притягивает взгляд сам по себе, к тому же, темная фигура обрамлена ярким светом, что создает сильный контраст. И те же лучи света создают направляющие линии, ведущие взгляд к фигуре. Усиливается этот эффект наличием затемнения по краям изображения — виньетки.

Следующее изображение использует фокус камеры для направления внимания к центральному элементу.

У нас есть хамелеон, морда которого контрастирует с фоном и находится в фокусе, в то время как его тело несколько менее четкое, а фон и вовсе размыт. Помимо этого, его тело создает направляющие внимания — дуга его спины и хвост ведут взгляд к морде.

Чтобы выделить центр композиции, можно использовать еще больше вспомогательных элементов.

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

Даже при сильной насыщенности и большом количестве контраста можно выделить центральный элемент при помощи направляющих.

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

Структура

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

Для примера взглянем на эти стулья, расставленные случайным образом.

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

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

Рассмотрим основные примеры структуры.

Правило третей

Суть этого правила в том, чтобы разделить изображение линиями на девять равных частей, и в местах, где линии пересекаются, располагать важные для композиции элементы. Таким образом у нас есть четыре точки, где можно расположить центральный элемент. Если вы рисуете персонажа, его лицо будет на одной из этих точек, и часто имеет смысл поместить еще что-то на противоположной точке, чтобы уравновесить композицию. Например, если центральный элемент находится в верхней правой точке, то в нижней левой будет еще какая-то деталь.

Само по себе это правило является упрощенной версией правила золотого сечения, но оно работает ничуть не хуже.

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

Вот еще один пример:

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

В фотографии работают все те же принципы композиции.

То же касается и кинематографа.

Золотое сечение

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

Из-за этого оно повлияло на решения многих дизайнеров.

Такая композиция кажется приятной, потому что мы привыкли видеть ее в окружающем нас мире.

Рассмотрим на более актуальном примере:

Золотое сечение идеально ложится на элементы композиции, и окружающие центральный элемент медузы тоже расположены по спирали.

Пирамида

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

Также оно применимо и в более широких сценах, таких, как интерьеры.

Симметрия

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

Симметрия придает зданиям ощущение важности, величия и спокойствия.

Полный кадр

Здесь все просто. У вас есть один объект, и вы приближаете его так, что он занимает весь или почти весь экран.

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

Баланс

Теперь поговорим о балансе. Он заключается в равномерном распределении «визуального веса» изображения, чтобы не возникало ситуации, когда правая половина изображения заполнена деталями, а левая половина остается практически пустой. Вес изображению придают те же вещи, что используются для создания центрального элемента: размер, сильный контраст, насыщенность, лица и фигуры.

Рассмотрим один пример:

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

Вот еще один пример несбалансированного изображения:

Внимание зрителя приковано к зданию: наличие яркого света создает сильный контраст, к тому же, там есть человеческая фигура. С правой же стороны нет ничего, что бы особо выделялось на фоне. Да, там есть какие-то мешки и коробки, но контраста недостаточно. Если сильно выкрутить контраст изображения и размыть его, то будет хорошо заметно, что изображение не сбалансировано.

Так как же сбалансировать наше изображение? Возьмем еще один похожий пример.

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

А вот более сложное изображение:

Большой монстр в центре притягивает внимание. И еще ребенок рядом. Яркое окно с Луной снаружи создает контраст. Рисунок был бы несбалансированным без лампы внизу. Все детали вместе выглядят комплексно и гармонично. Если вам кажется, что это слишком сложно и вы никогда не сможете понять все эти нюансы, не беспокойтесь. Со временем, набравшись опыта, вы сможете улавливать такие мелочи.

И еще:

По мнению Эндрю, это лучший пример сбалансированности. Здесь у нас есть огромный страшный робот с ярким светом от камеры (или чего-то ещё). Он притягивает больше всего внимания. В левом углу у нас есть маленький мальчик. У него нет света, только силуэт. И тем не менее, он тоже — весомая фигура в сцене. Дополняет картину у нас этот большой навес сверху и тень снизу.

Дополнительные материалы

Перевод выполнен Лилией Васильевой, автором Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

0
39 комментариев
Написать комментарий...
Прямой калькулятор

Большая часть стать, в целом, расписана толково, кроме пары моментов:

1. "Несбалансированное изображение". Не все изображения должны быть "сбалансированными". В данном конкретном примере "несбалансированность" имеет смысл. Правила композиции - это не законы, и нарушать их иногда можно и нужно.

2. Золотое сечение.

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

Золотое сечение - абсолютная хуета, которая не делает ничего. Все примеры, когда золотое сечение якобы влияет на композицию, прекрасно объясняются другими правилами композиции. Надеюсь, когда-нибудь эту гомеопатию от мира искусства перестанут форсить, как нечто полезное и глубокое, и оставят в покое.

Ответить
Развернуть ветку
Сергей Латышев
Ответить
Развернуть ветку
Галяперидол

В граните твои слова бы высечь. Заебали уже натягивать свое золотое сечение везде где только можно. Никто нихуя не понимает, зато с придыханием надрачивает, потому что так принято.

Ответить
Развернуть ветку
Romka Beton

А что там было?

Ответить
Развернуть ветку
janklod vandam

Хорошее сравнение - "гомеопатия от мира искусства"

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Андрей Камышов

Чел, Золотое Сечение очень важно. Без него не получится сделать Идеальный Золотой Спин и победить президента США.

Ответить
Развернуть ветку
Monycat

Какая-то сложная шутка, по этому ещё нет аниме-адаптации, а чукча не читатель. Не делай так больше

Ответить
Развернуть ветку
Alexander Gunko

В примере со скрипкой показывали соотношение размеров частей скрипки по вертикали, поэтому по горизонтали можно было сплющить сечение

Ответить
Развернуть ветку
Сергей Латышев

Золотое сечение - это конкретное соотношение сторон прямоугольника, его нельзя плющить.

Ответить
Развернуть ветку
Артем Ситников
Золотое сечение - это конкретное соотношение сторон прямоугольника

Нет это частный случай. Золотое сечение это всего лишь конкретная пропорция двух произвольных величин: «Соотношение двух величин a и b, при котором бо́льшая величина относится к меньшей так же, как сумма этих величин к бо́льшей».

Ответить
Развернуть ветку
Божественный томагавк_два

Золотое сечение - это, по сути, правило третей + баланс больших/средний/мелких форм, так что какой-то смысл в этом все же есть (для новичков, например). В статье, по этому поводу, конечно, полная чушь)

Ответить
Развернуть ветку
Евгений Лазаренко

Хорошая была статья пока не пошли пункты про правило третей, золотое сечение и балансировку, хотел уже было бомбить как в прошлый раз (тоже пост https://dtf.ru/gamedev/759215-pravila-horoshey-kompozicii-v-risovanii от этой школы был кстати) но к счастью в этот раз большинство комментаторов понимает какая это чушь))

Ответить
Развернуть ветку
Артем Ситников
Золотое сечение - абсолютная хуета
гомеопатию от мира искусства

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

Ответить
Развернуть ветку
roast potato

Ну так правил в принципе нет. Главное понимать, завес и как ты делаешь и уметь это обосновывать.

Ответить
Развернуть ветку
Vladyslava Klyma

Учитывая, что по хорошему даже в природе этих сечений еще штук пять

Ответить
Развернуть ветку
Andrey Apanasik

Люблю (нет), когда все эти правила уже постфактум пытаются на готовые работы навесить.

Ответить
Развернуть ветку
Артем Ситников

Поиск золотого сечения в терминальной стадии

Ответить
Развернуть ветку
Илья Саламов
Ответить
Развернуть ветку
Олег Чимде

И делают ошибки, не очень понимая, как всё устроено :)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
atomgrib

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
FUNKADELIC

Исправил. На самом деле в центре внимания тёмная и таинственная дырка рога. Наверняка в этом скрыто некое тайное послание от художника.

Ответить
Развернуть ветку
Антоша Пират

Мне кажется линии и не должны всегда "кричать" о себе, как в той фотографии дома в лесу. Часто они работают просто подсознательно, как это изображение.

Ответить
Развернуть ветку
Parfen

Мне кажется, это изображение вообще никак не работает, просто месиво деталей.

Ответить
Развернуть ветку
PPD

К чему здесь вообще золотое сечение?
Мне кажется что его начали пихать везде, к месту и нет. На всех примерах в посте, оно даже близко не ложится на фото

Ответить
Развернуть ветку
Alexander Gunko

Я вижу, что тут медуза находится ровно в правом верхнем прямоугольнике. Ну и центр, куда сечение стремится, тоже в центре медузы.

Ответить
Развернуть ветку
Илья Саламов
Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Илья Саламов

Вы уже переводили прям 1 в 1 материал, только про рисунки. И вам еще тогда всё прекрасно расписали про золотое сечение и пропорции.
https://dtf.ru/gamedev/759215-pravila-horoshey-kompozicii-v-risovanii

- Либо у вас совсем нет контроля качества и вы переводите всё подряд.
- Либо вы просекли фишку и собираете комментарии надеясь на рейтинги.

Учитывая что вы этими переводами рекламируете свою "школу" ставлю на второй пункт и хочу отдать должное человеку который до этого додумался.

Ответить
Развернуть ветку
Roman Rzaev

Лучше бы взяли пару тем отсюда со скриншотами от юзеров и показали как эти правила работают (или нарушены) в этих скриншотах. Это было бы гораздо показательнее.
Хотел сам что-то аналогичное сделать, на основе своих 5+ лет фотостажа, но влом

Ответить
Развернуть ветку
Smirnov School
Автор

Спасибо за идею!

Ответить
Развернуть ветку
Илья Саламов

Предлагаю первую тему

Ответить
Развернуть ветку
Ярослав Ладнай

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

Ответить
Развернуть ветку
Yes, Your Grace

Потому что это дичь лютая)

Ответить
Развернуть ветку
janklod vandam

Ерунда все это. Главное - содержание рисунка.

Ответить
Развернуть ветку
i came here to chew bubblegum

Переводить "популисткие" художественные видео Эндрю Прайса, такое себе решение. Неужели никого лучше не нашлось?
Да, может руководства у него неплохие и многим помогли с освоением blender, но называть его "художником" и переводить его видео вместо того чтобы обращаться к куда более ёмким и грамотно составленным источникам.
По сути вся его популярность строится на его руководствах по blender что где запихнуть и что куда ткнуть. Именно как "Художник" он весьма и весьма посредственный. Качество результата его руководств целиком и полностью зависит от качества подобранного исходника на который он ориентируется, а не его собственных художественных навыков. Поэтому неудивительно что он тут намотал всё что можно и нельзя на правило третей и золотое сечение.
Я его давно переставл воспринимать как кого-то кроме технического специалиста после того как он дважды опростоволосился на blender конференции со своими пафосными речами о том что вот сейчас всё будет в VR, а второй раз с тем что всё будет в ИИ(при этом показывая убогие апскейлы архитектурных рендеров). Человек просто пользуется своей популярностью и озвучивает поверхностные выводы на потеху тем кто не в теме.

Ответить
Развернуть ветку
Smirnov School
Автор

Благодарим за фидбек, мы учтём его в дальнейшем!:З

Ответить
Развернуть ветку
Immy

из-за того, что "составители композиций" следуют этим правилам - все эти картинки выглядят одинаково

Ответить
Развернуть ветку
Свидетель бананов

Раньше смотрел на фото, рисунки и прочие изображения и не парился, все норм было. Теперь буду везде искать баланс, структуру, центральный элемент, скрытый смысл

Ответить
Развернуть ветку
Читать все 39 комментариев
null