Как сохранить маленькие файлы png (иконки) с минимальной пикселизацией?

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

Значки должны быть размером 24 x 24 пикселя и сохранены в формате PNG. Я создал значки в Photoshop, установил разрешение на 300 (чтобы сделать изображение максимально четким и четким) и сохранил каждый файл в формате PNG. Вот пример того, как они получились:Пример значка

У меня сложилось впечатление, что при разрешении 24x24 пикселя он не станет менее пиксельным, чем этот. Я ошибаюсь в этом? Есть ли способ экспортировать эти крошечные файлы изображений, чтобы они были максимально непиксельными?

Как я могу сохранить эти файлы и получить наилучший результат?

Вы можете установить разрешение на 5 габиллионов, и изображение 24x24 px всегда будет иметь размер 24x24 px с тем же, идентичным размером файла. Похоже, они возражают против «сглаживания», которое смягчает края. Также обратите внимание, что если веб-страница/приложение масштабирует изображение ВВЕРХ (читай: сетчатка), то каждое несовершенство также увеличивается. Эта биржа полна вопросов с тегами SVG PNG ICON.

Ответы (2)

Это не пикселизация, это размытие. Ваш значок размыт.

Проблема в том, что вы сделали их в другом разрешении и уменьшили масштаб, а программа сделала ресемплинг. Чтобы имитировать соответствующую пропорцию штриха, он применил некоторое сглаживание.

Вам нужно сделать их:

а) идеальный пиксель в точном разрешении.

б) сделать их в векторах, например svg.

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

г) Попробуйте применить некоторую резкость . Может сработать, но они будут не такими чистыми, как варианты а и б.

Дополнительные примечания.

300 dpi, которые на самом деле не dpi, а ppi, не имеют ничего общего с иконкой для Интернета. Просто используйте простые пиксели в качестве размера вашего документа.

Отредактировано:

Крупный план вашей иконки:

Пиксельная иконка должна выглядеть примерно так:

Вот иконка размером 24x24 px: по сравнению с

Спасибо за ответ, но я на самом деле создал их идеально с точностью до пикселя с точным разрешением. Кроме того, разработчики сказали мне, что они могут использовать только файлы PNG, а не SVG, TIF и т. д.
Нет, вы этого не сделали. Позвольте мне сделать несколько образцов изображений, и я отредактирую пост.
@Rafael SVG не является гарантированным решением для таких небольших размеров, кстати - вам все равно нужно убедиться, что вывод будет идеальным для пикселей. Это выполнимо, но добавляет еще один уровень сложности.
Я передискретизировал их, используя сглаживание по вашему предложению, и это ОЧЕНЬ помогло - спасибо. Ваш совет в сочетании с тем, что опубликовал @cockypup, кажется, решил проблему. Большое спасибо за Вашу помощь!!!

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

Я бы посоветовал установить размеры вашего холста на 24 x 24 пикселя и увеличить масштаб настолько, чтобы вы могли видеть пиксельную сетку. Затем подтолкните и/или измените размер значков, пока они не выровняются с определенными пикселями. Это сведет к минимуму сглаживание прямоугольных форм. Однако мало что можно сделать с крошечными кругами. Будет сглаживание, хотите вы того или нет.

Я обвел то, что указывает на несоосность. Если прямоугольная фигура выровнена по пиксельной сетке, а ее обводка и ширина имеют идеальные размеры в пикселях, то цвета с обеих сторон должны быть одинаковыми. На самом деле цвет должен быть сплошным, а не 3-мя разными оттенками одного цвета.

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

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

В этом вопросе вы можете взглянуть на мое руководство по ОКР по совершенствованию пикселей . Хотя в ответе предлагается использовать AI, а не PS, некоторые комментарии также применимы.

Что следует учитывать:

  • Штрихи могут быть не выровнены по пиксельной сетке. Они могут быть сосредоточены на нем и, следовательно, визуализируются со сглаживанием. Попробуйте выровнять штрихи внутри или снаружи прямоугольников.
  • С помощью штрихов может быть не полный пиксель.
  • У прямоугольников могут быть закругленные углы.
  • Прямоугольники могут быть слегка наклонены. Маловероятно, но изменение цвета в левой части меньшего прямоугольника предполагает, что что-то не так.

Одна последняя вещь. Ваш комментарий о 300dpi меня смущает. Если вы создаете изображение, которое будет отображаться на экране размером 24 x 24 пикселя, говорить о его разрешении не имеет смысла. Я говорю об этой теме в этом ответе .

СПАСИБО!!! Хотел бы я дать вам более одного голоса - обе ваши ссылки очень хорошо объяснены.
Пожалуйста. Просто отплатите, ответив на чей-то вопрос когда-нибудь :)
Я заплачу вперед. :) Я просто хочу убедиться, что понимаю: 1. Документ = RGB 2. Флажок «Выровнять по пиксельной сетке» отмечен 3. Выбран центр квадрата в окне «Преобразование», чтобы фигуры не размещались в дробных пикселях .(?) 4. Старайтесь не использовать дробные пиксели, за исключением закругленных форм 5. Используйте предварительный просмотр пикселей 6. Сохраните изображение в 2-кратном размере, затем укажите исходный размер на веб-странице (хотя не уверен, что это будет работать в программном обеспечении) . Это верно? Еще раз спасибо, вы лучшие!
Правильный. Комментарий 6 предназначался для изображений, которые будут использоваться в Интернете. Как вы упомянули, это может быть неприменимо в вашем случае.
Как сохранить маленькие файлы png (иконки) с минимальной пикселизацией?
СпросиСетьПолитика конфиденциальности1y, 2v