Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>15 май 2023</li>

3 <li>0</li>

4 </ul>Композиция в искусстве и дизайне - целый раздел науки. Собрали в статье самые важные принципы.

5 Иллюстрация: Polina Vari для Skillbox Media

6 Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.

7 Любая дизайнерская работа, будь то иллюстрация, визуализация или 3D-сцена, начинается с построения композиции. Ещё до начала работы вы должны чётко представлять себе, как будет выглядеть картинка в целом и что в ней будет главным элементом, к чему вы хотите привлечь внимание и какую идею донести. Важно понимать, что композиция - это не только про рисунки, её знание необходимо и дизайнерам UX/UI, и продуктовым дизайнерам в диджитале.

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

9 Разбираем, как работают:

10 <ul><li><a>композиционный центр</a>;</li>

11 <li><a>связь между объектами</a>;</li>

12 <li><a>золотое сечение</a>;</li>

13 <li><a>правило третей</a>;</li>

14 <li><a>рамка</a>;</li>

15 <li><a>управление взглядом</a>;</li>

16 <li><a>ракурс</a>;</li>

17 <li><a>атмосфера и эмоции</a>;</li>

18 <li><a>свет и цвет</a>;</li>

19 <li><a>динамика и статика</a>;</li>

20 <li><a>ритм</a>;</li>

21 <li><a>нарушение правил</a>.</li>

22 </ul>Несмотря на слово "центр" в названии, композиционный центр далеко не всегда находится в геометрическом центре плоскости. Такая композиция будет выглядеть скучно. Композиционный центр обычно содержит главное послание, и его выделяют цветом, светлотой, иногда он может находиться вообще в углу. Более того, композиционных центров может быть даже несколько! Очень важно следить, чтобы композиционный центр считывался не только сюжетно, но и графически.

23 При взгляде на эту рекламу очков не возникает никаких сомнений, что на постере дизайнер сделал главным. Второй композиционный центр ― справа, и он также легко считываетсяИзображение: KELOPTIC / Éric Esculier /<a>Behance</a>Построение композиции стоит начинать с распределения ролей между изображёнными объектами. Если каждый из них будет притягивать внимание в равной степени, то зритель просто растеряется и не поймёт, на что смотреть первым, и быстро утратит к изображению интерес. Именно поэтому так важно подчеркнуть главный объект и, уже отталкиваясь от него, располагать остальные элементы, пользуясь приёмами привлечения внимания, о которых мы поговорим ниже.

24 Главный объект на этой рекламе - книга в руках фотографа, следующий по значимости - жёлтый лифлет внизуИзображение: Público / дизайн агентства<a>Nossa</a>О золотом сечении писал ещё Евклид в III веке до нашей эры. Он применял этот принцип для построения правильного "золотого" прямоугольника. Соотношение сторон в этом прямоугольнике - 1 к 1,618. Именно такая пропорция считается наиболее гармоничной для соотношений частей в композиции.

25 В логотипе Toyota использована пропорция золотого сеченияИзображение: Polina Vari для Skillbox MediaНа основе этой пропорции строится золотая спираль. Если расположить главные элементы композиции на её линии или же в ключевых точках, изображение будет выглядеть более гармонично - то есть приятно для глаза.

26 При строительстве Парфенона архитекторы взяли в основу золотую спиральФото: Wikimedia CommonsРассказываем в <a>этом материале</a>о золотом сечении подробно - историю, принцип, показываем примеры.

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

28 Фотоколлаж сделан с использованием правила третейФото: Ironika / ShutterstockРаботает это правило очень просто. Изображение делится линиями на трети по вертикали и по горизонтали. На пересечении этих линий или самих линиях находятся ключевые объекты. Композиция в этом случае получается динамичной, но при этом сбалансированной.

29 Создавая сложные композиции, очень важно следить за тем, как сочетаются элементы по цвету. Показываем, с чем хорошо сочетаются<a>синий</a>,<a>зелёный</a>,<a>оранжевый</a>и <a>красный</a>цвета.

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

31 Работа хедлайнера курса "<a>Рекламная графика</a>" Дмитрия Глазырина: использован эффект рамки из листвыИзображение: Dmitriy Glazyrin / Mondlicht Studios /<a>Behance</a>Правильно выстраивая композицию, вы можете заставить зрителя обратить внимание на нужный объект. Чтобы это сделать, продумайте вид и конструкцию дополнительных объектов на картинке, чтобы они отводили взгляд зрителя к объекту. Например, ведущая к хижине дорога, свисающая над путником ветка дерева или указывающая на объект рука помогут сосредоточить внимание на главном.

32 В рекламе кетчупа Heinz кусочки картошки фри подводят взгляд зрителя к бутылке с соусомИзображение: Mahmoud Alkhawaja /<a>Behance</a>Смелые и необычные ракурсы всегда привлекают внимание. Но к тому, чтобы создать сцену с необычным ракурсом, нужно подготовиться и посмотреть множество изображений. Иначе результат может выглядеть неестественно или даже уродливо. Но если всё сделано грамотно - изображение произведёт эффект.

33 Иллюстрация имитирует эффект широкоугольного фотообъективаИзображение: mexico70 / BehanceКомпозиция, ландшафт, цвета могут хорошо подчеркнуть главную эмоцию, заложенную в сюжете. Не просто так нечто позитивное ассоциируется у людей с чистыми и яркими оттенками, а фильмы ужасов - с мрачной атмосферой заброшенных домов и пустынных улиц.

34 Работа хедлайнера курса "<a>Рекламная графика</a>" Дмитрия Глазырина, в которой обыгрывается название модели Rolls-Royce Phantom - машина выглядит загадочно и фантомноИзображение: Western Jack / Dmitriy Glazyrin /<a>Behance</a>Читайте, как работают различные цвета:

35 <ul><li><a>Жёлтый</a>: счастье, оптимизм и интернациональность</li>

36 <li><a>Розовый</a>: сладость, нежность и детство</li>

37 <li><a>Коричневый</a>: роскошь, стабильность и простодушность</li>

38 <li><a>Зелёный</a>: экология, свежесть и безопасность</li>

39 <li><a>Белый</a>: элегантность, лаконичность и доброта</li>

40 <li><a>Синий</a>: доверие, умиротворение и мужественность</li>

41 <li><a>Красный</a>: вызов, победа и страсть</li>

42 </ul>Вы никогда не обращали внимание на то, что фотографии с красивым закатом нравятся людям гораздо больше других? Всё дело в насыщенности цветов и красивом переходе оттенков. Яркие изображения и сбалансированные переходы чаще всего вызывают позитивные эмоции.

43 Обилие света и яркие градиенты наполняют заставку презентации Apple радостьюИоханнес Иттен - швейцарский художник и преподаватель школы Баухаус, который разработал одну из ключевых теорий о цвете.<a>Рассказываем</a>, как она работает и что такое цветовой круг Иттена.<a>Другой наш обзор</a>посвящён книге Иттена "Искусство цвета", где он разбирает оптические эффекты, построенные на цвете.

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

45 После ребрендинга 1991 года логотип adidas получил большой заряд динамики за счёт диагоналей и ритмаИзображение: AdidasЗа полную же статику отвечает симметрия, поскольку она чаще всего построена относительно вертикальной или горизонтальной оси. Части по обе её стороны похожи, изображение становится предсказуемым.

46 Логотип adidas 1972 года кажется понятным и выглядит статичным за счёт полной симметрии - динамику создают лишь рассекающие его линииИзображение: AdidasРитм - яркий приём, задающий тон всей композиции. Регулярный - механически повторяющийся ритм - предсказуем, в нём нет изыска. Гораздо интереснее, если он нарушается. Это привносит элемент неожиданности и делает изображение живым.

47 В логотипе издательства MIT Press регулярный ритм нарушается двумя выступающими линиями, что сразу делает логотип интереснымИзображение: MIT PressИзображение, которое задействует ритм, построено не только на тёмных областях рисунка, но также активно использует свободные области.<a>Рассказываем в нашей статье</a>, что такое негативное пространство.

48 Мы рассказали об одиннадцати ключевых приёмах в композиции. Но как известно, правила нужны для того, чтобы их нарушать. Поэтому прежде чем переходить к нестандартным решениям, нужно хорошо понимать, что будет нарушено и какого эффекта вы таким образом достигнете.

49 Если вы хотите разобраться в законах композиции лучше, мы подготовили ещё один<a>очень подробный материал</a>. В нём досконально разбираем динамику, ритм, баланс и рассказываем, какие исследования восприятия проводили учёные.

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

51 <ul><li><a>5 базовых правил хорошего дизайна</a>: закон Фиттса, теория близости, отступы, якоря и гербы</li>

52 <li><a>Приёмы из фильмов</a>, которые пригодятся в работе дизайнера</li>

53 <li><a>Минималистичный дизайн</a>: как он появился и что в нём самое главное</li>

54 <li><a>"Представление информации"</a>: базовые правила визуализации данных</li>

55 <li><a>Модульные сетки в графическом дизайне</a>: основы швейцарской вёрстки</li>

56 </ul><a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>