Правильно ли переносить пиксельные размеры из фотошопа в вёрстку?

Question

[Legioner911]

Всем доброго времени суток!
При вёрстке макета из psd столкнулся с проблемой некорректного отображения в браузере(сравнивая на вид), при условии если точно по пиксельно переносить размеры макета непосредственно в вёрстку.

Вопросы:
1)Правильно ли верстать путём замера PSD макета (отступы, ширина, высота) после чего переносить размеры в стили, или всё же ориентироваться просто так сказать "на глаз"?
2) Как правильно рассчитывать размер шрифтов(что бы в соответствии с макетом отобразить на сайте, без всякого нудного подбора "на глаз")?

Заранее спасибо за ответ.

Answer 1

[Богдан Духевич]

Редко попадаются дизайны, где легко все шрифты в em сделать и все четко через пиксельперфект выровнять. Если тз того не требует, размеры шрифтов можно задавать в пикселях, какие-то глобальные отступы и ширины измерять линейкой в фотошопе, далее после того, как все сверстано, подгонять это через Pixel Perfect (Firefox или Chrome).

То есть вы делаете каркас/компоновку элементов, а уж потом выравниваете все. Сразу все пиксель в пиксель делать - больше времени займет.

p.s.: для Firefox есть версия Pixel Perfect 1.8.1 (рабочая без глюков), которая спрятана в версиях плагина Pixel Perfect на addons.mozilla.org.

Comments

[Роман]

о. спасибо за подсказку по рабочей версии для ФФ.

[Aleksandr]

О, даже не знал о такой штуке )

Answer 2

[Андрей Кирильчук]

Если это psd, то ведь там все в свойствах каждого элемента можно посмотреть. Например: шрифт, размер шрифта, междусимвольный и междустрочный интервалы. Если просмотр невозможен, то необходимо либо редактировать psd (а заодно дизайнеру руки ломать), либо подгонять на глаз. Но это уже не будет perfect pixel версткой.

Answer 3

[Никита]

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

Comments

[Тимофей Белоусов]

Зачем устраивать такую садомию? Pixel Perfect же существует (если прям надо пиксель в пиксель)

[Никита]

Тимофей Белоусов: лично у меня были проблемы с этим плагином. Не всегда подгружал изображения. Да и задача настолько тривиальная, что использовать для неё какой то плагин даже как то лень.

Answer 4

[Родион Мещеряков]

У шрифтов есть невидимые области сверху и снизу. Это легко увидеть, просто выделив курсором любую строку. Поэтому можно легко ошибиться в определении вертикальных шрифтовых отступов, если просто отмерять расстояние от края букв.

Можно проверить свою работу как рекомендовал Никита. Тем более, что для этого есть плагины для браузеров. Например, для Хрома я использовал Pixel Perfect

Comments

[Legioner911]

Подскажите пожалуйста как центрировать картинку в Pixel Perfect? На мой взгляд сайт на картинке, при наложении в браузере через Pixel Perfect, получается маленький. Сравнил несколько сайтов и все не соответствуют по ширине ) К примеру если в дизайне явно предусмотрен слайдер на всю ширину экрана, как тогда быть ?

[dpismenny]

Legioner911: Очевидно, если мы говорим о pixel perfect, то на верстка должна совпадать с картинкой практически полностью. Если слайдер на всю ширину, тогда вносим правки в соответствии с макетом, а потом, сохраняя ключевые элементы в сетке, растягиваем слайдер на ширину экрана. Но, на самом деле, пиксель перфект это заморочка перфекционистов, когда речь идет о "подвинуть полосочку на 1px вверх :-)

[Никита]

Денис Письменный: тут все зависит от того, как старательно дизайнер прорабатывал дизайн. Если виден большой объем работы дизайнера, который сам 'двигал полосочку и влево и вверх на 1px', то, на мой взгляд, верстальщик обязан повторить его пиксель в пиксель, а не на свой глаз. Если и дизайн делался не кропотливо, то такие заморочки лишние, да. То тот же Pixel Perfect, хоть и не самое лучшее решение в данном вопросе, экономит много времени и работа на выходе качественнее.

[dpismenny]

Никита: С такой позицией согласен. Просто говорю о том, что излишний перфекционизм бывает во вред.

Answer 5

[dom1n1k]

Не совсем понятна постановка вопроса - в чем конкретно расхождения?

Навскидку могу только предположить проблему с вертикальными отступами - которые нужно измерять не непосредственно до букв, а до границ строки (которая зависит от очка шрифта и line-height). Но это не баг, а фича.

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