Illustrator: нечеткие значки при экспорте в PNG

У меня есть векторный файл, который содержит много объектов. Один из них прикреплен ниже. Верх оригинальный, кристально чистый / идеальный пиксель. Но я хочу меньшего размера (размеры не по размеру файла). Исходные изображения имеют размер 64x64, и все файлы PNG изначально идеально подходят для пикселей.

Но всякий раз, когда я экспортирую более мелкие объекты, они всегда размыты/нечетки/нерезки. Я получаю этот результат со всеми видами объектов и файлов. Как они экспортируют эти векторы с кристально чистым видом?

Образец:

Образец

Первый от оригинального разработчика, который экспортировал все векторы как 64x64. Второй мой и экспортирован в формате PNG из того же векторного файла размером 20x20/24x24.

Я создал 72dpi@24x24 и 72dpi@20x20 даже 72dpi@16x16. Что бы я ни делал, я всегда получаю это нечеткое нечеткое/размытое изображение.

Вы экспортируете в маленькие пиксели, что в сочетании с алиасингом дает вам размытие, на самом деле вы мало что можете с этим поделать... вот почему вам обычно нужно создавать маленькие значки с их предполагаемым размером (т.е. почему вы увидите значки с разными версиями 16x16 и 32x32)
Смотрите мой ответ на Экспорт из SVG в PNG с AI
Я получил это прямо сейчас. Я постараюсь сделать другую версию, чтобы соответствовать. Спасибо. Я также оценю вариант SVG.

Ответы (2)

Один из методов, который вы можете использовать, — это использовать Photoshop для изменения масштаба значка размером 64 x 64 пикселя. Если вы используете метод «бикубической резкости» при передискретизации, результаты будут выглядеть чуть более четкими, и будет сохранено больше деталей, особенно там, где есть тонкие линии. Разница, конечно, невелика, но этого может быть достаточно.

Пример метода «бикубической резкости»

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

Что вы можете попробовать

  • используйте версию PNG 64x64 и уменьшите ее масштаб в коде CSS
  • при создании файлов PNG меньшего размера поэкспериментируйте с настройкой «Art/Type Optimized» в диалоговом окне «Сохранить для Интернета».
  • переключитесь на использование значков SVG, которые являются векторным форматом и могут отображаться лучше
Мне интересно, поддерживает ли браузер SVG. Я буду копаться в этом. SVG может быть решением, или я создам другую версию, как сказал @Cai.
Да, это один из этих вариантов. Или сделайте размер вектора точно таким же, как и предполагаемый размер PNG. Посмотрите, что работает лучше всего. Если вы считаете, что это отвечает на ваш вопрос, попробуйте щелкнуть значок проверки и стрелку вверх рядом с моим ответом выше. Спасибо!