Разработка иконок для устройств с разным PPI

У меня проблемы со значком PPI. Например, когда я делаю иконку для приложения для iPhone 6, я знаю, что иконка будет иметь разрешение 326 PPI. Но если я сделаю значок размером 256x256 пикселей, который можно будет использовать на iPhone, Android и в Интернете при разных разрешениях экрана, какой PPI я использую? Есть ли «формула» для расчета PPI на основе размера изображения?

Я хочу сделать один набор иконок для продажи, но не хочу создавать несколько одинаковых с разными PPI, чтобы продавать неоткрытые упаковки. Я использую Photoshop CC, так как еще не знаком с Illustrator.

Не уверен, что правильно вас понял! Когда вы разрабатываете дизайн для цифровых устройств, вы не используете DPI. Вы подготавливаете файл только в его «естественном» размере и в двойном размере для экранов Retina. Таким образом, ваша иконка будет иметь размер 250x250 для Интернета и 500x500 для iPhone.
Я верю, что понимаю. Тогда разрешение всегда будет 72 пикселя/дюйм?
Да. Вы используете DPI только для печати :) Эта ссылка может помочь: line25.com/tutorials/…
Это действительно очень помогло мне, спасибо. Если вы можете опубликовать ответ, я отмечу его правильно, пожалуйста. С наилучшими пожеланиями
Я думал, что продукты Apple используют 92 пикселя на дюйм в качестве базовой линии. Продукты Windows имеют плотность 72 ppi.

Ответы (2)

При проектировании для цифровых устройств вам не нужно использовать DPI. Вы подготавливаете файл только в его «естественном» размере и в двойном размере для экранов Retina.

Таким образом, ваш выходной значок будет иметь размер 250x250 для Интернета и 500x500 для iPhone.

Вы можете сделать только с высоким разрешением, изменив его размер. Но когда вы работаете в Интернете, важно сохранить небольшой размер файла (мобильные сети дороги!), поэтому рекомендуется сделать две копии и использовать CSS для настройки плотности экрана.

Дополнительную информацию о подготовке ресурсов для экранов с более высокой плотностью пикселей можно найти здесь: Как создать графику Retina для веб-дизайна.

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

Хотя, если вы это сделаете, сохранение сети и размера сетчатки покроет большую часть ваших баз. А для еще более высокой плотности пикселей изображение качества сетчатки будет отображаться прилично. Вектор, безусловно, необходим для постоянного идеального качества. Кроме того, предоставление векторных значков через SVG или шрифт значков позволит людям использовать ваши значки любого размера (а не только размеры, в которых вы сохранили изображение), и они могут использовать CSS для изменения таких вещей, как цвет значка (будет полезно для наведения, потому что в противном случае должны существовать обычная версия значка и версия значка при наведении).

Если вы чувствуете себя комфортно в Photoshop, вы можете использовать этот хак для экспорта SVG-графики из векторов, нарисованных в программе: http://hackingui.com/design/my-workflow-to-export-svgs-out-of-my-photoshop- дизайн-файлы/

Тем не менее, процесс рисования векторов в Photoshop не сильно отличается от использования Illustrator.