x
 
Николай Лисов
24 октября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:
На днях пересел за Мак с «ретиной», и не могу разобраться с разрешением в Фотошопе. Делаю скриншот — макеты получаются в два раза больше. Какой ставить Resolution в макетах (72, 96, 144)? Или нужно где-то ещё в настройке Фотошопа что-то сделать, чтобы масштаб был 1:1 и у меня, и на других компах?

До изобретения «ретины» увеличение разрешения экранов приводило к уменьшению элементов на них. Если 15˝ экран переключить из режима 800×600 в режим 1024×768, пиксели становятся меньше. А поскольку размеры всех кнопок, окон и текста заданы в пикселях, то все элементы становились пропорционально меньше.

На Маках с ретиной разрешение радикально выше, чем на Маках без ретины, поэтому с таким подходом всё получилось бы нечитаемо мелким.

Ретина работает иначе. Если физическое разрешение вашего экрана — 2880×1800 пикселей, то операционная система относится к нему так, будто это экран 1440×900. Если в коде программы у кнопки указаны размеры 80×25 пикселей, система рисует кнопку в 160×50 экранных пикселей. То есть всё рисуется вдвое большего размера в пикселях, но поскольку сами пиксели вдвое меньшего размера, то «наблюдаемые» размеры остаются прежними.

Это автоматическое умножение на два, призванное компенсировать уменьшившиеся вдвое пиксели, встроено в операционную систему. Когда вы запускаете любую программу, даже написанную до ретины, она выглядит нормально — система увеличивает всё до ожидаемых размеров.

Но Фотошоп — это графический редактор, и он показывает ровно те пиксели, которые есть в макете.

Предположим, ещё до ретины вы нарисовали макет страницы сайта размером 1200×5000 пикселей. Если вы откроете этот макет в Фотошопе на ретине, он будет вдвое меньше на вид, чем вы ожидали, потому что на ретине сами пиксели вдвое меньше.

Теперь предположим, наоборот, что вы рисуете веб-страницу в Фотошопе на Маке с ретиной. Если обычная ширина веб-страницы на неретиновом экране — 1200 пикселей, то на ретиновом экране, чтобы получить такие же наблюдаемые размеры, вам понадобится уже файл шириной 2400 пикселей (пиксели-то вдвое меньше). Очевидно, что если вы откроете такой файл на компьютере без ретины, то всё уже будет выглядеть вдвое большим, чем вы ожидаете.

Параметр Resolution никак на это не влияет — Фотошоп отображает пиксели как есть. И на вашем, и на чужих компьютерах Фотошоп и так всё показывает в масштабе 1:1, то есть отображает ровно те пиксели, которые есть в картинке. Разница в наблюдаемых размерах возникает из-за разницы в физических размерах пикселей.

Если вы просматриваете ретиновый макет на неретиновом компьютере, уменьшите масштаб до 50%. Если вы просматриваете неретиновый макет на ретиновом компьютере, увеличьте масштаб до 200%.

Интерфейс и информация — дисциплина Школы дизайнеров. Занятия с 27 августа. Мы напишем вам, когда будет открыт набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Недавно всплыло

У меня чувство, что лучше вести переговоры не стал. Как практиковаться? 4 Что за font-family? Где его взять? 2 Заметил, что сайт бюро перешел на HTTPS. Расскажите, как переходили? 1 Исследование Гугля: пользователям легче читать, когда подписи над полями 1