Как сделать crips и плавные иконки из скачанного png?

Вероятно, это повторяющийся вопрос, но я хочу, чтобы все pngзначки выглядели четкими и гладкими в приложении для Android. Как я могу сделать это в Photoshop?

У меня есть 50*50 px pngизображения, которые я хочу, чтобы они хорошо выглядели на мобильных устройствах. Но когда я уменьшаю pngизображение с помощью команды преобразования / или использую повторную выборку изображения с помощью техники бикубической резкости, все еще уменьшенное изображение по какой-то причине выглядит размытым на мобильном телефоне и имеет пикселизацию.

Как понизить разрешение png, чтобы оно хорошо смотрелось в мобильном приложении и во всех размерах? Мне действительно нужен векторный формат или он хорош только с png?

Хм... разве не в этом дело, вам просто нужны изображения большего размера?
какого размера они должны быть в приложении? Вы используете правильное разрешение dp?
Пожалуйста, предоставьте более подробную информацию и проверьте на наличие опечаток. Возможно ли, что у вас есть png 50x50 дюймов в формате ? разрешение dpi для начала? Если у вас есть только 50x50 пикселей и вы все еще хотите уменьшить (?), вы переходите от плохого к очень плохому. Какой размер вам нужен или нужен? Вы сами создаете приложение? Что документация предписывает для иконок? И как выглядят ваши начальные png? Они даже четкие и гладкие, или вы просите чудес? Я получил хорошие результаты от векторизации даже растровых изображений с низким разрешением; но это не ваш вопрос...
@MartinZaske DPI не имеет значения, просто пиксели

Ответы (4)

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

Смотрите, у браузеров на машинах с высокой плотностью есть проблема. Если они показывают изображения с соотношением 1 пиксель к 1 пикселю, то все изображения для устаревших веб-сайтов будут ужасно маленькими. Итак, что они делают, так это переопределяют размер вашего изображения и интерполируют больше пикселей. Теперь большинство этих браузеров будут отображать изображение именно в том размере, который вы укажете, если вы переопределите изображение для использования в css или с мета-атрибутом в заголовке, чтобы браузер знал, что делать. Это может не помочь, так как изображение на этих устройствах будет очень маленьким по сравнению с устройствами, которые не имеют такой плотной плотности пикселей.

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

Но ваш вариант использования немного непрозрачен в вопросе, трудно сказать. что-нибудь определенное.

ПРИМЕЧАНИЕ . PPI/DPI — это всего лишь отвлекающий маневр в этой истории. Важно только, чтобы у вас было достаточно пикселей. И объясните браузеру, что вы современный сайт.

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

Этот сайт Adobe может пролить свет на то, о чем я говорю: https://helpx.adobe.com/illustrator/how-to/pixel-perfect.html .

Поскольку исходный дизайн иконок был сделан с точностью до пикселя, не имеет значения, используете ли вы векторный файл или png (при условии, что вы не увеличиваете его, а уменьшаете).

Вы можете попробовать инструмент Image Trace в Illustrator и поэкспериментировать с настройками, пока не получите желаемую детализацию значков, а затем измените размер. Вектор — это самый надежный способ убедиться, что ваши проекты по-прежнему выглядят четкими в любом масштабе.

Сначала вы делаете изображение небольшого размера, например, 48*48 пикселей с разрешением 72ppi.

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

хотя это все равно будет размыто. У вас должно быть большое изображение, а затем сделайте его меньше;)