Компенсация перспективных искажений текста
В январе 2018 года я опубликовал статью о перспективных искажениях и выпустил Перспективлялку — браузерную утилитку для моделирования искажения текста при взгляде под разным углом.
Наконец настало время перейти от простой констатации очевидного (оказывается, при взгляде сбоку надписи искажаются!) к взаимодействию с этими искажениями. Для этого я построил инструмент — скрипт компенсации перспективных искажений текста для Иллюстратора.
Скрипту передается положение макета относительно глаз наблюдателя, после чего он рассчитывает перспективные искажения каждой строки текста и компенсирует их растягиванием и увеличением символов, таким образом улучшая читабельность текста. Как-то так:
А так это выглядит в Иллюстраторе:
Скрипт также умеет компенсировать интерлиньяж, сохранять пропорции символов и другие штуки, о которых расскажу чуть ниже, а пока — лирическое отступление об условиях, в которых этот скрипт может быть полезен.
Лирическое отступление
Человек, сталкиваясь с вертикальным текстом, расположенным не на уровне глаз, неосознанно выбирает оптимальную дистанцию наблюдения, зависящую от остроты зрения (издалека различить текст сложнее), эргономики (задирать голову или наклоняться для чтения тяжело), физических ограничений (нельзя подойти ближе из-за какой-нибудь стойки или отойти подальше в маленьком помещении) и перспективных искажений (чем ближе подойдешь, тем сильнее оптически сжимается текст).
Обычно всё упирается в кегль: чем меньше текст на носителе, тем ближе к нему приходится подходить. Это приводит к увеличению угла обзора и усилению искажений, усложняющих чтение текста.
Вроде бы очевидное решение — увеличить кегль, чтобы текст было удобно читать издалека без необходимости подходить ближе — упирается в ограничение: площадь носителя — ресурс дефицитный, и размер кегля обычно зависит от количества текста, которое надо уместить на этом носителе.
Что в этой ситуации можно сделать:
- Опустить/поднять текст ближе к уровню глаз
- Увеличить носитель и пропорционально увеличить кегль размещенного на нем текста
- Сократить количество текста и увеличить кегль оставшегося
Но не всегда это возможно. Иногда текст размещают наверху, потому что уровень глаз уже занят. Например, если это меню над прилавком или расписание над проходом:
Иногда нет препятствия повесить носитель на уровне глаз, но его сознательно поднимают выше, чтобы он был заметен издалека, люди не могли загораживать его.
Иногда носитель ограничен по ширине, из-за чего информацию приходится складывать в столбик, и что-то уходит наверх и вниз.
Теперь, когда все остальные варианты улучшить ситуацию исчерпаны, благодаря скрипту появляется новый вариант: компенсировать перспективные искажения текста.
Так и запишем под четвертым пунктом:
4. Компенсировать перспективные искажения текста
Этот ход позволит увеличить оптический размер символов и улучшить условия чтения для людей, которые вынуждены из-за мелкого кегля или других ограничений подойти к носителю ближе.
То есть скрипт нужен тогда, когда что-то уже пошло не так: мелкий текст разместили значительно выше/ниже уровня глаз, и надо исправлять ситуацию. В идеальном мире этот скрипт просто не нужен, а в реальном мире он дает больше свободы дизайнеру и расширяет спектр вариантов в затруднительных условиях.
Примерно в таких условиях и родилась идея скрипта: во время работы над навигацией ВДНХ возникла задача разместить схему территории с перечнем всех объектов на рекламной конструкции 1,5×3 м, размещенной где-то на уровне глаз человека.
Чтобы подписи объектов в верхней части карты лучше считывались, они были пропорционально растянуты по вертикали: чем выше располагалась на карте подпись, тем сильнее она растягивалась.
Ссылка для скачивания и инструкция к скрипту
Репозиторий в Гитхабе: https://github.com/kefiijrw/Text-Perspective-Distortion-Compensator-for-Ai.
Ссылка на архив со скриптом и файлом-примером: https://kefiijrw.com/upload/Perspective Compensation for Illustrator.zip
Скрипт запускается через меню Иллюстратора File → Scripts → Other Script… или перетаскиванием файла скрипта в окно Иллюстратора. Чтобы не проворачивать это при каждом запуске, можно:
— Добавить скрипт в меню File → Scripts, положив файлик скрипта в папку /Applications/Adobe Illustrator [vers.]/Presets.localized/en_GB/Scripts (Макось) или C:\Program Files\Adobe\Adobe Illustrator [vers.] (64 Bit)\Presets\en_GB\Scripts\ (Винда). После этого можно совсем обнаглеть: записать экшн с запуском скрипта и повесить на него хоткей.
— Установить плагин, который позволяет запускать скрипт в один клик. Из известных мне: JSX Launcher, Script Bay, Scripshon Trees, LAScripts.
Скрипт обрабатывает выделенные текстовые поля, а если ничего не выбрано — то все текстовые поля в файле. Поддерживаются и Area Type, и Point Type, но у них есть особенности, о которых ниже. Уровень глаз наблюдателя определяется по линии в слое eyes_level, остальные параметры выставляются в открывающейся панели настроек.
Дистанция (Distance)
Расстояние от наблюдателя до плоскости текста. Чем меньше расстояние, тем больше искажения, тем сильнее эффект от их компенсации.
По умолчанию скрипт считает, что макет уже в масштабе 1к1. Если на рабочей области становится тесно, то можно макет уменьшить одновременно с кратным уменьшением параметра дистанции, то есть вместо макета 5×5 метров и дистанцией 10 м можно запускать скрипт на уменьшенном макете 1×1 метр и дистанцией 2 м, результат будет идентичен.
Коэффициент компенсации искажений (Perspective compensation coefficient)
Отвечает за пропорции букв — насколько сильно они будут растянуты по вертикали для уравновешивания их оптического сжатия из-за наблюдения под углом.
0 — без компенсации
1 — полная компенсация, с заданной дистанции все символы оптически будут смотреться в оригинальных пропорциях
Коэффициент компенсации размера (Scale compensation coefficient)
Символы с расположенных выше уровня глаз строк не только оптически сжимаются по вертикали из-за перспективных искажений, но и кажутся меньше символов с нижних строк из-за того, что расположены дальше них от глаз. За этот фактор — увеличение размера букв без изменений их пропорций — отвечает коэффициент компенсации размера. Разницу между двумя видами оптической компенсации поможет понять картинка:
0 — без увеличения
1 — буквы увеличатся пропорционально расстоянию до глаз, компенсируя разницу в оптических размерах символов с разных строк
Эта опция может значительно изменить макет: при обработке текстового поля Area Type увеличившееся в ширине буквы могут уже не влезть в зафиксированную ширину строки и перенестись на новую строку. При обработке Point Type строки просто удлиняются:
Коэффициент сохранения интерлиньяжа (Leading compensation coefficient)
Отвечает за масштабирование межстрочного расстояния.
0 — интерлиньяж остается неизменным
1 — интерлиньяж пропорционален высоте символов
Растягивание букв без компенсации межстрочного расстояния может привести к слипанию строк или просто некомфортному интерлиньяжу, но увеличение интерлиньяжа приведет к смещению строк на макете, текст может перестать влезать в отведенные габариты.
Что со всем этим делать
Если шикануть и выкрутить все ползунки на максимум, можно получить полную компенсацию: оптически размер букв и интерлиньяж будут одинаковым для всех строк.
Но делать так вряд ли стоит. Скрипт рассчитывает компенсацию искажения для определенной дистанции и не вызывает вопросов только у наблюдателя с этого ракурса, а с другой позиции макет уже будет смотреться крипово и будто бы поломанным. Примерно как в истории с компенсацией перспективных искажений нанесенных на дорогу знаков.
Поэтому я рекомендую использовать ползунки коэффициентов аккуратно и особо не гонять их дальше середины, чтобы внесенные скриптом изменения в макет были полезны, но не бросались в глаза, обитали в области оптических компенсаций.
Вместо этого больше усилий стоит направить на то, чтобы потребность в скрипте не возникала. У каждого вертикального уровня носителя есть свои сильные стороны, и стоит их использовать соответствующе: расположенные выше человеческого роста элементы будут хорошо видны издалека, поэтому там хорошо разместить крупный привлекающий внимание заголовок, а участок на уровне глаз бесценен с точки зрения отсутствия перспективных искажений, и поэтому там можно разместить довольно мелкий текст без угрозы для комфортного чтения. Этот принцип хорошо заметен на фото советских стендов с газетами: крупный заголовок виден издалека поверх голов, мелкий расположенный на уровне глаз текст газеты доступен для продолжительного чтения.
Если вернуться к навигации, то вот примеры носителей, которые придерживаются правила «Чем дальше надпись от уровня глаз, тем крупнее кегль»:
А вот менее удачные варианты, где довольно мелкий текст расположен значительно выше уровня глаз:
Также стоит сразу при проектировании макета учитывать независимость информации на носителе и ее востребованность. Например, при изучении расписания занятий в университете наблюдатель просто подойдет ко своей части носителя, где будет расписание занятий его группы, а если это единое полотно текста, что ходить вдоль макета будет тяжело и наблюдатель постарается отойти подальше, чтобы читать с места.
Чем меньше кегль, тем ближе надо подойти к носителю, тем теснее становится, меньше людей могут одновременно смотреть. Можно вспомнить, например, вывешенные списки поступивших на доске приемной комиссии вузов, вокруг которых собирались толпы, так как одновременно осилить мелкий текст на А4 могло лишь несколько человек.
На правах рекламы: менее масштабные заметки про дизайн публикую на канале «Мяу-дизайн».
