Как оптимизировать мои пиктограммы для экранов Retina?

Удивительно, когда я сохранил свои пиктограммы для Интернета (из Illustrator):
они не такие чистые, как ожидалось => полностью размыты.

Вот пример с моего смартфона Retina:

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

И исходный файл .ai:

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

Разница очевидна...

Читая в Интернете, я прочитал, что экраны Retina предполагают, что каждый элемент будет построен с определенным разрешением.

Предполагая, что мои элементы сделаны с использованием векторов (спасибо Illustrator), как можно было бы эффективно подогнать их к моему дисплею Retina? Например, iPhone 6.

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

Ответы (2)

Я превращаю свои векторные изображения и логотипы в шрифт (или шрифты). Возьмите ваши файлы .ai (после того, как вы их очистите, составите путь и обрежете окно просмотра) и экспортируйте их как .svg. Затем используйте приложение icomoon для преобразования в шрифт. Это будет отображаться в любом размере, в любом разрешении.

https://icomoon.io/app/#/выбрать

Узнайте больше: http://www.carbonsilk.com/development/convert-images-to-web-font-icons/

Вам нужно экспортировать свою графику в двойном разрешении, скажем, если для стандартного экрана вам нужно изображение в разрешении 64x64, вам нужна его копия 128x128 (или даже не копия), которая будет позже обработана на экранах retina/high-dpi . Но разные среды могут обрабатывать их по-разному, например, в HTML/CSS вам нужны дополнительные медиа-запросы для каждого типа экрана, чтобы он правильно отображался на каждом экране.

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

Кроме того, если единственным вариантом использования является Интернет, вы можете посмотреть, что может предложить SVG.

Как оптимизировать мои пиктограммы для экранов Retina?
СпросиСетьПолитика конфиденциальности1y, 0v