Как измерить расстояние между текстом и элементом в Photoshop

Я нахожу измерение расстояния между элементом и текстом довольно сложным. Потому что мне нужно сначала узнать самую большую букву и измерить расстояние от нее до элемента. Затем вычтите заполнение из высоты строки. Было бы намного проще, если бы я мог отображать высоту строки в виде прямоугольника или чего-то еще, чтобы я мог измерять только его.

Это как-то возможно? Как надежно измерить расстояние от текста до элемента, чтобы т.е. передать его в css?

Нет простого способа измерить вещи в фотошопе и поместить в CSS с абсолютной точностью. Вместо этого доверяйте своим глазам. Гораздо менее кропотливо и, в конечном счете, намного разумнее. :)
Расскажите нашему дизайнеру ;) Но проверенный ответ кажется достаточно хорошим в большинстве ситуаций.

Ответы (2)

Это зависит от того, какую версию Photoshop вы используете, но в последних обновлениях PS, особенно в CC, это стало намного проще, и я рекомендую вам обновиться до этой версии!

Просто выберите инструмент «Перемещение» (v) и, когда вы наводите курсор на элемент, нажмите и удерживайте Ctrl. Он покажет вам расстояние и т. д.Измерение расстояния между элементами в PS

Затем вы можете использовать пиксели в css или rems и т. д. Надеюсь, это поможет!

Спасибо, иногда это работает. Но затем он просто игнорирует элемент и переходит на один элемент дальше, поэтому расстояние неверно. Я использую ПС 2014.
Ах, вы должны сначала выбрать элемент, т.е. с помощью текстового селектора (если это текст). Затем вы выбираете инструмент перемещения и наводите курсор на нужный элемент, удерживая клавишу управления. Потрясающий!
Но! Чтобы сделать его полным: текстовая область должна быть такой же большой, как текст, иначе расстояние будет неправильным.
Что касается текста, позиция определяется по высоте самого большого элемента, например. буква «Т» в текстовом блоке. Когда вы работаете со своим CSS, вы тоже проходите это расстояние! Это трудно объяснить, но в основном это правильный способ сделать это! :)
Верно, но, по крайней мере, в PS 2014 текстовый блок должен быть таким же большим, как и текст, если он больше или даже перекрывает другие текстовые блоки, у меня это не сработало.
Ааа, я тебя понимаю! Если 2 слоя перекрываются, это не дает точного значения!! Не могли бы вы прикрепить скриншот проблемы, и я посмотрю, смогу ли я исправить!
Как-нибудь постараюсь снять видео. Но да, если два слоя перекрываются, это не работает.

Отображение текстового поля
View > Show > Layer Edgers
Выбранный вами слой теперь будет выделен

Получение расстояния
Используйте инструмент линейки, Iиногда спрятанный за пипеткой, чтобы получить фактическое расстояние. Держите текстовое поле выделенным, иначе выделенный слой не будет отображаться.

Разве мы обычно не измеряем все расстояния относительно «текстов» относительно текстового поля, которое появляется вокруг? О да, мы делаем! НЕ рекомендуется измерять его по длине отдельных символов.
@Dr..Net, это мистическое текстовое поле, о котором вы говорите, - это именно то, что я ищу, я думаю
@Consume Coffee, потому что я не всегда знаю, какая самая большая буква в шрифте
@ 4485670 Я только что немного изучил, попробуйте «Просмотр»> «Показать»> «Краи слоя», я просто обновлю свой ответ сейчас. Я определенно только что узнал что-то новое.
@ 4485670 При использовании его для CSS вы получаете его в инструментах разработчика, а затем наводите курсор на соответствующий элемент в дереве DOM. В Photoshop вы можете сделать это, как в предыдущем комментарии, но будьте осторожны, так как текстовое поле также можно сделать больше, чем текст, который он содержит.
@ConsumeCoffee Эта штука работает только в том случае, если размер поля точно соответствует размеру текста.
Края слоя у меня не работают. Он такой же большой, как текст, но не такой большой, как текст + высота строки. fs5.directupload.net/images/160204/4kqptlgs.png
На картинке фиолетовая линия — это края слоя. В то время как серая вертикальная линия - это курсор, который, я думаю, такой же большой, как высота строки.
@ 4485670, если вы знаете высоту строки, вы всегда можете нарисовать прямоугольник этой высоты и поместить его на базовую линию верхней строки текста, а затем использовать это для измерения. Это немного "хакерски", но я думаю, что это может сработать. Я просто не думаю, что у Photoshop действительно есть функция, которая вам здесь поможет :(
Это действительно сложно, потому что, например, буква ag немного опускается в отступы высоты строки, а другие буквы - нет. Так что вам действительно нужно получить поле высоты строки. Странно, почему это не включено.
Как измерить расстояние между текстом и элементом в Photoshop
СпросиСетьПолитика конфиденциальности1y, 0v