Экспорт из SVG в PNG с помощью AI

При экспорте значка SVG в PNG я пытаюсь сохранить качество изображения, не теряя при этом его размер (16 x 16 пикселей). Я предпринимал попытки много раз, но еще не создал изображение значка, которое сохранило бы хорошее качество. Каждая попытка дает очень размытое изображение при разрешении экрана 72 ppi. Когда я увеличиваю разрешение до 300 пикселей на дюйм, изображение становится четким, но размеры значка теперь составляют 67 x 67 пикселей. Есть ли способ заблокировать размеры при более высоком разрешении экрана. Я попытался сделать это с помощью обычного экспорта, а также попытался установить значения в монтажной области.

Вы уменьшаете SVG перед попыткой сохранить в формате PNG? -- это ваш лучший выбор.
SVG уже имеет размер 16px x 16x, прежде чем я экспортирую его в PNG.

Ответы (2)

Нет, вы что-то неправильно поняли. Нет никакой разницы между изображением 16x16 пикселей с разрешением 300 DPI и изображением 16x16 пикселей с разрешением 72 DPI. Значение DPI просто никак не меняет четкость изображения! 16 пикселей - это 16 пикселей, пиксель - это образец, образец один и тот же независимо от . В этом смысле нет такого понятия, как более высокое разрешение экрана. Выполнение того, о чем вы просите, абсолютно ничего не даст.

Только у устройств есть свойство разрешения изображения, которого нет. Для изображений значение DPI является частью метаданных. Это все равно, что разместить на изображении заметку о том, что это размер, который я хотел бы вывести на вашем устройстве для печати, например, на принтере. Общеизвестно, что дисплеи даже не начинают пытаться учитывать это.

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

Как вы уже поняли, наличие векторного файла vectors не означает бесконечно масштабируемого содержимого. Особенно маленькие значки требуют ручной настройки содержимого, чтобы оно соответствовало пиксельной сетке. Вы можете попробовать включить привязку к пикселям для своего искусства, настроив точки *.

В качестве альтернативы, более близкого к тому, что, по вашему мнению, происходит, вы можете попробовать другой метод фильтрации. Возможно, что переключение на оптимизированный рендеринг типа или оконный фильтр Sinc (Lanczos), см. этот пост . Однако, поскольку ваше изображение очень маленькое, я сомневаюсь, что это поможет вам каким-либо практическим образом. Именно по этой причине намекают на шрифты, поскольку на самом деле нет никакого способа обойти тот факт, что точки настройки — лучшая стратегия.

* Или увеличить масштаб, включить привязку к пикселям и уменьшить масштаб для быстрого и грязного подхода. В качестве альтернативы вы можете установить сетку размером в пиксель/полпикселя и использовать jooSnapToDocumentGrid.jsx в точках, которые вы считаете наиболее проблематичными.

Спасибо за ответ joojaa. Я ввожу только то, что я сделал в Adobe Illustrator. Я уже выполнил всю ручную настройку своих значков на сетке размером 16 x 16 пикселей. Ничего просто так не уменьшается. Я создал все свои SVG с размером сетки, в котором они будут использоваться. Что касается экспортированных, а затем просмотренных PNG-файлов в экспортированном размере 16px x 16px с разрешением 72 PPI или 300 PPI. Они существенно отличаются. однако при просмотре размеров файла в проводнике размеры изменились в зависимости от размера разрешения.
@Bgreen Конечно, большие изображения выглядят иначе: изображение 16x16 пикселей с разрешением 300 точек на дюйм такое же, как изображение 16x16 пикселей с разрешением 72 точки на дюйм, но это не то, что у вас есть. То, что я говорю, правда, даже если это трудно принять.
Это не трудно принять. Однако, если я вставлю изображения png каждого из них, которые показывают одинаковые размеры 16 x 16 пикселей, в Word, PowerPoint, Visio, даже в Illustrator и т. д. Качество каждого из них очевидно. размер файла png вырос с 16 x 16 до примерно 67 x 67. Чтобы я мог использовать файл в определенных приложениях, значок должен быть не больше 16 x 16. Мне просто нужно, чтобы качество было хорошим, PNG.
@Bgreen да, но у вас меньше образцов, поэтому качество не может быть таким хорошим, если ваша графика не будет лучше соответствовать образцам. Вы можете попробовать разные приспособления, но это все равно не будет иметь большого значения. Если вы ниже предела Найквиста, значит, так оно и есть, и нет никакого способа обойти это.
@Bgreen, а как часто вы просматриваете изображения в размере 1:1 в Illustrator, Word или PowerPoint? Powerpoint по умолчанию и слово увеличены за пределы одного пикселя на одну единицу. Нет никакого способа проверить это. В иллюстраторе вы можете увидеть правильный размер, если вы нажмете 100% масштабирование.
Я хочу сказать, что качество достаточно очевидно для любого, кто просматривает значок с уровнем масштабирования 100% (без увеличения). Качество значка достаточно плохое, чтобы гарантировать определенный уровень корректирующих действий по очистке значка 16 x 16, чтобы сделать его более привлекательным для пользователя приложения.
Итак, если вы в иллюстраторе просматриваете приемлемое изображение с разрешением 300 dpi, вставленное в иллюстратор, И (очень важно), вы увеличиваете масштаб на 100%, и ваше изображение действительно имеет ширину 16 пикселей на холсте. Затем вы можете улучшить ситуацию, немного изменив фильтрацию, если нет, то без кубиков. Если вы делаете это на словах, то вы лжете себе. Но тогда ваше векторное изображение должно выглядеть дерьмово при этом 100% увеличении также перед экспортом. ЕСЛИ не пытайтесь изменить сглаживание на оптимизированный тип.
@Bgreen это все еще не имеет ничего общего с DPI, просто с поведением.

ИЦП не имеет значения

Как говорит Джуджаа , PPI не имеет значения. Само значение PPI не имеет никакого значения, важны только размеры в пикселях. изображение 16 × 16 пикселей с разрешением 300 PPI и 72 PPI — это одно и то же. Если вы работаете в Illustrator и экспортируете на экран, всегда экспортируйте с разрешением 72 PPI (при условии, что ваш документ имеет предполагаемый размер), но на самом деле это не имеет ничего общего со значением PPI, назначенным выходному файлу, это просто ярлык для вывода это в правильном размере.

Проблема в том, что ваш SVG не предназначен для отображения в разрешении 16 × 16 пикселей. Векторы не имеют собственного размера, поэтому в большинстве случаев это не имеет значения, вы можете масштабировать столько, сколько хотите. Проблема возникает, когда ваш вектор больше не является вектором, т.е. состоит из пикселей.

Пример...

Возьмите эту иконку бумбокса в формате SVG. Исходный вектор слева выглядит великолепно. Посмотрите то же самое в разрешении 16×16 пикселей, и это выглядит ужасно. Вы можете видеть, что это потому, что пути не совпадают с пикселями. Слишком много информации можно увидеть в количестве доступных пикселей.

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

Изображение 1: Исходный вектор (слева), превью 16×16 пикселей (справа)

Решение состоит в том, чтобы разработать значок специально для размера, в котором он будет просматриваться. Снова возьмите ту же иконку и перерисуйте контуры так, чтобы они совпадали с пиксельной сеткой, и у вас получилась хорошая чистая иконка (по крайней мере, чистая, говорящий /круг, возможно, нуждается в дополнительной настройке):

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

Изображение 2: исходный вектор предварительного просмотра 16 × 16 пикселей (слева), скорректированные пути в соответствии с пиксельной сеткой (справа)

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

Связанное чтение:

Экспорт из SVG в PNG с помощью AI
СпросиСетьПолитика конфиденциальности1y, 0v