Обложка новости про усиление практики на курсе

Илья Бирман — Wed, 08 Nov 2023 23:08:22 +0500

К недавней новости про усиление практики на курсе я нарисовал нехитрую обложку:

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

Кажется, что у меня просто написано слово «практика» с переносом.

На самом деле, если просто написать слово, получится так:

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

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

Получилось так:

Дальше мне захотелось упереть букву П левым верхним углом в угол самой плашки. Но при таком крупном наборе видно, что крыша буквы Т торчит левее буквы П в предыдущей строке. В шрифте специально делают так — это называется оптическими компенсациями. Если бы их не было, при взгляде издалека наоборот казалось бы, что Т уехала правее. Но мы-то тут не издалека смотрим, а под микроскопом. Поэтому поставим ровно, ну и упрём в левый край:

Сверху, справа и снизу тоже хочется упереть:

Теперь напрягает, что крыша буквы Т почти, но не совсем совпадает по ширине с П, а вертикальный штрих от И проходит мимо Р, хотя мог бы и попадать:

Букве Т надо крышу нарисовать правильной длины, ну и букву И подвинуть правее. Диагонали от И и А могли бы плавнее друг в друга переходить, а потом от К и А. Вообще, заметно, что чем дальше от начала строки, тем сильнее расхождение, поэтому хочется просто нижнюю строку разредить до более плавного попадания:

Теперь замечаю, что левый штрих от К почти, но не совсем проходит через середину А:

Двигаю К чуток левее, чтобы попадало чётко:

Получается так:

Замечаю, что картинка получилась размера 439×241. Как минимум надо сделать 440×240, чтобы совесть была чиста, но я решаю сделать 480×240 — тогда получится прямоугольник пропорций 2:1. Мелочь, а приятно. Для этого нужно увеличить разрядку в обеих строках, но это и так неплохая идея. Аккуратно делаю, следя за тем, чтобы все выстроенные вертикали сохранились:

Перетекание И в А немного нарушилось — ну, значит не судьба. Отступ между строками пришлось на 1 пиксель уменьшить, сломав исходную затею с тем, чтобы это был ровно размер горизонтального штриха. Но кто ж это заметит?

Теперь буквы стоят нормально, но всё вместе выглядит дырявенько, да и непонятно, что практика-то? Добавляю надписи «×2» и «и сертификаты с отличием», а заодно ставлю сердечко из обложки курса на фон. Выравниваю надписи на глазок по среднему штриху К:

Готово:

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

А на курс «Пользовательский интерфейс и представление информации» с усиленной практикой и сертификатами с отличием не забудьте прийти!

Почти, но не совсем

Илья Бирман — Tue, 30 Aug 2016 15:14:56 +0500

Илья Бирман:

Как можно поставить слово «Март» почти по центру макета, но не совсем?

Как можно почти попасть вертикалью, но не совсем?

Как можно почти попасть правым столбиком фоток по высоте в левый, но не совсем?

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

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

Синие кнопки стоят почти напротив друг друга:

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

Надписи почти выровнялись левыми краями:

Почти, но не совсем. Нужно или выровнять, или, наоборот, поставить белую надпись по центру иллюстрации.

У стрелок вправо угол почти равен 90°:

Почти, но не совсем. Нужно или сделать ровно 90°, или разогнуть ещё сильнее.

Заголовки «Адрес», «Режим работы», «Телефон» почти такого же кегля, как и текст под ними:

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

Тут расстояние между первым и вторым блоком текста почти равно расстоянию между строками текста:

Почти, но не совсем. Нужно или увеличить, или сравнять, иначе кажется что интерлиньяж съехал случайно.

Надпись «Ручная работа» вписана почти в круг:

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

Высота поля ввода почти совпала с высотой кнопок:

Почти, но не совсем. Нужно или сравнять, или увеличить разницу.

На этом макете используются два почти одинаковых цвета:

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

Правило: или совсем, или совсем не, но без почти.

Блоги: заметки с тегом делай ровно

Обложка новости про усиление практики на курсе

Почти, но не совсем