PSD в HTML и CSS - мои поля неверны

У меня проблемы с воспроизведением точных полей из PSD в CSS. Всякий раз, когда я измеряю поле с помощью инструмента выбора, я получаю, например, 32 пикселя. Затем я помещаю это в свой код CSS:

div {
margin-top:32px;
}

Но даже несмотря на то, что поле установлено правильно (проверено с помощью Firebug), внешний вид этого элемента все еще выглядит странно, как будто он далеко. Поля кажутся слишком большими, я должен рассчитать их на глаз после настройки PSD на 100%, вместо того, чтобы использовать эти необработанные числа.

Как мне настроить Photoshop, чтобы он давал правильные измерения, которые затем можно применить в CSS, чтобы поля PSD и CSS (и в основном все измерения) совпадали?

Изменяют ли другие свойства ваш CSS? Унаследованные стили, отступы, высота строки и т. д.?
Нет, я уверен, что нет. Цифры правильные, все, что я печатаю в CSS, отлично работает, но выглядит совершенно не так, если сравнивать на глаз с PSD. Мне нужно внести поправки в цифры. Например, когда я делаю скриншот веб-сайта и помещаю его поверх своего PSD, легко сказать, что элементы отключены.
Ваше изображение в Photoshop настроено на 72 dpi?
Нет, это разрешение 96 dpi. Это странно, я никогда не менял его, возможно, это была ошибка, потому что на прошлой неделе мой PS часто падал. Это должно решить проблему, верно?
72 dpi — это стандартное веб-разрешение экрана, поэтому оно должно дать вам однозначное соотношение между вашим изображением при просмотре на 100% в Photoshop и вашим браузером на ПК.
@digijim Вы должны опубликовать это как ответ, это действительно хороший призыв.
@digijim 72dpi — это то, что фотошоп считает 100%, но это не стандартное разрешение экрана. (Стандартного разрешения нет, и подавляющее большинство разрешений экрана намного выше 72)
Кроме того, я считаю, что Photoshop теперь имеет «фактический размер» в качестве одного из параметров масштабирования, который полностью независим от настройки dpi — и, вероятно, его следует использовать (если только мы не говорим о создании графики для экранов Retina, что является совсем другая тема...)
Наконец (извините, замотался), все это не должно иметь значения. Пока вы измеряете в пикселях, масштабирование в Photoshop не имеет никакого значения. Независимо от того, увеличили ли вы масштаб на 800% или 50%, ваш инструмент линейки будет подсчитывать одинаковое количество пикселей в изображении.
Вероятно, это больше связано с CSS, чем с PS. Проверьте элемент в DevTools (т.е. Firebug или Chrome devtools) и проверьте все CSS: поля, отступы, границы. Не только элемента, но и родительских и дочерних элементов. Браузеры иногда добавляют отступы или поля там, где вы меньше всего этого ожидаете. Сброс CSS может помочь устранить непредвиденные поля и отступы на вашем сайте. Кроме того, я надеюсь, что это не ваш настоящий CSS. Установка отступа в 32 пикселя для ВСЕХ элементов div — это очень плохой тон, и это автоматически приведет к неожиданному внешнему виду.
@PieBie - переключение на 72 dpi все исправило. Дело закрыто :).
к. действительно очень странно.

Ответы (2)

Не обязательно существует прямая связь между размерами пикселей в Photoshop и тем, как CSS работает в браузере. Другими словами, если вам нужно 32 пикселя пространства на вашей странице, вам, возможно, придется использовать что-то вроде 28 пикселов, чтобы учесть поля или отступы для другого элемента.

В общем, лучше всего проектировать вещи «свободно», чтобы вещи могли иметь несколько пикселей. Совершенство пикселей в браузере немного похоже на борьбу с ветряными мельницами.

Несмотря на то, что за этой конкретной проблемой может быть реальная причина, этот ответ является лучшим в общей схеме вещей. Дизайн для идеального пикселя в такой интерактивной и взаимозаменяемой среде, как Интернет, особенно в 2015 году, когда господствует адаптивный дизайн, вызовет у вас только головную боль.
Я это понимаю, но такие простые вещи, как поля, измеренные в PSD, должны очень точно отражаться в CSS, не совсем, но вы знаете, по крайней мере близко. У меня далеко, иногда в 1,5-2 раза больше. Мне придется пойти со вторым ответом, потому что он напрямую решает мою проблему.

Это правда, что разрешение изображения не имеет значения в Интернете. Что определяет размер изображений, так это общие размеры изображений в пикселях при любом разрешении экрана устройства отображения.

Но для целей оценки расстояния в пикселях для веб-дизайна, если вы установите разрешение изображения в Photoshop на 72 dpi, это должно дать вам отношение один к одному между вашим изображением при просмотре в масштабе 100% в Photoshop и вашим браузером (при это уровень масштабирования по умолчанию) на настольном компьютере. Вот пример. Я сделал скриншот этой страницы и открыл полученное изображение в Preview на своем Mac (я бы использовал Photoshop, но BIOS моего ПК сломался два дня назад). Я переместил изображение так, чтобы эта страница отображалась на заднем плане, и просмотрел детали изображения. Обратите внимание на разрешение указанного скриншота:

пример веб-разрешения 72 dpi

Все элементы отображаются одинакового размера как на веб-странице в фоновом режиме, так и на изображении с разрешением 72 dpi, отображаемом в масштабе 100% в предварительном просмотре.

Мобильные устройства будут отображаться с более высоким разрешением, поэтому, естественно, ваши элементы будут казаться меньше на этих экранах. Но это будет пропорциональный сдвиг, поэтому отношение между, скажем, изображением и его границей/отступом будет пропорционально равным.

Это неправильно. Не существует «стандартного веб-разрешения экрана». Это правда, что 72ppi в фотошопе — это то, что соответствует «фактическому размеру пикселя», но на самом деле это не имеет никакого отношения к веб-графике. Правильно сказать: «Предполагая, что это не изображение сетчатки, обязательно просмотрите его в реальном размере в фотошопе, чтобы измерить).
PSD в HTML и CSS - мои поля неверны
СпросиСетьПолитика конфиденциальности1y, 0v