Оптическая компенсация

16 March 2018

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

Чтобы понять, о чём дальше пойдёт речь, разберёмся с понятием «оптическая иллюзия». Это ошибка в зрительном восприятии, вызванная неосознанными процессами коррекции воспринимаемых образов. Существует множество видов оптических иллюзий, связанных с восприятием цвета, формы, объёма и т. д.

Посмотрите на иллюстрацию ниже. Что вы видите?

На изображении начерчены прямые и параллельные линии? Если вы считаете, что линии абсолютно прямые — поздравляю, вы уникальны и ваш мозг не обмануть! А если вы, как и я, увидели кривые полоски и возможно даже рябь, то вы стали жертвой оптической иллюзии.

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

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

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

Выравнивание и визуальный вес

Компьютер не может понять, как два объекта относятся к друг другу. Он может вычислить лишь их вес, высоту и расположение в оси XY.

Присмотритесь, треугольник находится ровно по центру круга? Или это не так? Нарисовав прямоугольник, можно увидеть, что треугольник смещён вправо от середины.

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

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

Цвет

Здесь оптическая компенсация менее заметна, но тут также имеет значение вес объекта.

Если использовать один и тот же, например, зелёный цвет как для текста, так и для объекта, то объект будет насыщеннее.

Обратите внимание на код цвета: слева обе части кода одинаковые, справа — отличаются, но что видите вы?

Чтобы исправить это, нужно играть с цветом — делать ярче или темнее.

Масштаб

Масштаб — это размер объекта (это может быть не только фигура, но и текст). Фигуры должны быть одинакового размера, чтобы всё выглядело ровным. Но, например, площадь квадрата будет больше, чем площадь круга. Поэтому, размещая два этих объекта, стоит увеличить площадь круга.

Обе фигуры слева 120х120 пикселей, справа — только круг площадью 126х126 пикселей
Обе фигуры слева 120х120 пикселей, справа — только круг площадью 126х126 пикселей

Даже небольшое изменение размера (хоть на 1 пиксель) одного объекта может улучшить вашу работу.

Заглавные буквы

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

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

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

Автор статьи: Елена Герасимова

Источники и иллюстрации:

1. Habrahabr.ru: Оптическая компенсация

2. Logologika.ru: Оптическая компенсация в дизайне логотипов