ЧЕТЫРНАДЦАТЬ МИЛЛИОНОВ ЧЕТЫРЕСТА ТРИДЦАТЬ ВОСЕМЬ ТЫСЯЧ ЧЕТЫРЕСТА ПИКСЕЛЕЙ

Клевакин Денис

Что такое DPI и PPI

DPI

PPI

72-120 PPI

5120х2880 px

218 PPI

Как с этим жить?

109 px10

9 px

72 PPI

109 px

109

px

218 PPI

Все будут видеть ваш дизайн по разному

Разрешение экрана

5120х2880 px 1280х720 px

5120х2880 px 1280х720 px

Родное разрешение 1280х720 px

Пиксельный дизайн уже не торт

Ретина дисплей

Айфон 3G Айфон 4

Айфон 3G Айфон 4

163 PPI 326 PPI

3,5 дюйма 3,5 дюйма

Айфон 3G Айфон 4

163 PPI 326 PPI

3,5 дюйма 3,5 дюйма

2x

С ретиной всё становится лучше

Простой множитель

88 х 204 px 4 px скругление углов 36 pt шрифт

2x

44 х 102 px 2 px скругление углов 18 pt шрифт

dinner_key@2x.png

2x

dinner_key.png

0.75x

2x 2.5x 3x2.8x

DP, PT и SP

2x

44 х 102 dp 2 dp скругление углов

18 sp шрифт

SP — для определения размеров шрифтов

PPI в iOS

Айфон 3G Айфон 4 Айфон 5/S/C

1x 2x 2x

Айфон 6 Айфон 6 плюс

2x 3x

3x ?

Айфон 6 плюс

163 PPI

2208 х 1242 px 1920 х 1080 px

Дизайн На Айфоне 6 плюс

13%

Графические ресурсы в iOS

1x 2x ptpx100%

PPI на Android

75% 100% 133% 150% 200% 300%

LDPI MDPITVDPI

HDPIXHDPI

XXHDPI

400%XXXHDPI

Графические ресурсы на Андройд

1x 1.33х 1.5х 2х 3х

MDPI

Базовый DPI

PPI на десктопах

МакБук и МакБукПро Хром Пиксель

220 и 227 DPI 239 DPI

Графические ресурсы для десктопов

1x 2x

Графическое программное обеспечение

Фотошоп Иллюстратор Скетч 3.0

Скетч 3.0

@kreopizda