Как правильно рисовать макет на экране с высоким разрешением?

Question

[Дима Ермоленко]

В общем суть вопроса вот в чем:
У меня монитор 27" с разрешением 2560x1440, у верстальщика тоже 27", но разрешение 1920х1080
Делаю макет сайта, выглядит все аккуратно, отдаю верстальщику и у него все элементы при 100% скейле в фотошопе визуально выглядят больше чем у меня, хотя размеры одинаковые, когда страничка сверстана - та же история.
Методом тыка уменьшил размеры своего макета на глаз на 30% и сразу же все стало больше похоже на правду.
Я понимаю что я не единственный с такой проблемой, но столкнулся первый раз, нагуглить информации не получилось, подскажите как быть

Comments

[Сергей]

Создать документ 1920 шириной не подходит?

[Stalker_RED]

Еще круче - почитать о том, что такое сетка и зачем она вообще придумана.

[Дима Ермоленко]

Сергей: макет 1920
Stalker_RED: и да, сетка 12 колоночная сетка присутствует

[Stalker_RED]

Дима Ермоленко: А что у вас тогда не совпадает? Или открытием стало то, что на мониторах бывает разный DPI?

[Дима Ермоленко]

Stalker_RED: не совпадает визуальная составляющая и я хочу понять как избежать проблем в процессе верстки и как правильно готовить макеты.

[Ден Тоцкий]

Проверь разрешение документа, для обычных не ретина экранов оно 72 пикс/дюйм

[Stalker_RED]

Дима Ермоленко: Возьмем, к примеру, изображение шахматной доски 1000х1000 пикселей.
Если его не ресайзить, на мониторе 2560x1440 оно займет чуть меньше половины по ширине и две трети по высоте.
На мониторе 1920х1080 оно займет уже более половины по ширине и почти всю высоту.
На мониторе 1024х768 оно займет всю ширину и не поместится по высоте.
На 176x220 даже две клеточки от этого поля не поместятся (у меня такой телефон на полочке лежит, в рабочем состоянии). А вы думали, откуда весь этот хайп про адаптивный, отзывчивый и резиновый дизайн?

Answer 1

[Антон Лапко]

Самый простой способ, который я знаю — менять ppi и работать с единицами измерения pt.

1. Выставляешь размер артбоарда 1920х1080 c Resolution 144 и единицами измерения "Points". Таким образом ты сделаешь у себя скейл @x2, но работать будешь как будто бы в @x1. 1pt = 2px.
2. Когда разработчик получает твой .psd, ему нужно вернуть 72ppi. Для этого он идет в Edit → Image Size и возвращает Resolution 72ppi. Теперь 1pt = 1px.

Answer 2

[Артём]

Макет делается в размер по X оси 1920 точек (может быть вариативно, нужно учитывать, что далеко не все экраны имеют такое разрешение). Разрешение макета 72 пикселя на дюйма (стандарт для большинства экранов, соответственно и для веба). Далее макет отдается на верстку, и не важно какое разрешение у верстальщика, он должен работать по цифрам, а не субъективным ощущениям "на вид". И ваше "визуально выглядят больше чем у меня" тоже лишь субъективное ощущение из-за разницы в кол-ве пикселей экрана (если макет делался изначально в 1920). Подумайте как этот макет будет выглядеть в других разрешениях экранов, особенно меньших, чем изначальные 1920? Да, по другому. Нужна адаптивность, и это уже дело верстальщика и/или ваша совместная работа.