Разрешение пикселей на дюйм какое выбрать
Сегодня расставим точки над «i» и разберемся в этом очень хитром вопросе.
Часто встречающиеся вопросы на эту тему: меньше или больше dpi? Чем больше – тем лучше качество фотографии? И как это связано с размером самой фотографии?
Все чаще и чаще встречается заблуждение о «качестве» снимков и требуемых 300dpi.
Для начала определим, что такое dpi… Dpi – это параметр, указывающий на разрешение изображения на дюйм при его печати. И тут внимательный читатель задумается. Да-да, именно при печати. И пока вы не печатаете изображение, а просто смотрите на мониторе, обрабатываете в фотошопе – dpi вообще не имеет никакого значения. Оно не влияет ни на качество, ни на то, какого размера вы будете распечатывать фотографию (10*15 или А4) и вообще ни на что не влияет. Единственный важный параметр пока у вас фото в цифровом виде – это размер в пикселях. И всё! Такова суровая реальность.
Давайте разберемся по порядку:
1. Что если меньше или больше 300?
Да можно сколько угодно. Пока не печатаете, то никакой разницы, хоть 1dpi, хоть 1000dpi.
2. А как же качество? Ведь при 300 все хорошо будет, так везде в интернетах пишут и вообще это у всех на слуху. Значит, что если значение меньше, то качество хуже?
Как я уже написал выше – качество никак не связано с параметром dpi. Точка. Смиритесь с этим.
3. Ну а если я собираюсь напечатать фотографию? Тогда этот параметр уже важен и тут чем больше – тем лучше?
Не совсем. Этот параметр указывает, сколько точек (читай: пикселей) будет напечатано на дюйм изображения. При этом значение dpi можно поставить любое. Например, есть фото размером 4000*6000 пикселей. При 300dpi его можно напечатать размером 34 см * 51 см (округлил десятые). Но при этом можно напечатать и с другим значением dpi. При 150dpi – это будет 67,7 см * 101,6 см.
4. А какое значение тогда ставить?
Это уже зависит от того, куда идет печать. Если в глянцевый журнал, то 300dpi вполне подходит. Для дома в семейный альбом – 100-300dpi (примерно). А для для огромного билборда вообще хватит 20-70dpi.
Но повторюсь еще раз – размер в пикселях важнее, если речь идет о качестве! Представьте, что у вас на компьютере есть 2 фото: Одно размером 600*800 пикселей с 600dpi. И второе 2000*3000 пикселей с 70dpi. Какое из них можно напечатать больше и качественней? Казалось бы, первый, у него целых 600dpi - круто, значит его! Но нет, физический размер в пикселях больше у второго файла, не смотря на жалкие 70dpi. Сам параметр dpi, пока он в цифровом файле, ничего не значит. При печати этих двух файлов уже можно выбрать требуемое значение dpi. Мы его усредним до адекватного значения 250 (тут можно было любую цифру взять) и получим физический отпечаток первого файла 6,1 см * 8,1 см, а второй 20,3 см * 30,5 см. Как видите, у кого размер в пикселях больше – у того физический размер при печати больше.
5. Откуда тогда 300dpi и почему его почти везде требуют?
Я не знаю, откуда взялась цифра именно 300, но при таком значении типография или фотолаба вам как бы гарантирует отличное качество печати (с учетом, что и размер в пикселях соответствует). По сути, это усредненная цифра, которая может варьироваться в зависимости от ваших задач при печати.
На этом фото открыты 2 фотографии в фотошопе. У фотографии слева 900dpi. У фото справа 1 dpi. Как видите, физически они выглядят абсолютно одинаково.
Если вдруг вам попался человек, который называет себя профессионалом и требует от вас какие-то нелепые 300 dpi, сам не понимая, что они значат – это неуч с которым не стоит работать. Не может человек быть профессионалом, если ему нужны какие-то параметры, в которых он сам ничего не понимает. Лучше отказаться от услуг такого человека. Будь-то ретушер, фотограф, иллюстратор или еще кто-либо.
А теперь немного лирики. Я уже давно собирался написать эту статью, но все откладывал. А последнее время всё чаще и чаще объясняю людям, что dpi при цифровом виде фотографии ничего не значит. Накипело.
Из реальных случаев:
1 – Пишет мне заказчик. Изначально был скан фотографии. А на выходе нужно, цитирую: «Нужно качество около 600dpi, т.е. цифровое фото, а не редактированнный скан..».
2 – В одном паблике ретушеров зашел разговор о том, сколько выставлять dpi при ретуши… И вот цитата одного ретушера: «Меня как-то хотели заставить переделывать, потому что стояло 240.».
3 – Нам нужна фотосессия, 10 фото на выходе с 300dpi.
Я надеюсь, вы тоже оценили абсурдность этих случаев. и это только за последнюю неделю.
Случалось ли вам попадать в следующую ситуацию? Начальник или заказчик хочет понять, какого размера будет ваш дизайн в напечатанном виде, но монитор не показывает реальный размер. Вам остается лишь подгонять макет по линейке лупой, и прикладывать к экрану листики. После этой статьи этому придет конец!
Для начинающего дизайнера это уникальный материал, который я собирал по крупицам. По правде говоря по настоящему разобраться я смог только на практике. На сайте Хронофаг.ру я уже писал о изменении разрешения для подготовки к печати. В этой статье я расскажу о том, как измерить в реальном физическом измерении разрешение вашего монитора. Вы так же узнаете, что означает заветная цифра 72dpi и 96dpi, которые можно встретить при создании новой рабочей области в Фотошопе и не только в нем.
Область применения теории
Всё вышеизложенное может быть применено в совершенно различных областях человеческой деятельности.
В случае веб-дизайна можно теоретически обосновать ширину страницы не больше 1000px, только это будет не совсем точная величина, т.к. правильнее было бы говорить о ширине визуального поля и ограничении в 32см (которое в настоящее время и соответствует значению, хоть и весьма грубому, не больше 1000px, если говорить о некоем сферическом мониторе в вакууме).
Также можно обосновать применение шрифтов 16px на сайтах — угловой размер такого шрифта будет стараться укладываться в обоснованный выше угловой размер, вне зависимости от монитора и разрешения.
Теорию можно использовать и при разработке программного обеспечения, учитывая размер визуального поля и минимальный размер шрифтов.
В случае мобильной разработки я бы рекомендовал уменьшить расстояние до 30см
Для меня было удивительно, что понятие угловых размеров и их соотношение с остротой зрения так скудно используется в повседневной жизни. А ведь используя угловые размеры можно, например:
- законодательно закрепить минимальный размер шрифта в договорах (исключить «мелкий шрифт»);
- размер шрифта на этикетках (чтобы состав можно было прочесть без увеличительного стекла);
- размер шрифта про употребление пива и прочие условия в рекламе;
- размер шрифта для бегущей строки в телевидении;
- проводить аттестацию рабочих мест на использование подходящих средств производства;
- определять размеры объектов в рекламе (любой объект на баннере должен быть не меньше… чтобы его было видно с расстояния . );
- и т.д. и т.п., фактически можно описать все случае, где сейчас используется неформализованное понятие «мелкий» или «крупный».
Что такое разрешение (Resolution)
Разрешение (resolution) — это количество пикселей (pixels) на 1 дюйм (inch). Параметр связывающий виртуальность с реальностью. Именно он отвечает за то, в каком качестве распечатается изображение, потому что одно дело, когда в дюйм укладывается 300 пикселей и совсем другое, когда в дюйм укладывается 72 пикселя.
Если вы распечатаете изображение с разрешением 72ppi (pixels per inch) то скорее всего на распечатке вы сможете разглядеть пиксели, в некоторых особо щепетильных местах изображение будет походить на мозаику. Так же как походило на мозаику изображение на мониторе бабушки в 1998 году в изображениях иконок от Windows 98 и не только их. Низкое разрешение для печати зло и его надо изменить, за этим мы и здесь.
От величины разрешения зависит фактически размер фотографии при перенесения её с монитора на бумагу. Так как если изображение величиной 500 на 500px и его разрешение 100ppi то фактически размер этого изображения — 5 на 5 дюймов. Напомню, что в дюйме 2,54см. 100ppi конечно маловато для печати, поэтому мы меняем разрешение на 300ppi но и физический размер уменьшится вместе с изменением разрешения, так как разрешение фактически является соотношением пикселей к физическому размеру (см дюймы, сантиметры). Увеличиваем качество укладывая в дюйм больше пикселей, но и физический размер становится меньше, так как пикселей всего 500 и дополнительным взяться не от куда. Но об этом мы ещё поговорим.
Замечу, что в Фотошопе принято другое обозначение разрешения (resolution). Вместо ppi принято dpi, что расшифровывается как dots per inch. Это предмет совершенно другой темы и извечных споров между сторонниками правильных формулировок. Dot (точка) это точка, которую ставит принтер при печати. И если вы хотите узнать больше о подготовке к печати прочтите мои статьи: Подготовка к печати за 10 минут и Как сделать Флаер
WQHD, 2560x1440 (16:9)
Увеличить или уменьшить?
Каверзный вопрос. Закрепляя физический размер мы растягиваем изображение. Закрепляя размер в пикселях, уменьшаем физический размер. Где золотая середина? Специалисты по графике и печати допускают легкое увеличение изображения не более чем на 10% от его реального размера. Именно такое растягивание не заметно глазу. На практике все значительно сложнее.
Приведу небольшой пример. Я взял наше изображение с Человеком пауком и изменил его разрешение 2 раза, но в первый раз я разрешил ресемплинг, а во второй раз запретил. Теперь я помещу оба изображения на одну рабочую поверхность для сравнения их реального физического размера.
В первом случае мы получаем супер качественное изображение, но на столько маленькое, что его можно распечатать лишь на визитке супер героя. Вторая большая, но отвратительного качества, с увеличенными артефактами и размытыми краями. Выбор за вами.
Какие перед вами задачи? Получить большое изображение или маленькое? Если вам необходимы маленькие картинки для оформления статьи в каталоге изменить разрешение без увеличения отличное решение. Если оригинального изображения не хватит, его можно будет увеличить совсем чуть чуть.
Если вам необходимо большое изображение, то вы получите размытые края, увеличенные артефакты и полный букет некачественной картинки. Это не так плохо, если изображение готовиться для уличного плаката, на который будут смотреть с 30 метров, и ужасно если изображение готовится для журнала или буклета. В последнем случае нужно признать, что изображение просто не годится для печати, и нужно найти изображение побольше размером. Но если альтернатив никаких придется работать с тем что есть, растянув картину, и пытаясь как-то улучшить результат при помощи массы фильтров Фотошопа. Это извечный выбор с которым сталкивается каждый дизайнер.
Разрешение фотографии на мой взгляд является самой щепетильной темой в графике и дизайне, хотя бы потому, что на эту тему отсутствуют доступные и понятные материалы. Я перелопатил немало книг, и в каждой из них затрагивалась тема разрешения. И каждый раз эта тема была описана настолько теоретически и замысловато, что разобраться удалось лишь на практике. Я постарался описать эту тему максимально доступно и надеюсь у меня получилось. Подписывайтесь на RSS.
Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но путают термины и опытные специалисты.
Начнём с главного: растровые изображения состоят из пикселей. На этом можно было закончить данную статью, но не всем этого достаточно, поэтому поговорим о заблуждениях и мифах, которые я встречал на практике.
Как измерить флаер на мониторе?
Так как же измерить реальное разрешение монитора, и почему кнопка Print Size не работает? Не волнуйтесь, все под контролем. Кнопка не работает из за неправильных настроек разрешения. В настройки разрешения прокрались артефакты прошлого 72 или 96ppi. Вам нужно выставить реальное разрешение вашего монитора и тогда все будет как надо.
При этом важно понимать, что монитор поддерживает несколько разрешений разом. Например тот, на котором работаю сейчас я, поддерживает размеры от 800 на 600 до 1920 на 1080 пикселей. Последнее конечно установлено по умолчанию.
Важно понимать, что при размере в 800 на 600 пикселей в дюйме будет одно количество пикселей, а при разрешении в 1920 на 1080, совсем другой. Значительно больше. Нам конечно важно самое лучшее разрешение, которое может поддерживать ваш монитор, а не самое худшее. От него и будем отталкиваться.
Как в Фотошопе изменить разрешение
Наша задача — подготовить скачанную из интернета картинку для качественной печати, а общепринятое разрешение для таковой 300dpi. Откройте изображение и зайдите в Image > Image Size
В появившимся диалоговом окне мы видим три области. Это, прежде всего Pixel Dimension, которое рассказывает нам, сколько всего пикселей в нашей картинке и Document Size (размер документа), который говорит нам о том, какое разрешение в изображении, и какой физический размер получится при печати исходя из этого разрешения.
Физический размер моих обоев 28 на 21 см. Достаточно много, практически на целый лист A4 и это не удивительно, ведь на 1 дюйм укладывается всего 72 пикселя. Изменим разрешение на больше и посмотрим что произойдет.
Как только мы изменили разрешение меняются все параметры. Параметры размеров Pixel Dimensions подскочили в 3 раза. Вместо 800 пикселей по ширине стало 3333 пикселя. Не трудно догадаться, что фотография фактически увеличивается в 3 раза. Что происходит?
Когда я только начинал работать с Фотошопом данное свойство изменения разрешения повергало меня в ужас. Я не хотел менять размер, хотел лишь поменять разрешение. Но размер и разрешения вели себя так, как будто они связаны. Знаете что, они действительно связаны. Дело в том, что Фотошоп старается сохранить физический размер 28 на 21 см. Но как это сделать если меняется разрешение?
Приведу пример: вот есть у нас картинка 100 на 100 пикселей и разрешение 100dpi. Соответственно физический размер её 1 дюйм, но вдруг мне взбрело в голову увеличить разрешение до 300dpi. Как Фотошопу сохранить физический размер в 1 дюйм, но увеличить количество пикселей. Откуда ему достать лишние 200 пикселей? Известно откуда, придумать самому. Если Фотошоп не добавит пикселей сам, он не сможет сохранить физический размер. Поэтому размер изображения увеличивается вместе с разрешением. Это взаимосвязанные параметры.
Поэтому я нажму ОК. Изображение увеличивается. Разрешение 300dpi, физические размеры остаются те же 28 на 21см. Отлично. Но что происходит теперь? Фотошоп увеличил изображение. Он не маг и волшебник, он просто добавил схожие по цвету пиксели. Фактически небольшое изображение растянулось так, как растягивается рисунок на воздушном шарике при надувании. Его контуры растянулись и расплылись. Более того, изображение было не очень качественным, его подвергали JPG сжатию, и при увеличении все небольшие артефакты сжатия расплылись и стали видны. Пока оно оставалось маленьким дефекты были не заметны, но при увеличении все вылезло наружу. Откуда я это знаю?
Это не сложно заметить при увеличении фотографии инструментом Zoom Tool. Это не сложно заметить, пройдясь по каналам фотографии. Наибольшему искажению подвергся Синий канал, но сейчас не об этом. Если вас интересуют каналы, прочтите мою статью Каналы в Фотошопе.
Есть другой способ увеличения разрешения о котором я сейчас расскажу.
Разрешение мониторов измеряется пикселями
Говоря о разрешении постоянно происходит страшная путаница. Под разрешением в Фотошопе понимают количество пикселей на 1 квадратный дюйм, под разрешением монитора подразумевают количество пикселей по ширине и высоте экрана. Что говорить о разрешении камеры или разрешении фотоаппарата.
Причина путаницы в неправильно переведенных терминах английского языка. Люди постоянно путают слова resolution и dimension. Винить их за это не стоит, смысл действительно очень схож.
Но сейчас мы говорим о разрешении мониторов. Под разрешением вашего монитора подразумевается его ширина и высота в пикселях. И не более.
Когда я учился в школе, компьютерные мониторы имели разрешение не более 800 на 600 пикселей. И это считалось весьма неплохо. У некоторых счастливчиков были мониторы 1024 на 768 пикселей. Эти, понятно, считались самыми крутыми на всю школу.
Время прошло, сегодня у моих родителей средний монитор с разрешением 1920 на 1080 пикселей. Что это значит, выражаясь простым языком? Это значит что за 10 лет наши мониторы получили дополнительную 1000 пикселей, по высоте и ширине. Но их физический размер остался примерно таким же. Мониторы не выросли в два раза. Возможно немного разошлись по ширине. Widescreen, знаете ли. Но и разрешение изменило пропорции.
Так сколько же пикселей в одном дюйме вашего монитора?
Практическое применение
Попробуем применить теорию на практике: для выбора оптимального размера монитора.
В целях более удобной работы с данными требуется получить наглядное сравнение как изменяются размеры объектов на экране в зависимости от разрешения и диагонали.
Чтобы легко можно было проводить сравнение, на бытовом уровне, предлагается следующий способ.
За основу был взят лист формата А4 с текстом, написанным разными шрифтами и размером в от 10 до 14-16 пунктов. Другими словами, если распечаталь такой лист, то текст на экране без масштабирования будет сравнимо больше или меньше. Так что — распечатайте лист, написанный шрифтами разного размера и отодвиньте от себя на такое же расстояние, как и планируется установить монитор (здесь мы говорим о 60см). Если читать текст размером меньше 12 пунктов комфортно — можно смотреть меньшую диагональ/большее разрешение. Если и 12pt читать не комфортно — следует смотреть бОльшую диагональ или меньшее разрешение.
Для сравнения также даны изображения мониторов (по аналогии со значками Рабочего стола), слева направо: 32px, 64px, 128px. С незапамятных времён повелось, что размер иконки рабочего стола — 32х32 пикселя (конечно, я говорю про Windows до того момента, как иконки стали 64 и более пикселя).
Самое удивительное, что если взять изначальное обоснование, то «древние квадратные мониторы» практически идеальны. Их геометрические размеры или меньше 321мм или допустимо больше: 304х244мм — 15 дюймов, 345х276 — 17 дюймов, 386х309мм — 19 дюймов. Т.е. квадратные мониторы практически полностью охватывают человеческое поле зрения.
А теперь что у меня получилось для современных разрешений и размеров мониторов. Нажмите на изображение, чтобы открыть в оригинальном размере.
Как увеличить разрешение не увеличивая размер
Мы хотим увеличить разрешение, но не хотим увеличения размера фотографии в пикселях. Тогда готовьтесь к тому, что изображение потеряет в физическом размере. Откройте изображение и зайдите в Image > Image Size. В нижней части диалогового окна 3 галочки. Они и отвечают за связку между различными параметрами.
Scale Styles — увеличивает или уменьшает стили. Если вы создавали дополнительные слои или шрифты и присваивали им стили, есть смысл оставить эту галочку.
Constrain Proportions — связывает параметры высоты и ширины физических и пиксельных размеров. То есть, изменяя ширину картинки в пикселях с 800 на 1000, высота (600) следует за шириной, превращаясь в 800px. Таким образом картинка увеличивается пропорционально, а не по ширине, и вам не нужно ничего подбирать “на глаз”. Советую оставить в покое и эту галочку.
Resample Image — вот что нам нужно. Эта опция перестраивает размер изображения в пикселях, если нам пришло в голову изменить разрешение. Соответственно, она увеличивает изображение, так как лишним пикселям взяться не от куда. Отключим её и изменим 72dpi на 300dpi
Теперь меняется физический размер документа, что тоже закономерно. Раз пиксели 800 на 600px закреплены, то Фотошоп пересматривает размер документа, чтобы уложить в него 300 пикселей на дюйм. Лишним пикселям взяться не от куда, насильно увеличивать фотографию запрещено, поэтому Фотошоп уменьшает физический размер документа. Bот как мы изменяем разрешение в Фотошопе.
Возвращаясь к нашему виртуальному примеру, и документу 100 на 100px с разрешением в 100dpi. Если изменить разрешение такого документа на 300dpi, убрав галочку Resample Image Фотошопу придется уменьшить документ в 3 раза. Если Resample Image оставить включенным, Фотошопу придется увеличить количество пикселей в 3 раза, чтобы уместить их на одном дюйме.
Как узнать разрешение своего монитора
Разрешение вашего монитора должно быть написано в техническом паспорте монитора. Чаще всего найти его невозможно. В технических характеристиках реальное разрешение тоже пишут не всегда. Более того, не всегда пишут даже размеры по ширине и высоте. Для своего старого Samsung я отыскал размеры с учетом пластиковой окантовки, а это совсем не то что нужно. Вам нужен чистый размер экрана, и не более.
Если найти размеры или разрешение не удалось, переходим к плану Б, палке и веревке. Берите линейку, измеряйте монитор по ширине и высоте. Я измерил монитор LG, на котором пишу статью, получилось 48 на 27 см.
1 дюйм = 2.54 см То есть мой монитор примерно 19 на 10,5 дюймов. Я округляю, потому что особая точность тут не нужна. Да и о какой точности можно говорить, измеряя монитор линейкой.
Разрешение на мониторе установлено 1920 на 1080 пикселей. Делим ширину 1920 на 19. Округленно получаем 100. При делении 1080 на 10,5 получается столько же. Вот и все, реальное разрешение монитора 100ppi.
То есть, на 1 дюйм монитора, при разрешении 1920 на 1080, умещается около 100 пикселей.
Выводы
Например, в случае разрешения UltraHD и 32 дюймов диагонали размер шрифта 12pt будет таким, как будто он напечатан размером около 8pt (практически на треть мельче). А при меньшей диагонали — ещё меньше. И если, в случае игрового контента, это не так важно, то для программ, которые не поддаются масштабированию — будет не комфортно.
Также, если у Вас сейчас монитор с разрешением 1920x1080 и размером диагонали 21 дюйм, то при переходе на бОльший монитор с разрешением 2560х1440 и размером диагонали 27 дюймов — всё останется примерно таких же размеров. А при 2560х1440 и диагональю больше 27 дюймов — объекты станут чуть крупнее.
Самый большой же UltraHD монитор будет отображать объекты мельче, чем 19 дюймовый с разрешением FullHD. И, по вышеописанной логике, при разрешении UltraHD и без масштабирования, комфортным будет размер от 42 дюймов.
Зачем это всё? Повторюсь, всё зависит от того, с какими приложениями приходится больше всего работать. Если это всё относительно старые приложения, которые не умеют масштабироваться средствами ОС — то лучше избегать высоких разрешений, будет слишком мелко.
Опять же, если операционная система вполне нормально осуществляет масштабирование — можно всегда подобрать подходящий масштаб и получить изображение «без лесенки».
Но, при этом, не стоит забывать о размере визуального поля. А если отодвигать монитор дальше, то его диагональ будет уменьшаться. Также из изображений выше можно видеть, что для некоторых размеров диагоналей размер визуального поля делит общую площать пополам, либо на четверти, либо любым другим способом. Это значит, что Вы сможете разбить этот экран на несколько рабочих зон. Но лично моя практика показывает, что работать с одним окном, в таком случае, становится не удобно. Хотя играть или смотреть кино — вполне нормально.
Также, специалистам определённых профессий, может быть наоборот крайне удобно освобождать визуальное поле от разного рода панелей управления и прочих окон, которые не требуют постоянного внимание. В таком случае будет лучше выбрать монитор, наиболее подходящий под Ваши нужды с дополнительным пространством вокруг визуального поля. Например, очень удобны UltraWideHD мониторы для работы в графических редакторах, т.к. позволяют освободить рабочую область от лишних окон.
Благодарю, что дочитали до конца.
А чем Вы руководствуетесь при выборе разрешение и размера монитора? Подходят ли Ваши личные ощущения под описанную теорию?
Настраиваем разрешение в Фотошопе
Наконец, как настроить кнопку Print Size в Фотошопе? Идем в настройки Edit > Preference. Открываем вкладку Units & Rulers. В диалоговом окне, в настройке Screen Resolution меняем выдуманное разрешение на правильное. В моем случае на 100. Все.
Теперь попробуйте создайте лист A4 с разрешением 300dpi. Допустим мы подготавливаем листовку на печать. Найдите на рабочем столе реальный листик A4. В Фотошопе нажмите кнопку Print Size. Приложите листик к экрану. Дело сделано.
Теперь, на вопрос заказчика, а «какого это будет размера в реале?» вам не придется чертить в воздухе руками, не придется подгонять по линейке экран, не придется прикладывать к бумажке и говорить, а вот такого. Достаточно кликнуть по Print Size. Фотошоп сам все покажет.
Надеюсь эта статья оказалась вам полезной и удачных экспериментов в полиграфии!
Вы хотите поменять разрешение в Фотошопе? Я проделываю это не первый год и мне есть чем поделиться с вами. Для этого урока я специально сохранил из интернета обои из фильма Человек-паук, небольшого размера 800 х 600px. Прежде чем приступить, давайте определимся с терминами Фотошопа, так как в этом деле они очень важны. Если же у вас с терминами порядок, сразу переходите к части о том как менять разрешение в Фотошопе.
Какое разрешение выбрать?
Если вы готовите визитку, флаер, каталог, книжку, обложку, что угодно, на что мы смотрим с расстояния вытянутой руки работайте в разрешении 300dpi. Если вы готовите постер, то учитывайте то, что постеры висят на стенах, на постеры смотрят с расстояния более одного метра, не ближе, и такая степень детализации постеру не нужна, можно работать в разрешении 200-250dpi. Но если у вас есть возможность и подходящая графика большого размера и хорошего качества чтобы работать с 300dpi можно не уменьшать разрешение. Если вы готовите изображение на витрину магазина, его разрешение может быть 150dpi, а изображение на рекламный баннер, который будут видеть проезжающие мимо машины может смело содержать 90dpi, так как его рассматривают с огромного расстояния.
Второй аспект этого вопроса — вес изображения. Баннер с человеком пауком на стену дома 6 на 5 метров при разрешении 300 dpi будет занимать 70 000 px в ширину, а весить будет 11 гигабайтов. Работать с таким фаилом невозможно. А даже если бы и было возможно, то передать типографии его можно было бы только лично, на переносном жестком диске. И даже в этом случае они не примут его. Размер должен быть разумным, в пределах 100 мегабайтов. И это мои общие рекомендации при выборе разрешения. Придерживайтесь их если у вас нет возможности узнать у типографии технические требования к макету.
Теория
Давайте попробуем перевести рассуждение о том, что «чем больше — тем лучше» в теоретическую плоскость.
Возьмём за отправную точку таблицу Дмитрия Александровича Сивцева. Это та, что используется для проверки остроты зрения.
Вторая строчка снизу, которая считается показателем 100% зрения, имеет размер буквы 7мм. К сожалению, я не нашёл информации — речь идёт о строчных или прописных буквах. Предлагаю считать, что о прописных.
Угловой размер буквы с расстояния 5 метров равен 0 градусов 4 минуты 49 секунд (0º 4' 49''). Допустим, расстояние до монитора 60см, тогда минимальный размер буквы, которую можно прочесть будет порядка 0.84мм.
Но полученное значение — тот минимум, который может быть прочтён человеком со 100% зрением. И мы сейчас говорим о прописных буквах, размер которых в 1.5-2 раза больше строчных. Назвать этот уровень комфортным было бы не правильно, долгое время работать при такой нагрузке было бы не комфортно и не правильно. ГОСТ Р ИСО 9241-3-2003 также оперирует угловыми размерами и, например, говорит о минимальном размере в 20'-22'. А это примерно 3.69-3.84мм. Также в пункте 5.4 определяется минимальная высота знака в 16' или 2.79мм.
Увеличим размер букв в два раза. Т.е. строчная буква должна быть размером не менее 1.68мм или 9' 38'', прописная в 1.5-2 раза больше или 2.52-3.36мм или 14'26''-19'15'' (верхняя граница чуть меньше, чем нижняя граница из ГОСТ).
Рассмотрим на примере трёх шрифтов: Arial, Times New Roman, Segoe UI.
Как видно из рисунка — самыми мелкими являются буквы шрифта Times New Roman. При этом размер самых маленьких букв из представленных строчных (размеры получены с помощью векторного редактора Inkscape).
- 1.433х1.657мм для шрифта размером 10 пунктов;
- 1.576х1.823мм — 11pt;
- 1.72х1.989мм — 12pt, размер прописной буквы 2.977х2.867мм;
- 1.863х2.154мм — 13pt;
- 2.006х2.32мм — 14pt;
- 2.15x2.486мм — 15pt;
- 2.293x2.651мм — 16pt, размер прописной буквы 3.969х3.823мм.
Также следует понимать, что данный расчёт справедлив для отдельно стоящего монитора, если Вы работаете, например, с ноутбуком и экран находится ближе — то размер шрифта может быть уменьшен.
Если говорить о ширине и высоте экрана, то за основу можно взять понятие Визуального поля. В разделе «1.11. Эргономические основы безопасности труда» учебного пособия «БЕЗОПАСНОСТЬ ЖИЗНЕДЕЯТЕЛЬНОСТИ» (Н.А. Чулков, «Национальный исследовательский Томский политехнический университет», 2011 год) — говорится, что оптимальные углы обзора составляют от -15º до 15º. Т.е. 30º. Исходя из расстояния 60см это порядка 321мм по высоте и ширине. Т.е. всё, что выше или шире — будет требовать или напряжения глазных мышц или поворота головы (к вопросу покупки телевизора 50 дюймов и установки его на расстоянии «вытянутой руки»).
Другими словами: вся информация, что не помещается в Визуальное поле — будет требовать принудительного напряжения глаз или поворота головы. Максимальный угол поворота глаз по горизонтали — порядка 40º, итого — 80º или порядка 1007мм. Но следует понимать, что эта цифра уже находится за пределами зоны комфорта.
Что такое размер (dimension)
Размер (dimension) — это общий размер изображения по ширине и высоте. Он измеряется в пикселях. Например, фотография с которой мы поработаем 800 на 600 пикселей. Между двумя терминами — размером и разрешением (resolution, dimension) происходит тотальное сражение. В настройках размера монитора в Windows размер экрана описан термином — разрешение. Хотя речь идет об обычном тупом размере по высоте и по ширине, а не о его разрешающей способности. Реальная же разрешающая способность мониторов до сих пор не очень высока, у разных мониторов она колеблется от 100 до 120ppi. То есть на 1 дюйм экрана монитора по ширине и высоте укладывается примерно от 100 до 120 пикселей.
Многочисленная реклама оптики, телевизоров и мониторов сбивает с толку, где физический размер экрана называют то размером пиксельным (dimension), то разрешение называют размером, то способность объектива фотографировать фото большего размера (dimension) опять же называют разрешением. Одним словом, в этой путанице сложно разобраться что есть что. Особенно когда в строй вводят третий термин — резолюция, перекладывая английский на русский, а затем тут же говорят — разрешение, подразумевая что то четвертое. Итак, в Фотошопе, Иллюстраторе и ряде других графических программ:
Размер (dimension) — фактический размер фотографии в пикселях по высоте и ширине. Например 100 на 100 пикселей.
Разрешение (resolution) — количество пикселей в одном дюйме. Например, 100dpi значит в одном дюйме 100 пикселей. То есть физический и фактический размер изображения 100 на 100px при разрешении 100dpi будет 1 дюйм.
DPI/PPI экранов
Здесь мы подошли к вопросу разрешения и плотности пикселей экранов. Корректно эта плотность обозначается как PPI (pixels per inch) и показывает, сколько пикселей может быть отображено на одном дюйме экрана.
Здесь часто возникают мифические 72 и 96 PPI, которые должны показывать «стандартную» плотность пикселей для экранов. Для задач отображения графики в вебе они бесполезны. При этом реальная плотность пикселей экрана может быть совсем другой: типично что-то около 120 PPI (можете измерить и посчитать для своего экрана).
Но мы помним, что растровые картинки измеряются только в пикселях и никак иначе. Зачем мы вообще говорим о PPI экранов? Потому что есть «Retina» или «HiDPI» экраны.
Как вычислить реальный размер на экране?
Ответить на вышеназванный вопрос поможет Фотошоп и ловкость рук. Случалось ли вам сталкиваться с щепетильным заказчиком, который хотел понять, сколько места будет реально занимать ваш стикер, флаер, обложка или открытка? При этом продукт на печать не пошел, он существует только в мониторе?
В этой ситуации вы стараетесь объяснить, что размеры не совпадают, но примерно…. и начинаете подгадывать размер инструментом Увеличительным стеклом, сверяя его с линейкой, положенной на экран. Ладно, признаюсь, я так делал когда только начинал работать.
В вычислении реального размера вам поможет инструмент Лупы 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, пока вы готовите макет для экрана это не имеет никакого значения, учитывая то, что соотношение разрешения к размеру рабочей области можно пересчитать в считанные секунды.
Full HD, 1920x1080 (16:9)
DPI, PPI и изменение размеров
Самое частое заблуждение — использование единиц DPI (dots per inch — точек на дюйм) и PPI (pixels per inch — пикселей на дюйм). На самом деле эти единицы относятся к принтерам и сканерам соответственно. Также их можно применять в характеристиках экранов. По сути это коэффициенты для перевода между физическими размерами в аналоге (в сантиметрах или дюймах) и размерами в пикселях для цифрового изображения.
Например, изображение в 100 пикселей, распечатанное с разрешением 100 DPI будет иметь размер 1 дюйм. Всё просто и понятно.
Однако, при изменении размеров в графических редакторах нам предлагают указать размеры в удобных нам измерениях, в том числе в DPI. Здесь и начинается путаница.
На самом деле физические размеры изображения (в сантиметрах, дюймах и т.д.) и значение DPI это всего лишь мета-информация в свойствах файла. Но редактор может использовать эти значения как средство указания требуемых размеров в пикселях.
Допустим, у нас изображение размером 3000 пикселей (квадратное), у которого стоит значение 300 DPI. Получаем: 3000 пикселей / 300 DPI = 10 дюймов. А теперь заходим в редактор (Photoshop) и изменяем значение DPI на 600. Что мы получим? А это зависит от галки «Resample». Если она стоит, мы получим upsampling (увеличение) изображения до 6000 пикселей. Если не стоит, то размер в дюймах станет 5 вместо 10.
Таким образом, для веб-разработки все значения физических размеров (DPI, сантиметры, дюймы и т.д.) можно смело игнорировать и смотреть исключительно на размеры в пикселях.
Retina и HiDPI экраны
Такие дисплеи широко распространены в мобильных устройствах и дорогих ноутбуках. По сути это количественное увеличение пикселей при сохранении физических размеров экрана (например, 5 дюймов по диагонали и 330 PPI).
Для нас, как веб-разработчиков это значит появление разных пикселей в браузере: CSS-пикселей (которые мы обычно указываем в размерах элементов) и физических пикселей (реальных пикселей на экране). Формула такая: Физические пиксели = CSS-пиксели * DPR.
DPR это device pixel ratio — коэффициент перевода CSS-пикселей в физические.
При размещении картинки мы можем написать тег img с размерами 20px, а картинка будет 40 пикселей. При этом на экране с DPR=2,0 мы увидим все пиксели картинки. Но в этой ситуации нас абсолютно не волнуют реальные значения PPI экрана.
При этом мы можем использовать картинки с высокой плотностью пикселей и для обычных экранов, браузер сам отмасштабирует изображение. И опять, DPI и PPI здесь ни при чем, а картинки измеряются в пикселях. Как их показать будет решать браузер, у которого уже есть два вида пикселей.
Вот и вся история, хотя я конечно ничего не говорил об адаптивных картинках, способах оптимизации их отдачи и client hints. Но это другая история.
Выбирая очередной монитор, решил «упростить» себе процесс выбора среди обилия мониторов на рынке. А получилось использовать некоторую, возможно даже научно-обоснованную, теорию, покрывающую многие области человеческой деятельности, в общем, и выбор монитора, в частности.
Надеюсь, мои изыскания кому-то также пригодятся, а также позволят сохранить зрение и нервы.
Всё нижеизложенное является моими личными соображениями, наблюдениями и выводами. Всё нижеописанное касается исключительно геометрических и габаритных вопросов. Вопросы типов матриц, частот и прочего в данном материале не рассматриваются.
Тем не менее, я не претендую на уникальность суждений или открытие чего-то совершенно нового: О размере экрана, пикселя и элемента; От адаптивного дизайна – обратно к «резиновому»; Размер символов на Вашем мониторе: маркетинг против зрения и т.д. В моём случае сначала была теория в применении к выбору монитора, а потом уже поиски единомышленников.
Разрешение монитора
Как обычно, при выборе разрешения можно руководствоваться сравнением разрешений. В общем случае — чем больше разрешение, тем лучше. О том, почему не всегда это является аксиомой — ниже.
Но что нам говорит разрешение? Разрешение говорит только о размере рабочей области. Сколько виртуальных окон/кнопок/управляющих элементов/букв поместится на заданной рабочей области.
Однако, здесь есть некоторые особенности, которые стоит учитывать. Это касается интерфейсов подключения — в настоящее время следует всегда сверяться с имеющейся версией подключения/кабеля. Например, на английской версии википедии про HDMI есть таблица (внизу страницы) с весьма понятной зависимостью разрешения от пропускной способности канала. Из которой, например, следует, что любой монитор, обладающий характеристиками лучше, чем 1920х1080х60Гц — требует особо тщательного подбора кабеля, а также поддержки соответствующего стандарта со стороны видеоадаптера. В качестве примера — мои приключения про подключение UltraWideHD монитора к ноутбуку, который так и не смог заработать на частоте 75Гц из-за ограничений интерфейса.
А вот дальше начинается самое интересное. Рынок предлагает массу интерпретаций рабочей области. Я говорю об одном и том же разрешении и различных диагоналях мониторов.
С выбором подходящей диагонали и отношения сторон чуть сложнее. Использование неформализованного аппарата «это для фильмов, это для видео, это для игр» не является научно-обоснованным. Требуется не просто сравнить диагональ, высоту или ширину, а подойти к этому вопросу с точки зрения некоторой теории.
UltraWideHD, 2560x1080 (21:9)
UltraHD, 3840x2160 (16:9)
Читайте также: