{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Ильи Бирмана: заметки с тегом делай ровно",
    "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.",
    "_rss_language": "ru",
    "_itunes_email": "ilyabirman@ilyabirman.ru",
    "_itunes_categories_xml": "<itunes:category text=\"Arts\"><itunes:category text=\"Design\" \/><\/itunes:category>\r\n<itunes:category text=\"Society &amp; Culture\"><itunes:category text=\"Personal Journals\" \/><\/itunes:category>\r\n<itunes:category text=\"Technology\" \/>\r\n",
    "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/delay-rovno\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/delay-rovno\/json\/",
    "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764",
    "authors": [
        {
            "name": "Илья Бирман",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/",
            "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764"
        }
    ],
    "items": [
        {
            "id": "6143",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/course-ui-practice-cover\/",
            "title": "Обложка новости про усиление практики на курсе",
            "content_html": "<p>К недавней новости про <a href=\"http:\/\/bureau.ru\/news\/2023\/ui-online-practice-boost\/\">усиление практики на курсе<\/a> я нарисовал нехитрую обложку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-final@2x.png\" width=\"480\" height=\"240\" alt=\"\" \/>\n<\/div>\n<p>Обложка нужна просто чтобы была хоть какая-то картинка для соцсетей, но при этом нет смысла тратить силы на дизайн кастомной графики. Надо сделать чё-то нормальное по-быстрому.<\/p>\n<p>Кажется, что у меня просто написано слово «практика» с переносом.<\/p>\n<p>На самом деле, если просто написать слово, получится так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-initial@2x.png\" width=\"457\" height=\"408\" alt=\"\" \/>\n<\/div>\n<p>Строки встают так далеко друг от друга, потому что шрифт обычно изначально проектируют для набора полноценного текста. Вот смотрите, как будет выглядеть набор полноценного текста:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-font-example@2x.png\" width=\"460\" height=\"348\" alt=\"\" \/>\n<\/div>\n<p>То есть со шрифтом всё нормально, но для моей задачи такой отступ выглядит нелепо. Подтягиваем строки друг к другу. Я подтянул так, чтобы расстояние между строками было такое, как толщина горизонтального штриха в этом шрифте:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-tight-explanation@2x.png\" width=\"457\" height=\"260\" alt=\"\" \/>\n<\/div>\n<p>Получилось так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-tight@2x.png\" width=\"457\" height=\"260\" alt=\"\" \/>\n<\/div>\n<p>Дальше мне захотелось упереть букву П левым верхним углом в угол самой плашки. Но при таком крупном наборе видно, что крыша буквы Т торчит левее буквы П в предыдущей строке. В шрифте специально делают так — это называется оптическими компенсациями. Если бы их не было, при взгляде издалека наоборот казалось бы, что Т уехала правее. Но мы-то тут не издалека смотрим, а под микроскопом. Поэтому поставим ровно, ну и упрём в левый край:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-left-aligned@2x.png\" width=\"457\" height=\"260\" alt=\"\" \/>\n<\/div>\n<p>Сверху, справа и снизу тоже хочется упереть:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-cropped@2x.png\" width=\"439\" height=\"241\" alt=\"\" \/>\n<\/div>\n<p>Теперь напрягает, что крыша буквы Т <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/almost\/\">почти, но не совсем<\/a> совпадает по ширине с П, а вертикальный штрих от И проходит мимо Р, хотя мог бы и попадать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-misalignments-explanation@2x.png\" width=\"439\" height=\"241\" alt=\"\" \/>\n<\/div>\n<p>Букве Т надо крышу нарисовать правильной длины, ну и букву И подвинуть правее. Диагонали от И и А могли бы плавнее друг в друга переходить, а потом от К и А. Вообще, заметно, что чем дальше от начала строки, тем сильнее расхождение, поэтому хочется просто нижнюю строку разредить до более плавного попадания:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-almost-aligned@2x.png\" width=\"439\" height=\"241\" alt=\"\" \/>\n<\/div>\n<p>Теперь замечаю, что левый штрих от К почти, но не совсем проходит через середину А:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-ak-explanation@2x.png\" width=\"439\" height=\"241\" alt=\"\" \/>\n<\/div>\n<p>Двигаю К чуток левее, чтобы попадало чётко:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-aligned-explanation@2x.png\" width=\"439\" height=\"241\" alt=\"\" \/>\n<\/div>\n<p>Получается так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-aligned@2x.png\" width=\"439\" height=\"241\" alt=\"\" \/>\n<\/div>\n<p>Замечаю, что картинка получилась размера 439×241. Как минимум надо сделать 440×240, чтобы совесть была чиста, но я решаю сделать 480×240 — тогда получится прямоугольник пропорций 2:1. Мелочь, а приятно. Для этого нужно увеличить разрядку в обеих строках, но это и так <a href=\"https:\/\/www.artlebedev.ru\/kovodstvo\/sections\/142\/\">неплохая идея<\/a>. Аккуратно делаю, следя за тем, чтобы все выстроенные вертикали сохранились:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-wider@2x.png\" width=\"480\" height=\"240\" alt=\"\" \/>\n<\/div>\n<p>Перетекание И в А немного нарушилось — ну, значит не судьба. Отступ между строками пришлось на 1 пиксель уменьшить, сломав исходную затею с тем, чтобы это был ровно размер горизонтального штриха. Но кто ж это заметит?<\/p>\n<p>Теперь буквы стоят нормально, но всё вместе выглядит дырявенько, да и непонятно, что практика-то? Добавляю надписи «×2» и «и сертификаты с отличием», а заодно ставлю сердечко из обложки курса на фон. Выравниваю надписи на глазок по среднему штриху К:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-decorated@2x.png\" width=\"480\" height=\"240\" alt=\"\" \/>\n<\/div>\n<p>Готово:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-final@2x.png\" width=\"480\" height=\"240\" alt=\"\" \/>\n<\/div>\n<p>Если вы работаете дизайнером, такие вещи вы должны делать просто на автопилоте и даже не считать, что вы что-то задизайнили. Это типа как уборщице поставить ровно стулья в кафе после ухода гостя. Любое конкретное решение на каждом из шагов может быть другим, но важно, чтобы вам было не всё равно.<\/p>\n<p>А на курс <a href=\"https:\/\/bureau.ru\/courses\/ui-online\/\" class=\"nu\">«<u>Пользовательский интерфейс и представление информации<\/u>»<\/a> с усиленной практикой и сертификатами с отличием не забудьте прийти!<\/p>\n",
            "summary": "К недавней новости про усиление практики на курсе я нарисовал нехитрую обложку...",
            "date_published": "2023-11-08T23:08:22+05:00",
            "date_modified": "2023-11-09T00:12:38+05:00",
            "tags": [
                "вёрстка",
                "делай ровно",
                "дизайн",
                "курсы",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-initial@2x-1.png",
            "_date_published_rfc2822": "Wed, 08 Nov 2023 23:08:22 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6143",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-initial@2x-1.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-final@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-initial@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-font-example@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-tight-explanation@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-tight@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-left-aligned@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-cropped@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-misalignments-explanation@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-almost-aligned@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-ak-explanation@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-aligned-explanation@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-aligned@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-wider@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/practice-decorated@2x.png"
                ]
            }
        },
        {
            "id": "3938",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/almost\/",
            "title": "Почти, но не совсем",
            "content_html": "<p>Как можно поставить слово «Март» почти по центру макета, но не совсем?<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-centered.jpg\" width=\"571\" height=\"368\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Как можно почти попасть вертикалью, но не совсем?<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-columns.jpg\" width=\"478\" height=\"490\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Как можно почти попасть правым столбиком фоток по высоте в левый, но не совсем?<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-photos.jpg\" width=\"491\" height=\"383\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Последние два примера у меня почти одинаковой ширины, но не совсем — специально не стал исправлять.<\/p>\n<p>«Почти, но не совсем» встречается в большинстве макетов начинающих дизайнеров — такие работы выглядят неряшливо. Разумеется, речь здесь не об оптических компенсациях.<\/p>\n<p>Синие кнопки стоят почти напротив друг друга:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-valign.jpg\" width=\"637\" height=\"562\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно или выровнять идеально, или, наоборот, развязать ещё сильнее, чтобы было ясно, что так и имелось в виду.<\/p>\n<p>Надписи почти выровнялись левыми краями:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-bookshare.jpg\" width=\"1024\" height=\"497\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно или выровнять, или, наоборот, поставить белую надпись по центру иллюстрации.<\/p>\n<p>У стрелок вправо угол почти равен 90°:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-90@2x.png\" width=\"375\" height=\"293\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно или сделать ровно 90°, или разогнуть ещё сильнее.<\/p>\n<p>Заголовки «Адрес», «Режим работы», «Телефон» почти такого же кегля, как и текст под ними:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-kegel.png\" width=\"941\" height=\"271\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно или сделать заголовки такого же кегля как текст (и выделить жирным, например), или, наоборот, увеличить ещё сильнее, чтобы не оставалось сомнений.<\/p>\n<p>Тут расстояние между первым и вторым блоком текста почти равно расстоянию между строками текста:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-line-height.png\" width=\"289\" height=\"215\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно или увеличить, или сравнять, иначе кажется что интерлиньяж съехал случайно.<\/p>\n<p>Надпись «Ручная работа» вписана почти в круг:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-oval.png\" width=\"461\" height=\"179\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно или сделать честный круг, или сильнее сплющить овал, а то кажется, что дизайнер не смог сделать выбор.<br \/>\n<br \/>\nВысота поля ввода почти совпала с высотой кнопок:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-field-height.png\" width=\"678\" height=\"362\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно или сравнять, или увеличить разницу.<br \/>\n<br \/>\nНа этом макете используются два почти одинаковых цвета:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-green.png\" width=\"622\" height=\"508\" alt=\"Почти, но не совсем\" \/>\n<\/div>\n<p>Почти, но не совсем. Нужно определиться и сделать цвета или одинаковыми, или разными.<\/p>\n<p><b>Правило:<\/b> или совсем, или совсем не, но без почти.<\/p>\n",
            "summary": "Как можно поставить слово «Март» почти по центру макета, но не совсем?",
            "date_published": "2016-08-30T15:14:56+05:00",
            "date_modified": "2023-11-08T23:12:06+05:00",
            "tags": [
                "делай ровно",
                "дизайн",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-centered.jpg",
            "_date_published_rfc2822": "Tue, 30 Aug 2016 15:14:56 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "3938",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-centered.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-columns.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-photos.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-valign.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-bookshare.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-90@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-kegel.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-line-height.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-oval.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-field-height.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/almost-green.png"
                ]
            }
        }
    ],
    "_e2_version": 4269,
    "_e2_ua_string": "Aegea 12.0a (v4269e)"
}