Создавайте векторные значки и экспортируйте их позже в формате PNG без сглаживания.

Я создал векторный файл (svg) , и теперь я хотел экспортировать его как файл PNG и PNG. Его следует использовать как на панели навигации. Поэтому я использую . Вот пример:66px x 66px44px x 44px22px x 22pxUIBarButtonItemInkscape

Значок со сглаживанием

Я обновился до Inkscape 0.91, чтобы отключить параметр сглаживания, но это не помогло. Я пробовал онлайн-конвертер, пытался просто уменьшить масштаб, экспортировал в EPS/PDF и импортировал в GIMP, но каждый раз у меня не получались четкие линии. Всегда присутствует сглаживание. Я читал об использовании таких инструментов, как ImageMagick, Ghostwriter и использую версию для командной строки, но здесь я должен задаться вопросом о том, как создавать свои значки. Это должно быть просто и не нужно программировать.

Итак, как лучше всего создавать векторные изображения и экспортировать их в формате PNG без сглаживания?

Можете ли вы опубликовать пример экспорта, который вас не удовлетворяет?
@Wrzlprmft: я отредактировал свой вопрос и привел пример.
если бы вы использовали иллюстратор, я бы посоветовал вам использовать выравнивание по пиксельной сетке, что сделало бы все пиксели идеальными без размытых краев. Но вы используете Inkscape. Честно говоря, для чего-то такого простого я бы просто использовал Photoshop. Нет необходимости в векторной графике в этой ситуации.
Вы пытались изменить размер изображения в Inkscape до нужного размера (например, 22x22px) и экспортировать его с соотношением сторон 1:1?
@EddieA.: Да, я думаю, что это был бы вариант, но у меня нет PS здесь. Преимущество использования векторной графики заключается в изменении их размера до любого размера, если размер изменится позже.
@PaoloGibellini: Нет, но я попробую в следующий раз и сообщу вам о результатах.

Ответы (1)

Эта проблема не имеет ничего общего с выбором программного обеспечения или его настроек, а связана с базовой математикой.

Если ваши выходные данные должны быть квадратными растровыми файлами, кратными 22, то исходный (векторный) файл и основные элементы должны просто делиться на 22.

Когда элементы горизонтальной линии в вашем дизайне составляют половину высоты соответствующих точек и выровнены по центру, вы создаете сценарий, в котором наименьшая возможная высота составляет 2 пикселя на строку. Это делает ваши точки 4px и создает минимальную высоту файла 4px X 7 (3 точки плюс верхнее и нижнее пространство), что дает 28px.

Я предлагаю вам создать сетку 22x22, расположить свой дизайн так, чтобы ни одна линия не перекрывала линии сетки, а затем масштабировать ее для других размеров. Объяснить, почему это не будет работать так, как вы это сделали, сложнее, чем просто начать заново с выходной сеткой нужного вам размера - вы «щелкнете» там, где ошиблись, и почему ваш файл никогда не даст вам то, что вы хотите.

Теперь я попробовал то, что вы сказали ( www26.zippyshare.com/v/pGm89LGJ/file.html ). Сначала я думал, что это сработает. Я сделал небольшую настройку, и теперь я получаю только сглаженные изображения.
@testing Хорошая работа над svg! Я экспортировал версию 22x22, и она была прекрасно четкой. Убедитесь, что в диалоговом окне экспорта вы выбрали «Страница» или «Рисунок», чтобы обеспечить экспорт всей области 22x22, а размер растрового изображения экспорта также равен 22x22. Вы обнаружите, что разрешение составляет 90 точек на дюйм.
ХОРОШО. Значит, единственная разница была в настройках экспорта 90 dpi? Теперь это работает. Большое спасибо!
Вообще-то, нет. Inkscape всегда хочет экспортировать с разрешением 90 точек на дюйм, но на самом деле это не то разрешение, которое вызывало сглаживание. Если вы измените выходное разрешение на любое другое, кроме 90 точек на дюйм, это изменит размеры вашего экспортированного растрового изображения. Если вы установите dpi на 72, результирующее растровое изображение будет 18x18. Если вы визуализируете сетку 18x18 в своем файле svg, вы увидите, где и почему вы получаете сглаженный вывод. Удвойте выходные размеры до 44x44, и вы увидите, что ваш dpi удвоится до 180.