Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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