Expression Design: почему мое изображение размыто?

Я пытаюсь создать веб-икону, используя дизайн выражений.

Его размер 45x45 пикселей, и я установил PPI на 96, экспортируя в .PNG со сглаживанием и прозрачностью.

Он не выглядит четким, когда я смотрю на него на своей странице, и выглядит довольно размытым, когда просматриваю его на своем мобильном телефоне.

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

Я включил следующие параметры:

  • Привязать к пикселям
  • Привязка к точкам
  • Привязать к направляющим

Вот экспортированная иконка:

введите описание изображения здесь

Это довольно просто, но если вы посмотрите на края символа фунта, они размыты; тем более на мобильном устройстве.

Есть ли что-нибудь еще, что я должен сделать, чтобы получить четкую иконку?

Любые закругленные углы никогда не сделают визуализацию с точностью до пикселя.
@Dominic Для сетчатки вы должны удвоить размеры пикселей, а не ppi. Например, 500x400px при 72ppi — это тот же размер, что и 500x400px при 150ppi. Для сетчатки вам понадобится 1000x800 пикселей, так как он имеет субпиксельное отображение. PPI всегда контролируется фактическим экраном. Подумайте о 42-дюймовом HD и 23-дюймовом HD — те же пиксели, разный реальный размер или «пиксели на дюйм». Если вы подойдете очень близко и подсчитаете фактические пиксели дисплея на экране, вы получите реальный PPI, который, очевидно, зависит от устройства.
@Dominic Я показываю его в отформатированном размере .. то есть 45 x 45 пикселей. Кроме того, это может выглядеть хорошо выше, но я хочу, чтобы это выглядело как бритва, а не просто хорошо :)
@Джон, это интересно. Вы говорите, что для того, чтобы он отображался четко на сетчатке, я должен удвоить его фактический размер, а затем отобразить его, уменьшив его вдвое?
Кстати, я думаю, что то, о чем этот парень говорит в этом видео, в основном моя проблема... чтобы оно выглядело четким, мне нужно вручную настроить некоторые методы сглаживания andcraft.com/videos/pixel-hinting- Векторы в фотошопе
@DavidMasters Это правильно. Однако следует отметить, что плотность пикселей зависит от устройства. Вот хороший справочник со списком некоторых плотностей устройств в связи с инициированием медиа-запроса плотности. Теоретически для максимального отображения вы должны умножить размер изображения на число плотности.

Ответы (2)

Ваша страница отображает именно 45x45? Если нет, браузер пересчитывает пиксели, и это приводит к размытости.

Сам я никогда не использовал Expression, но обычно при уменьшении изображений во всех программах будет размытие, так как программа должна пересчитывать пиксели. Если вам нужно изменить размер изображения, рекомендуется всегда делать это наполовину, а не на четверть. Это упрощает пересчет для программы и дает более четкие результаты.

Кроме того, PPI не важен для экрана, так как он всегда будет отображать точное количество пикселей в соответствии с размерами изображения, независимо от плотности пикселей на дюйм (PPI), которую вы установили.

Я принял этот ответ, но за ваш комментарий об удвоении размера. Я протестировал его, используя ** только экран @media и (-webkit-min-device-pixel-ratio: 2), (минимальное разрешение: 192 dpi) **, и он отлично работает.
К сожалению, мобильные устройства часто игнорируют настройки и масштабируют изображения. Они делают это по разным причинам, поэтому ваш логотип, вероятно, растягивается или сжимается с использованием быстрого алгоритма на устройстве (вместо алгоритма, ориентированного на качество). Имейте в виду, что элементы с префиксом -webkit не поддерживаются повсеместно.

Хороший способ гарантировать, что ваши значки будут отлично выглядеть на всех устройствах и, по крайней мере, хорошо сработал для меня, — это использование SVG и шрифтов значков. Вы можете использовать icomoon, чтобы создать свой собственный шрифт значка и импортировать свои собственные значки svg, а затем вызвать их в своем css с помощью @font-face, в Интернете есть множество руководств о том, как это сделать, и это относительно просто. Вот несколько мест, где можно посмотреть:

http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/

Также у smashing есть хорошая статья о том, почему наши значки или изображения могут не выглядеть четкими на других устройствах из-за их пикселей: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Expression Design: почему мое изображение размыто?
СпросиСетьПолитика конфиденциальности1y, 0v