Как экспортировать крошечные значки в Illustrator в PNG? [дубликат]

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

Я переделываю значки, которые будут использоваться в веб-приложении. Прежние значки были размещены на листе спрайтов PNG, а значки имели размер 16x16px.

В Illustrator я переделал значки с размером 16x16px, но когда я их экспортирую, они размыты.

Они уже размыты в моем файле PNG после экспорта.

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

Я действительно не знаю, что делать. Я пробовал меню экспорта для устройств, все... Я даже пытался сделать скриншот моего артборда Illustrator на 100%, но тогда вы теряете прозрачность.

Можно ли экспортировать их в формате SVG?
Вы, кажется, увеличили значки. Нельзя увеличивать растровые изображения, иначе они будут размытыми.

Ответы (3)

Если вы экспортируете в формат с маленькими пикселями, они будут размытыми при увеличении. Это совершенно нормально - и не очень хорошая идея.

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

Векторный формат, такой как SVG, будет иметь значение только в том случае, если ваш экран с высоким разрешением (например, Retina или аналогичный). Я бы рекомендовал создавать значки большего размера с учетом пиксельной сетки. Лучше всего кратно 16px (32, 64, 128). Даунскейлинг всегда проще, чем апскейлинг.

Я согласен со всем здесь, кроме комментария SVG. Экспорт в формате SVG (там, где это целесообразно) может дать преимущества в долгосрочной перспективе с точки зрения непредвиденных изменений. У меня были ситуации, когда нам нужно было изменить значки на более крупные размеры дисплея, и, зная, что мы уже использовали SVG, просто вносили редактирование CSS, а не генерировали и заменяли всю нашу библиотеку ресурсов значков. Есть и другие преимущества, но я думаю, что некоторые люди не замечают этого.
@biscuitstack Ну, вопрос был о спрайт-листе PNG и о том, как оптимизировать отображение. Так что SVG здесь не по теме. Пиксельная сетка/сглаживание также является проблемой для SVG, поэтому работа по очистке должна выполняться для обоих...
Понял. Я упомянул об этом, когда вы представили SVG с утверждением, что это будет иметь значение только в том случае, если ваш экран с высоким разрешением, и опасался, что будущие поисковые запросы Google поступят сюда и отклонят SVG в этой ситуации как относящуюся только к экранам с высоким DPI. Это было больше для разъяснений для других в будущем, но я немного зашел в тупик, поэтому приношу извинения.

Итак, ваше первое изображение спрайтов не размыто.

Если вы видите размытый вывод, это связано с тем, что вы используете масштабирование экрана (сетчатка и т. д.), и это масштабирование экрана увеличивает растровые изображения с помощью растяжения или передискретизации. Ваше экспортное искусство в порядке.

Таким образом, реальный вопрос, который нужно задать: «Как мне обращаться с искусством после того, как оно создано, чтобы избежать плохого результата». Ответ, как правило, «экспортировать векторы», но если вы не можете использовать векторы, вам нужно экспортировать несколько размеров пикселей и настроить целевое программное обеспечение на выбор ближайшего оптимального размера.

или попробуйте дать файлу более высокое разрешение после экспорта в иллюстратор, кстати, какую версию иллюстратора вы используете? Потому что в Adobe Illustrator CC они могут автоматически экспортировать файл PNG, и вы можете решить, какое разрешение изображения поставить

разрешение в этом случае не имеет значения, так как OP указал 16x16px
Как экспортировать крошечные значки в Illustrator в PNG? [дубликат]
СпросиСетьПолитика конфиденциальности1y, 0v