В отличие от Photoshop, Illustrator является DPI-независимым из-за своей векторности. В отличие от растровых изображений, векторная графика основана на математических формулах, и ее можно масштабировать программно без потери качества. Простого ответа на этот вопрос нет, но я попробую посоветовать выбрать сенсорное управления.

Добавим вокруг кнопки отступ в 20px, потому что Джиму нравится свободное пространство. Но считать пиксели retina совсем не имеет смысла, когда вы создаете дизайн для экранов не-retina. Сегодня LCD-мониторы идут с предустановленным или родным разрешением, отражающим количество пикселей, которое может отобразить экран. Так, обозначение, что фотомашина печатает фотографии с разрешением 254 ppi, значит, что на дюйм (2,54 см) приходится 254 точки. Это означает, что каждый пиксель изображения имеет размер 0,1×0,1 мм. Что касается категории десктопов и ноутбуков, мы не будем описывать каждый размер экрана, который предлагает Apple.

  1. Обозначение термина PPI похоже на расшифровку DPI — dots per inch (точки на дюйм).
  2. На SP будут влиять настройки шрифтов пользователя на устройстве Android.
  3. Дизайн с PPI между 72 и 120 дает уверенность в том, что ваша работа будет иметь примерно одинаковые пропорции в размере везде.
  4. В этом случае PPI уходит на второй план, и неудивительно, что оптимальная плотность пикселей составляет уже всего на дюйм.

Это облегчает подготовку дизайна под каждый другой множитель, особенно на Android с множителями вроде 1.33 и 1.5. Вам придется подготовить набор из 4 изображений для каждого исходника, от MDPI до XXHDPI. Помните, что в случае с показанной ниже версией Chrome, TVDPI https://forexww.org/ версия также была экспортирована, поэтому в этом случае у нас вышло 5 изображений на исходник. Оно немного больше, используется для проекторов и профессиональных камер. Вы, должно быть, в последнее время часто слышали термин 4K, эта тема сейчас в тренде.

Разрешение экрана (и родное разрешение)

Повторите этот процесс для каждого нужного вам исходника. Никогда не предоставляйте всего одну версию исходника, всегда покрывайте ими каждый DPI. Как вы видите, нужно каждый раз генерировать два изображения для разработка оптимизация и тестирование торговых стратегий каждого исходника. Для изображений под разрешение retina мы добавляем суффикс @2x, так что названия файлов получаются в формате [email protected]. Это стандартное правило в iOS, которому необходимо следовать.

Причина в том, что Sketch изначально был задуман с одной целью — дизайн интерфейсов. Sketch позиционирует себя как инструмент, идеально адаптированный под свою нишевую аудиторию — дизайнеров интерфейсов. Первоначально программа создавалась для обработки растровой графики и фотографий, что видно даже из названия. С годами она развивалась, и дизайнеры стали использовать ее и для дизайна интерфейсов.

Большинство используемых сегодня экранов имеет множитель 1x (Macbook, Macbook Air, old Macbook Pros, экраны десктопов.) Retina представлена в 13 и 15″ только на Macbook Pros. Если дизайн для десктопа отличается от мобильной версии, вам понадобится подготовить исходники для обеих версий экрана. Поколение iPod 4 и выше используют iOS6 и не-retina.

Сколько PPI нужно на самом деле

Я предлагаю начать с дизайна для базового PPI (т.е. 100%/1x) и умножать на 2 потом, чтобы убедиться в корректности дизайна на экране @2x и генерации исходников в @2x. Как только вам станет удобно переключаться между 1x и 2x, вы сможете создавать дизайн напрямую в @2x, уменьшая исходники для меньшего разрешения. Это будет особенно полезным при дизайне на экране retina (Macbook pro).

Человек, работающий за монитором, подключенным к десктопу, воспринимает информацию с расстояния 80–110 см. Какая плотность пикселей монитора лучше в этом случае? Практика показывает, что для работы (почта, браузер, офисные программы) достаточно 90 PPI.

Плотность пикселей PPI — что это такое и как влияет на изображение

Такие устройства, как планшеты или электронные книги, мы держим на большем расстоянии от глаз — комфортным считается удаление в см. Новичок конца 2015 года, Figma является браузерным инструментом для векторного дизайна (работает преимущественно через Chrome). Он похож на облачную версию Sketch с возможностями командной работы и интеграцией Slack.

Исходники для будущих версий Chrome OS включают файлы в высоком разрешении. Платформа Android располагает более широким спектром устройств по сравнению с iOS. Причина в том, что любой OEM может выпустить устройство со своими разрешениями экрана, установив на него свою собственную версию Android. В результате получается практически неограниченное множество размеров дисплеев и вариантов DPI, от телефонов размером с планшет до планшетов, размером с небольшой телефон.

Еще в 1980-х компания Apple ввела стандарт плотности пикселей у мониторов для Macintosh, равный 72 PPI. Этот стандарт, державшийся на протяжении десятков лет, подхватили и другие производители. Понимание разницы между растровым и векторным изображением — это ключ в постороении масштабируемых дизайнов и исходников. Как и Photoshop, это невероятно мощный инструмент с очень крутой кривой обучения. Как говорит само название, он создан для иллюстраторов, но также активно применяется и в дизайне интерфейсов. Программное обеспечение не определяет мастерство дизайнера, но выбор правильного инструмента под конкретную задачу может значительно улучшить продуктивность и упростить сам процесс разработки.

Впечатляющее достижение инженерного искусства в попытке реализовать дизайн-инструмент будущего. Возможно, самый популярный выбор для дизайна интерфейсов сегодня. Есть бесконечное множество ресурсов, уроков и статей, посвященных Photoshop. Этот «старичок» стоял еще у истоков развития отрасли дизайна интерфейсов. Но чтобы не тратить на это слишком много времени, вот некоторые базовые пиксельные размеры, которые считается безопасно использовать в разных ОС.

SP — это отдельный от DP и PT термин, но работает по такому же принципу. SP — это аббревиатура Scale-independent pixel (пиксель, независимый от масштаба). На SP будут влиять настройки шрифтов пользователя на устройстве Android.

Когда речь заходит о размере экрана и DPI, в iOS есть 2 типа мобильных устройств и 2 типа экранов под планшет и десктопы. — Используйте реалистичные настройки PPI при цифровом дизайне. Используйте то, что дает вам четкое представление о конечном отображении на устройстве (72-120ppi для 1x web/desktop, например).