Дизайн ↓

Про изгибы линий

Этот обещанный метроизгибов пост для дизайнеров.

Допустим, нам надо погнуть линию под углом 90 градусов (а такое случается). Есть три способа это сделать:

Первый способ про то, что изгибы должны быть под 45 градусов, и поэтому типа два раза по 45 — это 90, вот и вся наука. Но два изгиба в два раза хуже чем один (арифметика). Изгиб — это выразительный элемент. Если выразительный элемент лишний, это сразу шум. Но это ещё ничего, назовём это «стилистический ход».

А со вторым способом что не так? Уверен, многие даже не поняли, чем второй от третьего отличается. Объясню. Во втором способе мы доверили рисование кривой бездушной машине:

Машина скругляет максимально тупым и неестественным образом, подставляя на место изгиба дугу окружности определённого радиуса:

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

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

В жизни изгибы выглядят так:

Здесь изломов нет, потому что радиус кривизны меняется плавно.

Посмотрим на скелет изгиба глазами Безье:

Слева, как и раньше — скруглённый радиусом изгиб, которому сделали экспанд. Усы Безье у такого изгиба торчат на половину радиуса (на самом деле на каплю больше).

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

Насколько именно вытаскивать усы — дело вкуса. Вытащишь мало — изломы останутся. Вытащишь много — изгиб станет слишком вялым, как будто не прут погнул, а вермишелину. Правда где-то посередине:

Ну или чуть правее середины. В этом ряду самый левый изгиб — как раз жуткий радиус (который ещё в начале заметки вам, возможно, казался обычным делом).

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

Восемь Адских изломов только в двигалке, и ещё столько же в шахте. Прям смотрю и плачу.

Да, ну для совсем уж зрячих. На схеме метро я вручную сгруглил только углы 90 градусов. Те, которые 45, пока радиусом — там почти незаметно. Это в самом конце, если успею.

Кривые достойны любви не меньше пикселей.

Предыдущие посты про схему метро:

Подписаться на блог
Поделиться
Отправить
Запинить
Популярное