Как посчитать CSS margin'ы между заголовком и текстом(или другим слоем) в Photoshop?

[Kulagin]

Скажем, есть вот такой блок в фотошопе:

Я хочу посчитать CSS значения font-size, line-height и вертикальные margin'ы между заголовком и картикой, заголовком и параграфом, а также между параграфом и нижней картинкой.

Leading в фотошопе - это, кажется, равняется значению line-height в CSS, судя из ручных тестов, но я точно не уверен, а в интернетах разная инфа в разных источниках.

А как правильно посчитать margin'ы между текстом и другими блоками, учитывая Leading?

На картинке выше указаны параметры для FOOTBALL SHOES. Как мне используя эти значений высчитать line-height для заголовка и margin'ы между элементами?

Edited September 4, 2018 by Kulagin

[npofopr]

1. Обновить Фотошоп. 
В новых версиях можно css копировать, для текста этого хватит. 

2. Есть плагин csshat. Почти тоже самое, только удобнее, оно как раз под прошлые версии фотошопа подойдёт.

3. Никак) Учитесь определять на глаз. А потом путём pixel perfect подравнивать. У вас в css всё равно и отступы и т.п. будут. Из фотошопа не возьмёшь особо сразу верные размеры. Но опять же, в новых версиях фотошопа, при нажатии Ctrl, или какой то другой клавиши, показывает сколько px между элементами. 

[AlexZaw]

Фотошоп не учитывает метрики шрифта, поэтому никак. Ну либо загонять шрифт в программу где можно посмотреть метрики, и учитывать их в расчетах, но проще воспользоваться плагином для пиксель перфект верстки ?

[Kulagin]

Лучшее, что мне пока что пришло в голову: CSS margin-bottom от картинки до FOOTBALL SHOES будет равняться расстоянию от картинки до верхнего пикселя букв, минус ((leading - font-size)/2)-3.

В Фотошопе расстояние от картинки до верхнего пикселя заголовка равно 25px. Leading у текста 35px, а Font-size - 22.65px:

Т.е. CSS margin от картинки до текста с этими параметрами будет равняться 25px-((35px-22.65px)/2)-3=15.825px. 

Попробовал, по этой формуле в браузере расстояние между картинкой и верхним пикселем заголовка также равняется 25px, как и в Фотошопе. Попробовал изменить Leading в фотошопе с 35px на 21px. Вбил в формулу, получил: 25px-((21px-22.65px)/2)-3=22.825px. И в браузере с line-height: 21px и margin-bottom: 22.825px расстояние от картинки до верхнего пикселя текста также равняется 25px.

При изменении шрифта в Фотошопе на Times New Roman расстояние от края картинки до верхнего пикселя букв изменяется с 25 до 27 пикселей(что и ожидалось). И если в CSS поменять на шрифт на Times New Roman, то в браузере тоже будет 27px. Ну и при изменении Leading'а и использовании формулы расстояния также сохраняются при смене шрифта. Т.е. по-моему эта формула работает с разными шрифтами.

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

Странно, правда, что до сих пор никто не сделал соответствующего плагина для подсчета расстояний от слоя до текста, учитывая Leading и шрифт 

Edited September 4, 2018 by Kulagin

[npofopr]

13 часов назад, Kulagin сказал:

Странно, правда, что до сих пор никто не сделал соответствующего плагина для подсчета расстояний от слоя до текста, учитывая Leading и шрифт

Потому что шкурка выделки не стоит. 

+ вот подобные значения `15.825px` браузерами по разному могут отобразится. Поэтому верстальщики и округляют в своём большинстве. Хотя вы и автоматом тоже можете округлять. 

[AlexZaw]

14 часов назад, Kulagin сказал:

При изменении шрифта в Фотошопе на Times New Roman

Проверьте свою формулу со шрифтами Gruppo и Catamaran. Скорее всего она не подойдет