как узнать dpi монитора
Знания в формате 4 и 5
Меню навигации
Пользовательские ссылки
Информация о пользователе
П/р №5 «Кодирование графической информации»
Сообщений 1 страница 1 из 1
Поделиться12014-01-14 19:42:56
Задание 1. Определить установленное на вашем компьютере разрешение экрана монитора, измеренное в dpi.
Варианты выполнения работы:
— использование мониторов различного размера;
— использование различных разрешений экрана монитора.
Определение разрешения экрана монитора в dpi
1. В операционной системе Windows щелкнуть правой кнопкой мыши по Рабочему столу, появится диалоговое окно Свойства: Экран.
Выбрать вкладку Параметры и с помощью ползунка Разрешение экрана узнать установленное разрешение экрана монитора в количестве точек по горизонтали и по вертикали.
Разрешение по горизонтали = 1024 точки.
3. Определить, чему равен горизонтальный размер изображения на экране монитора в дюймах:
L = 31,5 см = 31,5 см/2,54 см/дюйм = 12,4 дюйма.
4. Определить разрешение экрана монитора в dpi:
Разрешение по горизонтали в dpi = 1024 точки / 12,4 дюйма = 82,5 dpi.
Задание 2. На основе прошлого задания, попробуй определить значение dpi своего смартфона.
Решение записать в тетрадь.
Случалось ли вам попадать в следующую ситуацию? Начальник или заказчик хочет понять, какого размера будет ваш дизайн в напечатанном виде, но монитор не показывает реальный размер. Вам остается лишь подгонять макет по линейке лупой, и прикладывать к экрану листики. После этой статьи этому придет конец!
Для начинающего дизайнера это уникальный материал, который я собирал по крупицам. По правде говоря по настоящему разобраться я смог только на практике. На сайте Хронофаг.ру я уже писал о изменении разрешения для подготовки к печати. В этой статье я расскажу о том, как измерить в реальном физическом измерении разрешение вашего монитора. Вы так же узнаете, что означает заветная цифра 72dpi и 96dpi, которые можно встретить при создании новой рабочей области в Фотошопе и не только в нем.
Разрешение мониторов измеряется пикселями
Говоря о разрешении постоянно происходит страшная путаница. Под разрешением в Фотошопе понимают количество пикселей на 1 квадратный дюйм, под разрешением монитора подразумевают количество пикселей по ширине и высоте экрана. Что говорить о разрешении камеры или разрешении фотоаппарата.
Причина путаницы в неправильно переведенных терминах английского языка. Люди постоянно путают слова resolution и dimension. Винить их за это не стоит, смысл действительно очень схож.
Но сейчас мы говорим о разрешении мониторов. Под разрешением вашего монитора подразумевается его ширина и высота в пикселях. И не более.
Когда я учился в школе, компьютерные мониторы имели разрешение не более 800 на 600 пикселей. И это считалось весьма неплохо. У некоторых счастливчиков были мониторы 1024 на 768 пикселей. Эти, понятно, считались самыми крутыми на всю школу.
Время прошло, сегодня у моих родителей средний монитор с разрешением 1920 на 1080 пикселей. Что это значит, выражаясь простым языком? Это значит что за 10 лет наши мониторы получили дополнительную 1000 пикселей, по высоте и ширине. Но их физический размер остался примерно таким же. Мониторы не выросли в два раза. Возможно немного разошлись по ширине. Widescreen, знаете ли. Но и разрешение изменило пропорции.
Так сколько же пикселей в одном дюйме вашего монитора?
Как вычислить реальный размер на экране?
Ответить на вышеназванный вопрос поможет Фотошоп и ловкость рук. Случалось ли вам сталкиваться с щепетильным заказчиком, который хотел понять, сколько места будет реально занимать ваш стикер, флаер, обложка или открытка? При этом продукт на печать не пошел, он существует только в мониторе?
В этой ситуации вы стараетесь объяснить, что размеры не совпадают, но примерно…. и начинаете подгадывать размер инструментом Увеличительным стеклом, сверяя его с линейкой, положенной на экран. Ладно, признаюсь, я так делал когда только начинал работать.
В вычислении реального размера вам поможет инструмент Лупы Zoom Tool. Выберите лупу в Фотошопе и на панели настроек нажмите кнопку Print Size. Эта кнопка показывает реальный печатный размер вашей графики.
И если все правильно, вы получите полное несоответствие с реальным печатным размером. То есть, да, кнопка что то сделает, увеличит или уменьшит графику. К сожалению не в печатный размер, а в какой то свой, выдуманный. Похоже она не работает? Или нет?
Загадочные 72 и 96 dpi
Вы наверняка сталкивались с этими двумя значениями. 72dpi, а точнее 72 ppi (pixtels per inch). Теоретически это значит, что у вашего монитора, в один дюйм умещается 72 пикселя. Практически, это соответствовало бы действительности в том случае, если на дворе стоял бы 85 год. Чуть погодя мониторы улучшили свою пиксельную производительность. Экраны смогли умещать аж 96 пикселей на дюйм. Это настолько мало, что глядя на монитор вы до сих пор можете различать пиксели.
Сегодня мониторы имеют совершенно разное разрешение и способность умещать пиксели на дюйм. Это число варьируется от 90 до 120 пикселей на дюйм.
Когда мы создаем новую область в Фотошопе, программа предлагает нам установить разрешение рабочей области. По умолчанию стоит 72. Однако если вы выберете макет заготовки для веб графики, значение сменится на 96. Оба значения ровным счетом ничего не значат. Это никак не повлияет на рабочую область. Монитор показывает столько пикселей, сколько пикселей установлено в его операционной системе по ширине и высоте.
Если вы сделали сайт шириной в 1280 пикселей, будьте готовы к тому, что он не сможет грамотно отображаться на мониторах с разрешением 800 пикселей по ширине, хотя таких мониторов уже и не найти.
Спрашивается, если разрешение ни на что не влияет, зачем оно вообще нужно? Оно нужно прежде всего для полиграфии и подготовки к печати. Там количество пикселей на дюйм крайне важно, так как определяет качество картинки на бумаге.
В веб дизайне разрешение так же влияет соотношение некоторых физических параметров. Грубо говоря, на линейке View > Ruler в одном дюйме у вас будет 96 пикселей вместо 72-х. Соотношение размера шрифта тоже изменится. Time New Roman 12p при разрешении в 72 пикселей и Time New Roman 12pt при разрешении в 96 пикселей это шрифты разных размеров. Потому что Pt — point физический размер, и опирается на физические величины, а визуальный размер физической величины, зависит от привязанного размера разрешения. В нашем случае оно разное. То есть буквы 12p при 96 пикселях разрешения больше чем при 72х.
В остальном, ставьте хоть 1ppi, пока вы готовите макет для экрана это не имеет никакого значения, учитывая то, что соотношение разрешения к размеру рабочей области можно пересчитать в считанные секунды.
Как измерить флаер на мониторе?
Так как же измерить реальное разрешение монитора, и почему кнопка Print Size не работает? Не волнуйтесь, все под контролем. Кнопка не работает из за неправильных настроек разрешения. В настройки разрешения прокрались артефакты прошлого 72 или 96ppi. Вам нужно выставить реальное разрешение вашего монитора и тогда все будет как надо.
При этом важно понимать, что монитор поддерживает несколько разрешений разом. Например тот, на котором работаю сейчас я, поддерживает размеры от 800 на 600 до 1920 на 1080 пикселей. Последнее конечно установлено по умолчанию.
Важно понимать, что при размере в 800 на 600 пикселей в дюйме будет одно количество пикселей, а при разрешении в 1920 на 1080, совсем другой. Значительно больше. Нам конечно важно самое лучшее разрешение, которое может поддерживать ваш монитор, а не самое худшее. От него и будем отталкиваться.
Как узнать разрешение своего монитора
Разрешение вашего монитора должно быть написано в техническом паспорте монитора. Чаще всего найти его невозможно. В технических характеристиках реальное разрешение тоже пишут не всегда. Более того, не всегда пишут даже размеры по ширине и высоте. Для своего старого Samsung я отыскал размеры с учетом пластиковой окантовки, а это совсем не то что нужно. Вам нужен чистый размер экрана, и не более.
Если найти размеры или разрешение не удалось, переходим к плану Б, палке и веревке. Берите линейку, измеряйте монитор по ширине и высоте. Я измерил монитор LG, на котором пишу статью, получилось 48 на 27 см.
1 дюйм = 2.54 см То есть мой монитор примерно 19 на 10,5 дюймов. Я округляю, потому что особая точность тут не нужна. Да и о какой точности можно говорить, измеряя монитор линейкой.
Разрешение на мониторе установлено 1920 на 1080 пикселей. Делим ширину 1920 на 19. Округленно получаем 100. При делении 1080 на 10,5 получается столько же. Вот и все, реальное разрешение монитора 100ppi.
То есть, на 1 дюйм монитора, при разрешении 1920 на 1080, умещается около 100 пикселей.
Настраиваем разрешение в Фотошопе
Наконец, как настроить кнопку Print Size в Фотошопе? Идем в настройки Edit > Preference. Открываем вкладку Units & Rulers. В диалоговом окне, в настройке Screen Resolution меняем выдуманное разрешение на правильное. В моем случае на 100. Все.
Теперь попробуйте создайте лист A4 с разрешением 300dpi. Допустим мы подготавливаем листовку на печать. Найдите на рабочем столе реальный листик A4. В Фотошопе нажмите кнопку Print Size. Приложите листик к экрану. Дело сделано.
Теперь, на вопрос заказчика, а «какого это будет размера в реале?» вам не придется чертить в воздухе руками, не придется подгонять по линейке экран, не придется прикладывать к бумажке и говорить, а вот такого. Достаточно кликнуть по Print Size. Фотошоп сам все покажет.
Надеюсь эта статья оказалась вам полезной и удачных экспериментов в полиграфии!
Поддержка определения DPI в Windows 10: как посмотреть, какие проги как отображаются
С выходом Windows 10 May 2019 Update у Диспетчера задач Windows 10 официально появилась еще одна дополнительная колонка. Называется она «Поддержка определения DPI».
То есть диспетчер теперь показывает, какие из установленных на компе приложений поддерживают определение DPI. Что это и зачем?
Ну, для начала напомним, что параметр «dots per inch» или сокращенно DPI обозначает количество (плотность) пикселей на физической единице площади панели экрана.
Стандартно компьютерные мониторы оснащались панелями, у которых на физический дюйм площади приходилось 96 пикселей. Но по мере развития технологий у производителей появилась возможность увеличивать плотность пикселей на дюйм, в итоге сейчас в рознице можно сравнительно недорого купить мониторы с панелями на 200 DPI и даже больше.
Однако тут же пришлось бороться с одной проблемкой. Дело в том, что при более высоком значении DPI картинка на экране монитора в целом получается более четкой, но и масштабировать её приходится по-новому, иначе все визуальные элементы и тексты становятся очень маленькими и читать/юзать их гораздо сложнее.
Проблему эту разработчики софта, само собой, начали решать. Поэтому все новые приложения Windows 10 из Microsoft Store умеют автоматом подстраиваться под значение DPI монитора.
А вот со старыми — все не так просто. И до сих пор есть уйма полезных прог, которые изначально разрабатывались под стандарты Win32, самомасштабироваться не обучены и на современных мониторах с высоким DPI отображаются либо с размытыми текстами, либо с кривыми иконками и боксами, либо… в общем, плохо отображаются.
Поэтому чтобы пользователям Windows 10 проще было выявлять те приложения, у которых могут быть проблемы с масштабированием, в Microsoft придумали показывать такие проги в Диспетчере задач системы. Фича эта (в оригинале называется она DPI Awareness) тестировалась еще с прошлого года, а с майским обновлением теперь в Windows 10 (v.1903) присутствует официально, как мы уже сказали, в виде отдельной колонки «Поддержка определения DPI» в окне Диспетчера.
как посмотреть, какие из приложений на компе поддерживают определение DPI
Собственно, на этом можно было и закончить. Однако, наверняка, не лишним будет вкратце описать и те значения, которые отображаются в столбце «Поддержка определения DPI«. Ибо их несколько, для разных приложений — разные режимы. А именно:
Руководство для дизайнера по DPI
Это руководство — начальный материал о кросс-DPI и кроссплатформенном дизайне для начинающих и средних дизайнеров, желающих узнать о нем с самого начала или получить больше знаний. Без сложных математических и непонятных диаграмм, только непосредственные объяснения, упорядоченные в небольших разделах, для понимания и применения их непосредственно к вашей дизайнерской работе.
Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на sgabriel.contact@gmail.com. Вы также можете найти на меня Twitter, G+ или Facebook.
Что такое DPI и PPI
DPI или (Dots Per Inch) «точек на дюйм» является мерой пространственной плотности точек, первоначально использовавшейся в печати. Это количество капель чернил, которое ваш принтер может вместить в один дюйм. Меньшее DPI дает менее детальное изображение.
Эта концепция применяется к компьютерным экранам под названием PPI (пикселей на дюйм). Тот же принцип: подсчитывается количество пикселей, которые экран может отображать на дюйм. Название DPI также используется в экранах.
У компьютеров с Windows по умолчанию 96 PPI. Mac использует 72, хотя это значение не было точным с 80-х. Обычные, не retina ПК (Mac также) будут иметь от 72 PPI минимум до около 120 максимум. Проектирование с PPI между 72 и 120 обеспечит вашей работе везде примерно то же самое соотношение размеров.
Вот прикладной пример: экран Mac Cinema 27 дюймов имеет 109 PPI, что означает, что он отображает 109 пикселей на дюйм экрана. Ширина с рамкой является 25,7 дюймов (65 см). Ширина фактического экрана составляет примерно 23,5 дюйма, так 23,5 * 109
2560, что делает физическое разрешение экрана 2560x1440px. *Я знаю, что 23,5 * 109 не равно точно 2560. Это на самом деле +23,486238532 дюймов. Было бы точнее пикселей на сантиметр, но вы меня поняли.
Влияние на ваш дизайн
Допустим, вы рисуете синий квадрат 109 * 109 px на экране, оговоренном выше. Этот квадрат будет иметь физический размер на экране 1 * 1 дюйм. Но если ваш пользователь имеет экран с 72 PPI, синий квадрат будет выглядеть физически больше, поскольку для 72 PPI экрану понадобится приблизительно полтора дюйма, чтобы отобразить ваш синий квадрат 109px. Смотрите ниже моделирование эффекта.
Запомните: оставив в сторону разногласия цвета и разрешения, имейте в виду, что все будут видеть ваш дизайн по разному. Вы должны стремиться к наилучшему компромиссу и создавать для наибольшего процента пользователей. Не думайте, что у пользователь такой же экран, как у вас.
Разрешение экрана (и родное разрешение)
Разрешение экрана может иметь огромное влияние на то, как пользователь воспринимает ваш дизайн. К счастью, так как ЖК-мониторы заменили ЭЛТ, теперь пользователи, как правило, имеют родные разрешения экрана с хорошим соотношением размер экрана к PPI.
Разрешение определяет количество отображаемых на экране пикселей (например: 2560 * 1440px для Cinema экрана 27 дюймов) 2560 ширина, 1440 высота. Теперь, конечно, когда вы знаете, что означает PPI, вы понимаете, что это не может быть единицей измерения физического размера. Вы можете иметь экран 2560×1440 размером с вашу стену и другой размером с вашу голову.
Современные ЖК-мониторы имеют разрешение, определенное по умолчанию, оно же родное, которое будет обрабатывать точное число пикселей, которое экран способен отображать. У старых ЭЛТ-мониторов немного по-другому, но так как их можно считать мертвыми, давайте не вдаваться в детали (и не затрагивать мое частичное понимание старых добрых телевизоров).
Возьмем наш 27 дюймовый Cinema экран, который может отображать 109 PPI в родном разрешении 2560 * 1440 px. Если уменьшить разрешение, элементы будут казаться больше. В конце концов, у вас только 23,5 горизонтальных дюйма для заполнения виртуально меньшим числом пикселей.
Я сказал виртуально, потому что в этом случае так и будет. Экран имеет родное разрешение 2560 * 1440 px. Если разрешение уменьшается, то пикселы все также отображаются в 109 PPI. Чтобы заполнить это пространство и весь экран, ваша ОС будет все растягивать, ваш GPU / CPU возьмет все пиксели и вычислит их с новым соотношением.
Если вы хотите сделать разрешение 1280 * 720 (половина ширины, половина высоты от предыдущего) на 27 дюймов, то вашему GPU, чтобы заполнить экран, придется имитировать вдвое увеличенный пиксель. Какой будет результат? Так вот — размытие. Пока деление на два отношения сторон будет выглядеть довольно хорошо, из-за простого делителя, но если вы захотите 1/3 или 3/4 от отношения сторон, то у вас в итоге будут числа со знаками после запятой, и вы НЕ МОЖЕТЕ разделить пиксель. Смотрите пример ниже.
Примечание: слева: рендеринг окна OSX в родном разрешении (1400*900px): справа рендеринг окна OSX в симулированном меньшем разрешении (1024*640px retina).
Рассмотрим ниже другой пример. Возьмем линию в 1 пиксель на экране с родным разрешением. Теперь сделаем разрешение на 50% меньше. Для заполнения экрана CPU придется генерировать 150% изображения, умножая все на 1,5, 1 * 1,5 = 1,5, но вы не можете поделить пиксели вдвое. А будет следующее: он заполнит окружающие пиксели долей цвета (by a fraction of the color), создавая размытие.
Примечание: слева линия толщиной в 1 пиксель на любом разрешении по умолчанию, справа линия толщиной в 1 пиксель в меньшем на 150% разрешении.
Поэтому, если у вас есть Retina Macbook Pro и вы хотите изменить разрешение, он покажет окно ниже, давая вам знать (на скриншоте ниже) как это разрешение будет «выглядеть» 1280 * 800px. Он использует опыт восприятия пользователем разрешения экрана, чтобы выразить отношение размеров.
Это очень субъективное представление, потому что он использует разрешение пикселя в качестве единицы физического размера, но это правда, по крайней мере, с их точки зрения.
Запомните: если вы хотите всегда видеть свой дизайн (или любой дизайн) пиксельно идеально, никогда не используйте для вашего экрана разрешение, отличное от родного. Да, вам может быть более удобно с меньшим соотношением, но когда дело доходит до пикселей, вам хочется быть как можно более точным. К сожалению, некоторые люди используют разрешение как способ, чтобы лучше видеть, что происходит на экране (особенно на рабочем столе), когда им следовало бы использовать настройки специальных возможностей. От этого ваш дизайн по-прежнему будет выглядеть плохо, но с этой точки зрения, пользователи ищут улучшения читаемости, а не блеска.
Что такое 4k
Возможно, в последнее время вы много слышали о термине 4K (по крайней мере, когда я писал об этом, в начале 2014-го года), 4k довольно модная тема. Чтобы понять, что это такое, давайте сначала поймем, что означает «HD».
Осторожно, это сильное упрощение. Я буду говорить только о наиболее распространенных разрешениях. Существует различные категории HD. Термин HD применимо к любым разрешениям, начиная с 1280x720px или 720p для горизонтальных линий в 720 пикселей. Также некоторые могут называть это разрешение SD (standard definition; стандартное определение).
Термин Full HD применяется к экранам 1920x1080px. Большинство телевизоров и телефонов высокого класса (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) использует это разрешение.
4K начинается с 3840×2160 пикселей. Его также называют Quad (четверной) HD и может называться UHD от Ultra (сверх) HD. Проще говоря, на экране 4K вы можете вложить 4 1080p, в понятии числа пикселей. Другое разрешение 4K — 4096×2160. Это немного больше и используется для проекторов и профессиональных камер.
Что произойдет, если я подключу 4K дисплей к компьютеру
Современные ОС не масштабируют 4K, это означает, что если вы подключите дисплей 4K к Chromebook или MacBook, он будет использовать ресурсы с наибольшим DPI, в этом случае 200% или @ 2x (в два раза больше) и показывать их в обычном соотношении. От этого все будет выглядеть хорошо, но маленьким.
Гипотетический пример: если вы подключите 12 дюймовый 4K экран к компьютеру с 12 дюймовым экраном высокого разрешения (2x), все будет выглядеть в два раза меньше.
Герцы монитора
Здесь мы немного отдохнем от PPI и разрешения экрана. Возможно, вы видели, что возле настроек разрешения для экрана есть значение Гц монитора. Оно не имеет ничего общего с PPI, но на всякий случай, если вам интересно, Герц монитора — или частота обновления — это единица скорости, с которой ваш монитор будет отображать фиксированное изображение или кадр за секунду времени. Монитор с 60 Гц сможет отображать 60 кадров в секунду. Монитор 120 Гц — 120 кадров в секунду и т.д.
В контексте интерфейса пользователя значение Герц(Гц) будет определять, насколько гладкой и детализированной будет выглядеть ваша анимация. Большинство экранов работают на 60 Гц. Обратите внимание, что количество кадров, отображаемых в секунду, также зависит от вычислительной и графической мощности устройства. Подключение экрана 120 Гц к Atari 2600 будет совершенно бесполезным.
Для лучшего понимания взгляните на пример ниже. T-Rex идет из точки А в точку B с одинаково равным и быстром и шагом на 60 Гц и 120 Гц экране. Экран с частотой 60 кадров в секунду способен отображать 9 кадров во время анимации, в то время как с 120 кадров в секунду отображает в том же отрезке времени логически вдвое больше кадров. Анимация будет выглядеть более гладко на экране 120 Гц.
Запомните: Некоторые люди могут сказать, что человеческий глаз не может увидеть более 60 кадров в секунду. Это неправильно. Не слушайте и уходите, смеясь истерическим хохотом.
Что такое дисплей retina
Apple представила термин дисплей «Retina » для выпуска смартфонов iPhone 4. Он называется Retina (в переводе сетчатка) потому, что PPI устройства была настолько высоко, что вероятно, сетчатка человека не смогла бы увидеть отдельные пиксели на экране.
Это утверждение верно для размеров экрана диапазона устройства, в которых оно используется, но в то время как экраны становятся все лучше и лучше, наши глаза сейчас обучены достаточно для восприятия пикселей — особенно для округлых элементов пользовательского интерфейса.
Технически они отображают в два раза больше пикселей по высоте и ширине в том же физическом размере.
IPhone 3G / S был с диагональю 3,5 дюйма и разрешением 480 * 320px и 163PPI.
iPhone 4 / S был с диагональю 3,5 дюйма и разрешением 960 * 640px и 326ppi.
БУМ! Ровно в два раза. Простой множитель. Поэтому элементы на экране вместо того, чтобы быть меньше, выглядят вдвойне визуально резче, потому что они имеют в два раза больше пикселей и точно таких же физических размеров. Один нормальный пиксель равен 4 пикселям retina.
Рассмотрим пример ниже для прямого применения в сложном дизайне.
Примечание к изображению: трудно имитировать различное качество изображения с двух устройств на третье устройство, то есть то, на которое вы смотрите на прямо сейчас. Качество изображения будет выглядеть в два раза лучше и резче для музыкального плеера на retina, даже занимая то же физическое пространство, Если вы хотите проверить его сами, я использовал одну из моих бесплатных программ, вы можете загрузить исходный код.
Термин дисплей «Retina» принадлежит Apple, поэтому другие компании будут использовать «HI-DPI» или » Super power pixel maximum sp33d display » (я собираюсь зарегистрировать последнюю марку) или вообще ничего из этого. Вам останется, читая характеристики устройства, выяснить, какой же DPI и размер экрана (как весело).
Запомните: продукты Apple, являются отличным способом познакомиться с преобразования DPI и понять различия между разрешением, PPI и соотношением физического размера, потому что вам надо беспокоиться только о 1 множителе.
Что такое множитель
Когда дело дойдет до преобразования вашего дизайна для всех возможных PPI, множитель будет вашим математическим спасителем. Если вы знаете множитель, вам больше не придется заботиться о детальных характеристиках устройства.
Давайте возьмем наш пример с iPhone 3G и 4. У вас есть в два раза больше пикселей в том же физическом размере. Поэтому ваш множитель 2. Это означает, чтобы сделать ваши графические ресурсы совместимыми с разрешением 4G, вы просто должны умножить размер своих графических ресурсов на 2 — и все.
Допустим, вы создаете кнопку 44 * 44px, которая является рекомендованной iOS сенсорной целью (я буду говорить об этом позже). Давайте назовем его типичным названием кнопки «JIM».
Чтобы хорошо сделать JIM на iPhone 4, вам надо создать его версию увеличенную вдвое. Что мы и делаем ниже.
Примечание: слева — 2px закругленные углы 16px размер шрифта, справа 4px закругленные углы 32px размер шрифта.
Довольно просто. Теперь JIM имеет версию Jim.png для нормального PPI (IPhone 3) и версию Jim@2x.png для 200% PPI (iPhone 4).
Теперь вы спросите: «Но подождите! Я уверен, что есть и другие множители кроме всего двух. Да, есть, и вот здесь это становится кошмаром. Хорошо, может быть, не кошмаром, но я уверен, что вы предпочли бы провести день, гладя ваши носки, чем справляться с множеством множителей. К счастью, это не так страшно, как вы думаете, мы вернемся к этому позже.
Давайте сначала поговорим о единицах измерения, потому что теперь вам нужна будет единица измерени, отличная от пикселя — для описания ваших мульти DPI дизайнов. Вот когда приходит время DP и PT.
Запомните: для каждого дизайна над которым вы работаете нужно знать множитель. Множители, держат вместе этот мир хаоса размеров экранов и PPI и делают его понятным для человека.
Что такое DP, PT и SP
DP или PT является единицей измерения, используемой для создания описания к вашим макетам, созданных для множества устройств и DPI.
DP или DiP расшифровывается как Device independent Pixel (пиксель независимый от устройства) и PT как Point (точка). PT используют Apple; DP используют в Android, однако по существу — они одинаковы. Короче говоря, они определяют размер независимо от множителя устройства. Это очень помогает при обсуждении тех. заданий между такими различными субъектами, как дизайнер и инженер.
Давайте возьмем наш предыдущий пример кнопки, „JIM“.
Джим имеет ширину 44px для обычных, не retina экранов, и ширину 88px для retina экранов. Перейдем к техническим подробностям и добавим отступы (padding) вокруг Джима на 20px, потому что он любит свободное пространство. Тогда отступ будет 40px для retina. Но на самом деле не имеет смысла учитывать retina пиксели при проектировании на не retina экране.
Мы поступим следующим образом: возьмем за основу 100% соотношение сторон обычного не retina экрана.
В этом случае JIM будет иметь размер 44 * 44DP или PT и отступы 20DP или PT. Вы можете отдавать свое тех. задание в любом PPI, JIM по прежнему будет 44 * 44dp или pt.
Android и IOS адаптируют этот размер к экрану и конвертируют с правильным множителем. Вот почему я думаю, что легче всегда проектировать с PPI по умолчанию для вашего экрана.
SP используется отдельно от DP и PT, но работает так же. SP расшифровывается Scale-independent pixels (масштабно независимый пиксель) и используется для определения размеров шрифта. SP зависит от настроек шрифтов пользователей Android устройств. Для дизайнера определение SP такое же, как определение DP для всего остального. Возьмите за основу то, что читаемо при 1х масштабе (16SP, например, это отличный размер шрифта для чтения).
Запомните: когда составляете тех. задание, всегда используйте значения независимые от разрешения / масштаба. Всегда. Чем больше отличается размер экрана / разрешение, тем это более существенно.
Настройка PPI
Теперь, когда вы знаете, что такое PPI, retina и множитель, важно сказать, о чем меня совсем мало спрашивали, и это сбивает с толку: »Что произойдет, если изменить конфигурацию PPI в моем графическом редакторе?»
Если вы задали себе этот вопрос, это означает, что вы немного знакомы с графическими редакторами. Теперь очень важно понять то, на что мне потребовалось некоторое время: Для всего, что не для печати, используются размеры в пикселях, независимо от начальной конфигурации PPI.
Настройки PPI в программах являются наследием печатного дела. Если вы проектируете только для интернета, PPI не будет иметь никакого влияния на размер вашего растрового изображения. Вот почему мы используем множители, а не конкретные значения PPI. Ваш холст и графика всегда будут преобразованы в пиксели с помощью программного обеспечения, используя соответствующий множитель.
Вот, например. Вы сами можете это попробовать в программе, которая позволяет настроить PPI, например, Photoshop. Я нарисовал квадрат 80 * 80px и текст с размером 16pt в Photoshop с конфигурацией 72ppi. Второе то же самое с конфигурацией 144PPI.
Как вы видите, текст стал довольно большим, точнее в два раза больше, в то время как квадрат остался тем же. Причиной этого является то, что программа (Photoshop в данном случае) масштабирует (как и должна) значения pt на основе значения PPI, в результате удваивая размер рендеринга текста на настройках удвоенного PPI. С другой стороны, то, что было определено с помощью пикселей — синий квадрат — остается точно таково же размера. Пиксель — это пиксель и останется пикселем независимо от настроек PPI. Они отличаются друг от друга только PPI экрана, который их отображает.
Важно помнить, что при проектировании для цифровой техники PPI будет влиять только на то, как вы воспринимаете свой дизайн и на ваш рабочий процесс и на графику в pt размерах, такую как шрифт. Если вы включите в свою работу исходные файлы с различными настройками PPI, программа изменит размеры любого переданного изображения между различными файлами отношением PPI принимающего файла. Это станет для вас проблемой.
Решение? Используйте PPI (для 1x дизайна предпочтительно в диапазоне 72-120) и придерживайтесь его. Я лично использую 72 ppi, потому что это настройка по умолчанию в Photoshop, и большинство моих коллег делают то же самое.
Обработка PPI в iOS
Пришло время для погружения в платформенно-зависимый дизайн. Давайте пройдемся по устройствам с IOS на начало 2014 года. Касательно размеров экрана и DPI, c iOS есть 2 типа мобильных устройств и 2 типа экранов для ноутбуков / настольных компьютеров. В категории мобильных у них, конечно, есть iPhone и iPad.
В категории телефонов у вас есть старый 3GS (еще поддерживается iOS6) и выше. Только iPhone 3GS не с retina. iPhone 5 и выше используют более высокий экран с тем же DPI, как у iPhone 4 и 4s. Смотрите шпаргалку ниже:
Примечание: 1) множитель 1х, 2) множитель 2х, 3) множитель 2х.
В сентябре 2014-го Apple представила 2 новые категории iPhone: iPhone 6 и iPhone 6 Plus. iPhone 6 больше, чем iPhone 5 (на 0.7 дюйма), но с тем же PPI. С другой стороны, iPhone 6 представляет совершенно новый множитель для iOS, @3x из-за своего размера, 5.5 дюймов.
Есть кое-что особенное, что вам надо знать о том, как iPhone 6 Plus обрабатывает свой дисплей относительно всех остальных iPhone.
Он уменьшает размер изображений.
Например, когда вы проектируете для iPhone 6, вы проектируете на холсте 1334*750px и телефон также рендерит 1334*750 физических пикселей. В случае iPhone 6 Plus у телефона разрешение меньше, чем рендеринг изображения, так что вам надо проектировать для разрешения 2208*1242px и телефон уменьшит размер до разрешения 1920*1080px. Смотрите рисунок ниже:
Физическое разрешение на 13% ниже, чем отрендеренное разрешение. Это создает пару глюков, таких как полу-пиксели, делая очень мелкие детали размытыми. Хотя разрешение так велико, что это будет незаметно, только если вы будете смотреть очень близко. Так что проектируйте на холсте 2208*1242px и будьте осторожны с очень маленькими элементами дизайна, такими как супер разделители. Смотрите ниже симуляцию того, что происходит:
Спасибо Paintcode за замечательное объяснение этого, сразу после основного доклада. Сморите их веб страницу. Это объяснение исходит из их классных схем.
Затем у вас есть категория iPod Touch. Рассматривайте дизайн для них так же как, для iPhone. iPod 4-го поколения и ниже использует iOS6 и не retina. iPod пятого поколения и выше использует retina экраны и совместим с iOS7. Соответственно, у iPod пятого поколения размер экрана такой же, как у iPhone 5.
Наконец у вас есть iPad. За исключением iPad (устаревших) первого поколения все они работают на iOS7, и только iPad2 и IPad mini первого поколения используют не-retina экран. Если вам интересно, каков iPad mini с точки зрения дизайна, это обычный iPad (экран с тем же PPI), но физически меньше. Под этим я подразумеваю, что они взяли такое же разрешение и уменьшили его с 9.7 дюймов до 7.9 дюймов. С тем же соотношением сторон, следовательно, увеличивая плотность пикселей. Ваши графические ресурсы будут выглядеть немного меньше.
Что касается категории настольный ПК/ноутбук, мы не будем рассматривать все размеры экранов, предлагаемых Apple. На сегодняшний день компания Apple предлагает большинство своих экранах с множителем 1x (Macbook, Macbook Air, старых MacBook Pro, настольных экранах.). Retina есть только в 13 и 15 дюймовых MacBook Pro. Множитель 2x, такой же, как в iPad и iPhone. Даже если проектирование для настольных ПК отличается от мобильных устройств, вы будете создавать графические ресурсы таким же образом для работы на 2 различных типов экранов.
При наличии только одного множителя, создание графических ресурсов для iOS и OSX довольно простое. Я предлагаю начать проектирование для базового PPI (т.е. 100% / 1x) и затем умножать на 2 для работы вашего дизайна на @ 2x экране и генерируйте @ 2x графические ресурсы. Когда вы освоитесь с переключением между 1х и 2х, вы будете в состоянии проектировать непосредственно в @ 2x, масштабируя свои графические ресурсы для более низкого разрешения. Это будет особенно полезно, если вы разрабатываете на экране retina (MacBook Pro).
Необходимые графические ресурсы, пример Chrome
Как вы видите, каждый раз мы должны создавать по два изображения на 1 графический ресурс. Не retina изображения называются name.png. Для retina изображений мы добавляем @ 2x, чтобы стало name@2x.png. Это конвенция iOS и ее надо придерживаться.
Если вы создаете изображение, которое будет использоваться только на iPad, мы используем
ipad после. @ 2x. Это всего лишь конвенция Chrome. Повторите этот процесс для каждого нужного вам графического ресурса. Никогда отдавайте только одну версию графического ресурса, создавайте для всех DPI.
Использование PPI на Android
У платформы Android более широкий спектр устройств, чем у iOS. Причина в том, что любой производитель может создать устройство и с некоторыми ограничениями в понятиях масштаба и установить на него свою собственную версию Android. В результате у вас практически неограниченное разнообразие размеров экранов и DPI, от телефонов, больших, как планшеты, до небольших планшетов, маленьких, как телефоны. По этой причине ваш дизайн всегда должен быть адаптивным.
В этом разделе мы будем использовать другой подход, чем для IOS. Сначала поговорим о множителях и категориях DPI.
Как и с iOS, у вас есть две категории устройств: телефоны и планшеты. Обе категории могут быть организованы в различных DPI категориях: ldpi, mdpi, tvdpi, hdpi, xhdpi, xxhdpi и xxxhdpi.
К счастью, одни из них используются чаще, чем другие, а некоторые уже устарели.
Первое, что мы должны сделать, это найти базовую единицу измерения, которая является эквивалентом 1х для IOS. На Android — это MDPI.
Давайте взглянем на множители в шпаргалке ниже.
Да, это много, и это еще не конец. Существует еще один.
Эффективно используются четыре DPI: MDPI, HDPI, XHDPI и XXHDPI. LDPI — это устаревшее DPI и больше не используется, TVDPI — это особый вариант для интерфейса пользователя в телевизорах и одноразово был использован для Nexus 7 выпуска 2012 г. Их можно считать не обязательными для использования в телефонах и планшетах. Хотя, есть примечание: множитель TVDPI (1.33x) используется в некоторых носимых устройствах Android, таких как часы LG G, но мы поговорим об этом чуть позже.
Давайте совместим все в перспективе, связывая Android телефоны и планшеты с их соответствующим DPI.
В настоящее время должно быть одно устройство, использующее XXXHDPI для фактических графических ресурсов приложений, но они все еще очень редки. Если у вас есть дополнительное время, генерация XXXHDPI графических ресурсов создаст задел на будущее вашему приложению.
Необходимые графические ресурсы, пример Chrome
Вам нужно создать по 4 изображения для 1-го графического ресурса, от MDPI в XXHDPI. LDPI можно не трогать. Обратите внимание, что в случае версии Chrome, показанной ниже, был также экспортирован TVDPI, поэтому в данном конкретном случае 5 изображений для 1-го графического ресурса. Как и для iOS, я предлагаю вам взять 100% или множитель 1x в качестве основы для вашего дизайна. Это облегчает подготовку вашего дизайна для остальных множителей, особенно на Android — с такими множителями, как 1,33 и 1,5.
Смотрите ниже пример кнопки назад браузера Chrome на Android:
Именование с добавлением DPI, предложенное здесь, не обязательно и не представлено в официальных руководствах Android. В связи с ограничением текущих средств проектирования так мы называем наши графические ресурсы из-за ограничений текущих инструментов дизайна, которые осложняют определение конкретных путей для экспорта графических ресурсов.
Учитывая, что источник графических ресурсов может иногда содержать сотни графических ресурсов, поскольку менее болезненно делать процесс экспорта и избегать ошибок дублирования имен со стороны дизайнера. В исходном хранилище графические ресурсы структурированы следующим образом:
Как вы видите, графический ресурс основан на квадрате в 32 * 32dp. Проблема Android множителей в том, что некоторые из них со знаками после запятой. Если умножить число на 1,33 или 1,5, скорее всего вы в конечном итоге получите число со знаками после запятой. В этом случае вы хотите округлить число в нужную сторону, так как вы думаете, что имеет смысл. В приведенном случае 32 * 1,33 = 42,56, поэтому мы округляем его до 43px.
Будьте осторожны с элементами пиксельных размеров, таких как штрихи. Вам нужно убедиться, что ваш штрих либо 1px шириной, или 2px по ширине и не размыт, так как описано в разделе разрешение экрана.
PPI Mac и Chrome OS
В понятиях обработки PPI Mac (OSX) и Chrome OS ведут себя одинаково. Обе ОС поддерживают обычное PPI (100%) и PPI высокого разрешения / retina (200%). Есть только 2x множитель также как для Iphone и iPad.
Даже если большинство ваших пользователей, как Mac, так и Chrome OS, будут с небольшим разрешением экрана (на данный момент), я очень рекомендую подготовить на будущее ваши приложения для экранов высокого разрешения. Заготовка на будущее для ChromeOS означает создание графических ресурсов с высоким разрешением для веб-приложения или веб-сайта, это никогда не будет зря потраченным временем.
В настоящее время существует в общей сложности 3 ноутбука, использующих этот PPI, MacBook Pro 13 «, 15» и Chromebook Pixel. Кроме этого, Chromebook Pixel с сенсорным экраном.
Необходимые графические ресурсы, пример Chrome
Прекрасным примером этого сходства был бы графический ресурс кнопки панели инструментов Chrome. Мы используем одни и те же графические ресурсы на обоих платформах. Хотя код отличается, визуально различий нет. Смотрите ниже пример кнопки меню Chrome.
Растягиваемые графические ресурсы
Независимо от того, для десктопов или мобильных устройств ваше приложение, почти всегда нужны растягивающиеся графические ресурсы. Растягиваемый графический ресурс так устроен, что код сможет его увеличивать до нужных размеров без ухудшения рендеринга. Они отличаются от повторяемых графических ресурсов, которые работают по-другому, даже когда иногда отображают один и тот же результат.
Смотрите ниже пример Chrome. Панель инструментов на iOS генерируется с использованием только одного супер тонкого графического ресурса, который повторяется на оси Х во весь экран.
В данный момент нам это не подойдёт, давайте посмотрим, как различные платформы справляются с растягиваемыми графическими ресурсами.
Растягиваемые графические ресурсы на iOS
IOS позволяет дизайнеру это легко сделать, так как растяжение определяется в коде в отличии от нарезки кусков графических ресурсов или маркировки. Все, что вам нужно сделать, это предоставить базовое изображение, и если не вы его создаете – опишите этот графический ресурс как растягиваемый по горизонтали, вертикали или в обе стороны. Смотрите пример ниже, который является на iOS Chrome кнопкой по умолчанию для контента.
Растягиваемые графические ресурсы на Android
У Android, в отличие от iOS, другой способ создания растягивающихся графических ресурсов. Он больше полагается на дизайнера. Для этой платформы вы будете использовать направляющие 9-patch. Эти направляющие состоят из 4 линий, окружающих сам графический ресурс. Они должны быть предоставлены кусками / изображениями, как будто они является частью самого изображения, буквально визуально отображая в нем его характеристики. Они определяют две вещи: масштабируемую область и область заливки. После того, как они определены, код сможет только протянуть то, что вы определили и вставить контент — туда, куда вы его определили.
Смотрите пример ниже кнопки по умолчанию для Android версии Chrome, показанной ранее. В целях демонстрации я сделал ее больше.
Обратите внимание, что вы должны быть осторожны с размерами вашего графического ресурса. Для демонстрации я сделал его довольно большим. Важно, чтоб вы оптимизировали ваш вес графического ресурса, снижая его размер к минимуму, как показано ниже. Я оставил углы, как они были, но сократил область растяжения и содержимого до минимума.
Запомните: всегда спрашивайте человека реализующего ваш дизайн, какое самое лучшее решение принять, особенно для настольных компьютеров. Чем больше у вас изображений, тем тяжелее будет приложение, и вам будет тяжелее отслеживать и обновлять свои графические ресурсы. 9-патч должен использоваться только с хорошими правилами именования и хорошей организацией ваших исходных файлов.
Сенсорное управление и сенсорные цели
Первое, что здесь нужно понять, создание чего-либо для сенсорного управления не имеет ничего общего с DPI. Но когда дело доходит до создания пользовательского интерфейса или генерирования графических ресурсов, важно понять взаимосвязь между сенсорным управлением и DPI.
Выбор между сенсорным или не сенсорным будет зависеть от целей вашего приложения, где оно должен быть развернуто и каким должен быть пользовательский опыт.
Давайте разделим его на простые категории, настольную несенсорную, и мобильную.
Настольные компьютеры, без сенсорного управления
Я не буду здесь давать уроки истории, но если вы родились до 2005 года, вы знаете, что вычислительная техника не была создана с задумкой сенсорного управления.
Мы используем мышь и клавиатуру, которые являются чрезвычайно точными инструментами для навигации по пользовательскому интерфейсу. Точность курсора мыши 1pt. В теории вы могли создать кнопку 1×1 pt, которая была бы кликабельна любым сверхчеловеком.
Смотрите рисунок ниже.
Это 20x версия курсора Chrome OS.
Красная точка — это фактическая область, которая вызывает действие на интерфейсе пользователя. Довольно точно.
Догадываетесь, куда я клоню. Что не очень точно? Наши пальцы.
Итак, как вам делать дизайн для сенсорного управления? Ну, сделайте все больше.
Размер пальцев
Вот средний размер двух наиболее часто используемых пальцев для взаимодействия с интерфейсом пользователя, указательного и большого пальца. Он представляет собой как зону прикосновения и зону загороженную пальцем. Фактическая зона касания (т.е. часть пальца, которая находится в контакте с экраном), конечно, будет меньше и немного более точной, если вы конечно не давите своим пальцем экран.
При проектировании для сенсорного управления, безопаснее переоценить размер, необходимый для сенсорных целей, чем недооценить его.
Примечание: слева средняя область касания указательного, справа большого пальца.
Как применить это к моей дизайнерской работе
Как мы уже видели, дюймы или сантиметры не лучший способ для расчетов в пиксельном мире. Фактически, даже пиксель не очень хороший способ подсчета. Итак, как вам убедится, что ваш дизайн готов для сенсорного управления?
Я скажу очевидное, но вы всегда должны тестировать свой дизайн на целевых устройствах / платформах.
Но, чтобы не терять слишком много времени, есть некоторые базовые размеры в пикселях, которые считаются безопасными в использовании и рекомендованные как базовые для операционной системы
Рекомендуемые сенсорные цели для платформ
Опять же, осторожнее, эти размеры для удобства и не являются единицами измерения чего-либо в реальной жизни. Они работают, потому что OEM и производители следуют руководствам по созданию совместимых экранов в понятии соотношения размер /dpi( точек на дюйм).
Как вы видите, каждая ОС имеет свой собственный набор рекомендаций, но все они около 48pt. Windows в своих спецификациях включает отступы, поэтому я добавил их сюда.
Разница этих размеров происходит от различных факторов.
Apple контролирует свое аппаратное обеспечение, знает качество сенсорного экрана и контролируют точное соотношение сторон экрана. Они могут полагаться на сенсорные цели меньших размеров. Дополнительно их оборудование, как правило, физически меньше.
Android и Windows, с другой стороны, имеют различных OEM-производителей, каждый из которых создает собственное аппаратное обеспечение и использование больших сенсорных целей делает их «безопаснее». Их интерфейсы пользователя также более растянуты (особенно окна) и их устройства, как правило, физически больше.
Пример Chrome
Вот как это применяется в Chrome. Программируемые сенсорные цели отображаются синим цветом.
Как вы можете видеть, обе панели инструментов используют рекомендуемую высоту сенсорной цели для каждой платформы. Также область вокруг изображения — это квадрат 44x44pt и 48x48pt для iOS и Android соответственно. Не только это делает пользовательский интерфейс согласующимся с остальной частью операционной системы в понятиях размеров, но это отличный способ для вас иметь минимальный размер для всего, с чем вы хотите, чтоб пользователь взаимодействовал.
Windows 8 И Chrome OS
Windows 8 и Chrome OS поддерживают как сенсорные, так и бесконтактные интерфейсы. Если вы проектируете для приложения Windows 8, я бы очень рекомендовал следовать их руководствам для сенсорных целей.
Руководство для Chrome OS еще не выпущено, но и использование Pixel (с сенсорным экраном) не большое. Однако, поскольку все приложения Chrome OS основаны на веб, я предложил бы в любом случае проектировать для сенсорных экранов. Моей рекомендацией будет применять руководство Android для сенсорных целей.
Веб, гибридные устройства и будущее
Вам будет ясно, какое принять решение, если вы разрабатываете для мобильных. Делайте для сенсорных экранов. Если вы разрабатываете для настольных компьютеров, выберите несенсорные. Это звучит просто, но это игнорирует новую растущую тенденцию — гибридные устройства.
Гибридным устройством является устройство, которое якобы предоставляет как сенсорное управление, так и несенсорное. Chromebook Pixel, Surface Pro и Lenovo Yoga являются хорошим примером.
Что делать в этом случае? Ну, здесь нет простого ответа, но я забегу вперед и дам один: выберите сенсорное управление. Вот куда будет развиваться технология.
Если дизайн для веб, или чего-нибудь подобного, думайте о сенсорном управлении.
Графическое программное обеспечение
Программное обеспечение не сделает из вас дизайнера, но выбор правильного программного обеспечения для поставленной задачи может сильно улучшить вашу производительность и упростить работу. «Ноу-хау” программного обеспечения не должно быть вашим единственным умением, но обучение и освоение правильного инструмента будет большим вкладом для воплощения ваших идей.
Когда дело доходит до обработки изменения DPI в дизайне интерфейса, все программы работают по-разному. Некоторые из них лучше, чем другие в конкретных задачах. Вот наиболее распространенные:
Photoshop
Мать инструментов проектирования интерфейса. Вероятно, наиболее используемый инструмент сегодня. Для него существует бесконечное количество ресурсов, учебных пособий, статей. Photoshop существует почти с момента возникновения дизайна интерфейса.
Как следует из названия, первая цель программы не была в дизайне интерфейса, а была в ретуши фотографий или растровых изображений. Он развивался в течение года и с рождением дизайна интерфейса, дизайнеры изменили его предназначение. Отчасти это было потому, что они привыкли к нему, и потому, что он был единственной программой, которая была в состоянии сделать вещи так хорошо, как это необходимо.
Так как он изначально основан на растровом изображении, он DPI зависим, противоположно ему Illustrator и Sketch описаны ниже.
Иллюстратор
Векторный редактор, родной брат Photoshop. Как указывает его название, он направлен на иллюстраторов, но его также можно использовать в качестве инструмента дизайна интерфейса.
Иллюстратор подходит для полиграфического дизайна, а поэтому его интерфейс, управление цветом, масштаб, линейки и единицы измерения могут оттолкнуть вас и он требует несколько настроек для того, чтоб его легко можно было использовать только для дизайна интерфейса. Как и Photoshop, это невероятно мощный инструмент, с крутой кривой обучения.
Он отличается от Photoshop тем, что он не зависит DPI за счет основания на векторных формах. В отличие от растровых изображений, графика, сделанная с помощью векторных фигур, опирается на математические формулы и будет пересчитана программно без потери качества.
Понимание разницы между растровым и векторным изображением является ключом к созданию масштабируемого визуального дизайна и графических ресурсов.
Если вы хотите начать работу с использованием Illustrator для веб-дизайна / интерфейса, я рекомендую прочитать»Моя работа с вектором» (англ.) от janoskoos.
Sketch 3.0
Sketch — это новый продукт, по сравнению с Photoshop и Illustrator. Ему только 4 года, эта программа вызвала большой ажиотаж (в хорошем смысле) в индустрии дизайнеров пользовательского интерфейса. Причина в том, что Sketch с самого начала нацелена для использования дизайнерами и дизайнерами опыта пользователя (UX). Без наследия Photoshop или Illustrator Sketch позиционирует себя как прекрасно адаптированный инструмент для ниши пользователей, состоящей из дизайнеров интерфейсов.
Sketch подходит для быстрого создания каркасов а также более сложного визуального дизайна. Он полностью на основе вектора, как и Illustrator, с минимальным и хорошо продуманным интерфейсом пользователя. Сочетание монтажных областей, простота использования и гибкость ее системы генерации графических ресурсов делает его самым быстрым инструментом для мульти-DPI и мульти платформенного дизайна. Недавний выпуск версии 3.0 делают его очень хорошей альтернативой Photoshop.
С другой стороны, Sketch поддерживается меньшей командой и по-прежнему сравнительно молод. Его команда чрезвычайно быстра, но не имеет масштаб Adobe (Photoshop и Illustrator). Sketch предлагает (по дизайну) самый минимум, когда дело доходит до редактирования растровых изображений. Photoshop лучше подходит для такого рода работы. Наконец, в связи с его юностью, ресурсы в виде исходных файлов, учебные пособия и все сообщество на порядок меньше, чем у Photoshop. Как было сказано выше, сообщество очень активно и мотивированно.
Субъективно, я был пользователем Photoshop с тех пор, как я начал работать с дизайном 8 лет назад, но недавно я переключился на Sketch 3.0 в большей части моего процесса проектирования. Это не оценка качества, Photoshop еще чертовски хорошая программа, но он (Sketch) просто удовлетворяет моим потребностям лучше.
Если вы хотите узнать больше о моем конкретном опыте, я рекомендую вам прочитать мою статью Месяц со Sketch 3.0 (англ) или мой «Sketch tutorial_01» (англ).
Хотите погрузиться еще глубже и понять, как векторы работают в Sketch? Переходите к статье @ pnowelldesign «Harnessing vector awesomeness in Sketch».
Запомните: нет идеального инструмента для работы, кроме того, который вам комфортно использовать. Если вы можете себе позволить тратить время и деньги, я рекомендую вам попробовать их все, чтобы составить свое собственное мнение.
Документации и ресурсы
Это руководство только введение, пришло время сделать и узнать больше. Если вы хотите узнать больше или уточнить детали по темам, которые мы обсуждали, вот несколько ссылок (англ):