Rose debug info
---------------

Array
(
    [1:n3901] => Array
        (
            [title] => Тоньше пикселя
            [relevance] => 21.998013503279
            [trace] => Array
                (
                    [keyword пиксел] => Array
                        (
                            [0] => 20
                        )

                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [42, 57, 63, 73, 82, 94]
                        )

                )

        )

    [1:n3266] => Array
        (
            [title] => Русское сокращение пикселей
            [relevance] => 21.49851012746
            [trace] => Array
                (
                    [keyword пиксел] => Array
                        (
                            [0] => 20
                        )

                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [3, 31]
                        )

                )

        )

    [1:n2212] => Array
        (
            [title] => О «ручном» рендеринге текста в Фотошопе
            [relevance] => 1.9980135032794
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [56, 131, 223, 266, 301, 330, 411, 426]
                        )

                )

        )

    [1:n4386] => Array
        (
            [title] => Зум на Маке
            [relevance] => 1.9980135032794
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [56, 92, 114]
                        )

                )

        )

    [1:n1798] => Array
        (
            [title] => Пара слов об уменьшении GIF’ов
            [relevance] => 1.9980135032794
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [12, 73, 98, 109]
                        )

                )

        )

    [1:n3231] => Array
        (
            [title] => Пунктирное и тонкое подчёркивание в Фотошопе
            [relevance] => 1.9980135032794
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [84, 95, 103, 111]
                        )

                )

        )

    [1:n876] => Array
        (
            [title] => Как я верстал C-Airlaid
            [relevance] => 1.9980135032794
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [301, 309, 320, 328, 335, 468, 490, 498, 510, 527]
                        )

                )

        )

    [1:n2383] => Array
        (
            [title] => Шаблон Сафари для рисования эскизов
            [relevance] => 1.9980135032794
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [97, 130, 182, 325]
                        )

                )

        )

    [1:n4759] => Array
        (
            [title] => Плохой и хороший верстальщики
            [relevance] => 1.9980135032794
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.9980135032794: match at positions [82, 119, 142, 166, 231, 236]
                        )

                )

        )

    [1:n2382] => Array
        (
            [title] => Эмси будущего
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [181, 193]
                        )

                )

        )

    [1:n3950] => Array
        (
            [title] => Шифт
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [6, 38]
                        )

                )

        )

    [1:n2707] => Array
        (
            [title] => О разработке Зерулса
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [235, 321]
                        )

                )

        )

    [1:n1730] => Array
        (
            [title] => Проигрыватель 1.1
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [50, 99]
                        )

                )

        )

    [1:n1703] => Array
        (
            [title] => Проигрыватель: управление мышью
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [546, 560]
                        )

                )

        )

    [1:n1702] => Array
        (
            [title] => Проигрыватель: Sneak Peek
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [27, 259]
                        )

                )

        )

    [1:n1701] => Array
        (
            [title] => О прослушивании музыки на компьютере
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [584, 596]
                        )

                )

        )

    [1:n2108] => Array
        (
            [title] => SBMobileScreenshotr
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [138, 165]
                        )

                )

        )

    [1:n2393] => Array
        (
            [title] => Математика в дизайне
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [228, 301]
                        )

                )

        )

    [1:n4640] => Array
        (
            [title] => Телеграм за неделю 7—13 августа 2017
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [365, 403]
                        )

                )

        )

    [1:n767] => Array
        (
            [title] => Обновил e2
            [relevance] => 1.4985101274595
            [trace] => Array
                (
                    [fulltext пиксел] => Array
                        (
                            [0] => 1.4985101274595: match at positions [235, 245]
                        )

                )

        )

)

Тоньше пикселя

Когда просишь сделать тоньше, в ответ нередко слышишь: «Да куда ж тоньше, она и так один пиксель». · Вот жирнющая чёрная линия толщиной в два пикселя: Это жирная линия толщиной в пиксель:

Русское сокращение пикселей

Блин, надоело сокращать пиксели как «пикс.», считай не сократил нифига. · Отныне вводится официальное русское сокращение пикселей — пк.

О «ручном» рендеринге текста в Фотошопе

Если мы пишем текст не на макете веб-страницы, где в реальной жизни его всё равно будет рендерить какой-нибудь браузер с помощью какой-нибудь операционной системы, а на графическом элементе, который будет использован «как есть», то стоит обратить внимание на то, как этот текст порендерен в конкретные пиксели. · Резкий режим оставляет меньше всего мыла, но он механически округляет всё до целых пикселей, ломая форму букв и толщины штрихов („й“ получилась жирнее других). · Этим мы воспользуемся для того, чтобы по вертикали буквы попали в целое число пикселей.

Зум на Маке

Дизайнеру всё время нужно рассмотреть, как пиксели устроены. · Пока я жил на неретине это было не очень, потому что пиксели слишком уж крупными получались даже при небольшом увеличении. · Важно убрать галочку Smooth images, чтобы пиксели оставались честными-квадратными.

Пара слов об уменьшении GIF’ов

Это значит, что вместо того, чтобы хранить цвета пикселей как RGB, он хранит в начале список используемых в изображении цветов (собственно, палитру), а потом уже записывает просто номера нужных цветов. · Если вы при этом уменьшаете её размер, то ему необходимо смешивать цвета нескольких пикселей. · Вот как выглядит картинка до уменьшения (пиксели в масштабе 2:1):

Пунктирное и тонкое подчёркивание в Фотошопе

0:22 Скопировать слой на 10 пикселей правее — Альт+Шифт+вправо. 0:23 Скопировать слой на 1 пиксель влево — Альт+влево. У меня специально три пикселя закрашено и два пусто, чтобы кратно 10 пикселям всё было, так быстрее делать, и выглядит хорошо.

Как я верстал C-Airlaid

airlaid-markup/bug-ie.gif Глюк в IE 6 при 1024 и 1600 пикселях Internet Explorer 6.0, при 1024 и 1600 пикселях airlaid-markup/bug-gecko.gif Глюк в Firefox 0.9.2 при 800 и 1024 пикселях

Шаблон Сафари для рисования эскизов

Дело в том, что на Маке у окон обычно нет «рамки»: сверху заголовок (возможно, с тулбаром), а под ним идёт от первого до последнего пикселя по горизонтали — внутренности окна. · Ну, ладно, на самом деле, если присмотреться, то можно обнаружить у окна рамку тоньше пикселя. · В общем, если в Фотошопе сверху влепить «шапку» от Сафари, забив на полупиксельный рамку (фотошоп всё равно рисует рамку вокруг канвы), то а) координата X любого элемента продолжит отсчитываться с нуля, а не с трёх, допустим, пикселей; б) можно будет легко изменять canvas size по вертикали, если страницу нужно сделать длинее, без необходимости сдвигать или перерисовывать какие-то нижние элементы.

Плохой и хороший верстальщики

Например, пока рисовали главную страницу, делали отступ между абзацами текста 9 пикселей. · Но в тексте на полях отступ всего 7 пикселей, и это так специально, потому что колонка у́же. А ещё в одном месте у дизайнера дрогнула рука, и между абзацами 12 пикселей.

Эмси будущего

Кстати, синий градиент — это просто синий прямоугольник высотой в несколько пикселей, которому с помощью Кор-имиджа был сделан вертикальный моушен-блюр ещё на несколько пикселей.

Шифт

Шифт — дизайнерская единица измерения, равная десяти пикселям. · Кэп напоминает, что это потому, что в Фотошопе с нажатым шифтом клавиатурные стрелки двигают всё с шагом в десять пикселей.

О разработке Зерулса

когда первый раз показывается выдача про что-то при вводе с клавиатуры, скроллинг на два пикселя ниже, чем надо, из-за чего отображается лишний разделитель над первым результатом поиска, IMG_0506.PNG (15-13); · пиксель, разделяющий сёрчбар и первую жёрдочку, слишком светлый, см __lightpixel_bug.png;

Проигрыватель 1.1

Также я попросил его добавить возможность вычислять нажатость шифта и контрола и узнавать, сколько пикселей нужно строке в ширину, чтобы вместиться в текстовое поле. · автоматическая подстройка размера правого поля (больше не нужно указывать его в пикселях в настройках);

Проигрыватель: управление мышью

snap_gap = 10 — за сколько пикселей до края экрана плейер будет к нему пытаться прилипнуть; gesture_insensitivity = 10 — на сколько пикселей можно сдвинуть мышь с нажатой правой кнопкой, чтобы это не считалось жестом;

Проигрыватель: Sneak Peek

Итак, задача состояла в том, чтобы создать такой интерфейс музыкального проигрывателя, чтобы он соответствовал всем уже высказанным мною пожеланиям по функциональности, и занимал на экране ровно ноль пикселей, которые могли бы быть использованы как-то более эффективно. · Тыкаешь куда-то, потом тыкаешь на 5 пикселей левее, — ничего не происходит, а ты хотел сместиться на чуточку назад.

О прослушивании музыки на компьютере

Зачем вы тратите мои пиксели понапрасну? Свой интерфейс я строил именно из этих соображений: ни одного пикселя не может быть потрачено зря.

SBMobileScreenshotr

Размер пикселя на телефоне намного меньше. Реальный размер экрана составляет где-то 70% (в линейном смысле) от этого (при условии, что вы смотрите на мониторе с более-менее обычным размером пикселя).

Математика в дизайне

Предел sin x / x в нуле равен единице, что, конечно, лучше, чем бесконечность но всё-таки хочется, чтобы в точке 0 значение было нулевым, иначе в начале окно вдруг окажется на сто (например) пикселей правее, чем было до начала анимации. · Можно, конечно, остановить их, когда они станут меньше пикселя, но намного проще чуть-чуть опустить гиперболу, чтобы она всё же достигла нуля через некоторое время: [1 / (x + 1) −

Телеграм за неделю 7—13 августа 2017

Раз контур скукожился на 10 пикселей, то и скругления надо сделать (20−10=10) десятипиксельными, тогда центр скругления остаётся в той же точке •, что и у внешнего контура: · Годится только, когда скругления надо сделать на 2-3 пикселя.

Обновил e2

Можно поставить ограничение на ширину картинки в заметке, например, 400 пикселей (у меня). Тогда если вы закачаете картинку шириной 500 пикселей, e2 её будет сжимать при отображении на странице.