ОТНОШЕНИЯ

Элементы размеры которых находятся в отношении золотого сечения

Правило третей и золотое сечение

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

Где применение данных правил может быть полезно?

— Фотографии, иллюстрации, логотипы, иконки, интерфейсы, сайты и даже отдельные блоки в них. В общем-то, везде.

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

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

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

Очень лёгкий для понимания и реализации приём. В чём же он заключается?

У нас есть сетка из двух линий по вертикали и горизонтали, вы могли встретить такую даже в настройках камеры своего телефона.

Красные точки — это точки пересечения линий сетки, именно в этих местах должны располагаться главные объекты композиции, на которые вы хотите обратить внимание пользователя. Эти пересечения еще называют «Точками внимания» или «Зрительными центрами».

Давайте рассмотрим сетку на примере пары фотографий, которые я скачал с моего любимого стока Unsplash .

Кстати, для быстрого вызова такой сетки в фотошопе можно воспользоваться инструментом для кадрирования «Crop» (Рамка), а клавишей «O» или пунктом в верхней панели можно менять режим наложения сетки (правило третей, золотая спираль, золотое сечение и тд).

На этом фото мы чётко видим, что главные элементы композиции (девушка-фотограф и здание с горой) находятся на пересечении линий сетки.

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

Еще пример, с одним главным объектом.

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

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

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

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

Это уже немного посложнее и полезность применения такого метода несколько фантомна.

Если вкратце, то золотое сечение — это деление какой-либо величины в соотношении 62 % на 38 %.

Есть еще так называемое число фи, оно равняется 1,618.

На рисунке ниже мы видим, что отрезок АС в 1,618 раз длиннее отрезка СВ. Следовательно АС — 62%, СВ — 38%.

Немного не понятно, не правда ли? Давайте последовательно разбираться на примере прямоугольника, одна сторона которого в 1,618 раза длиннее другой. Такой прямоугольник считается идеальным, с точки зрения золотого сечения.

Далее нам нужно вписать в прямоугольник квадрат, стороны которого равны ширине прямоугольника, а потом еще и еще. И еще. И так далее.

Далее проводим дуги по углам квадратов и получаем спираль Фибоначчи :

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

Но как это выглядит на практике? Примерно вот так это реализовано в прототипе сайта:

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

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

Пример: у нас есть размер основного шрифта — 16pt и мы хотим подобрать размер для подзаголовка. В таком случае просто умножаем 16 на 1,6 и при необходимости округляем до целочисленного значения. Получаем подзаголовок размером 22pt. Следовательно, чтобы получить идеальный размер (с точки зрения золотого сечения) для заголовка — мы должны умножить размер подзаголовка на 1,6. В итоге размер заголовка у нас равняется 35pt.

Итоги

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

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

Кстати

У меня есть ламповый телеграм-канал , где я регулярно пишу новости, разбираю работы подписчиков, постеры в метро своего города и другие интересные людям вещи (редизайн вДудь, худшие и лучшие логотипы студии Артемия Лебедева, новый логотип BlaBlaCar и т.д.) Также пишу статьи и делюсь полезными инструментами для дизайнеров. Иногда пишу на Хабре.

Источник

Золотое сечение: математика, которая изменит ваш дизайн

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

Читайте полную версию статьи с примерами бесплатных шаблонов в блоге Canva .

Что общего у пирамиды в Гизе и Мона Лизы с логотипом Пепси? И то, и другое создано с помощью золотого сечения. В этой статье мы разберем, что это такое и как его использовать в создании дизайна.

Правило золотого сечения

Золотое сечение — пропорция, которую заметили еще древние египтяне. Чтобы её получить, нужно разделить линию на две части так, чтобы длинная часть соотносилась с короткой в такой же пропорции, как вся линия соотносится с длинной. Оказывается, эта пропорция всегда равняется 1,618. Это число еще называют числом «фи».

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

С тех пор золотое сечение находят в пропорциях гениальных произведений: пирамидах в Гизе и афинском Парфеноне, «Сотворении Адама» и сводах Сикстинской капеллы, созданных Микеланджело, «Мона Лизе» Да Винчи. Замечают золотое сечение в искусстве и дизайне наших дней. Его находят даже в логотипах современных компаний — например, Пепси и Твиттера. Именно с этим математическим явлением многие связывают привлекательность этих предметов искусства и дизайна.

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

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

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

Заметили цифры в квадратах? Это математическая последовательность, которая раскрывает математическое совершенство золотого сечения, — последовательность Фибоначчи (поэтому божественную пропорцияю часто называют «золотое сечение Фибоначчи»). Она составляется по простейшему правилу: каждое следующее число — это сумма двух предыдущих:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

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

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

Следущий шаг — впишем в квадраты круги. Они тоже соотносятся друг с другом в пропорции 1:1.618 и соответствуют правилу золотого сечения.

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

Как использовать золотое сечение в дизайне

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

1. Принцип золотого сечения в макетах

«Золотой прямоугольник» можно использовать для того, чтобы согласовать размеры элементов макета. Самый простой способ — установить между ними соотношение 1 к 1,618.

Например, если применить правило золотого сечения к макету шириной 960 пикселей и разделить ширину на 1,618, то его высота составит 594 пикселя. Разобьем получившийся прямоугольник на две части с соотношением сторон 1 к 1,168. Осталось только заполнить две части запоминающимися снимками — и макет готов.

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

2. «Воздух» между элементами

«Воздух» — это свободное пространство вокруг элементов дизайна. Он структурирует макет и выделяет важные детали. Чтобы грамотно распределить интервалы между объектами, наложите на свой макет «золотой прямоугольник» (несколько, если нужно).

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

Дизайн-студия Moodley разработала айдентику для фестиваля искусств Bregenzer Festspiele. В корпоративный стиль вошли логоиип, подпись и шаблоны для программ, афиш и наружной рекламы. При этом на афишах вокруг коллажей из картин и фотографий много свободного пространства. Золотое сечение помогает распределить его так, чтобы оно подчеркивало основные элементы дизайна, обращало на них внимание смотрящего. Используйте это при создании вашей айдентики.

А вот визитные карточки, которые разработало сингапурское дизайн-агентство Lemon Graphic для Terkaya Wealth Management. Всего три элемента — два логотипа и подпись — выстроены в красивую композицию с помощью свободного пространства. Понадобилось два «золотых прямоугольника», чтобы создать этот дизайн

3. Содержание — в сердце «золотой спирали»

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

Это сайт графического дизайнера Тима Роузиля отличается плотной версткой и интересным расположением элементов, основанным на золотом сечении. Обратите внимание, как автор привязал крупные элементы сайта (Текст Bonjour My Name is Tim ) к более широкой части спирали, а мелкие (осаисание своей работы и логотип) организовал в ее центре. Именно в таком порядке глаз читающего и познакомиться с материалом на странице. Так золотое сечение помогает управлять порядком чтения.

На экспериментальном плакате Saastamoisen säätiö элементы становятся меньше и плотнее по мере того, как золотая спираль заворачивается к своему центру. С каждым шагом уменьшается и размер букв, и расстояние между ними.

Дизайнеры из Helms Workshop использовали золотую спираль в логотипе пивоварни Fullsteam Brewery. Они «разложили» по квадратам элементы дизайна: сначала глаз цепляется за потрет, после взгляд останавлвается на штампе в правом углу и переходит к мелкой подписи ABV и месту производства. Так на одной картинке разместился целый рассказ о бренде: его владелец (к слову, вымышленный), традиции, истоки.

4. Золотое сечение в фотографии и архитектуре

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

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

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

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

Вот, например, обложка Complex magazine, в проектировании которой использовали принцип золотого сечения. Центральный квадрат наполнен деталями, в его углах — глаза и нос модели, а по краям композиции размещены квадраты с «воздухом».

А эту обложку Pilot magazine создали по упрощенному правилу третей. Снова глаза — самая выразительная часть лица — на пересечении двух линий.

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

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

5. Формы: как круги помогают создавать логотипы

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

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

Логотип Пепси построен на двух окружностях, созданных по принципу золотого сечения. При этом внутренний круг почти не заметен: его можно выделить, если внимательно посмотреть на белый «блик» на логотипе. Заметили?

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

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

Источник

Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Закрыть