21 мая 2014, 16:46

Как проверять размеры в вёрстке?

Никакое специальное приложение для проверки размеров в вёрстке, вроде Икс-скоупа, у меня не прижилось. Слишком большая погрешность:

Правильный размер 198×68

Когда мне нужно что-то проверить приблизительно, я использую стандартную маковскую скриншотилку, cmd shift 4:

После измерений нажимаю esc, чтобы не сохранять скриншот.

Когда нужна аптечная точность, то сохраняю скриншот, перетаскиваю его в Фотошоп и уже измеряю там. Я стыжусь этого способа, но ничего удобнее не знаю.

Идеальная измерялка должна вести себя так:

  • жмёшь cmd shift M (или другой хоткей),
  • экран замирает и поверх появляется фотошопный Rectangular Marquee Tool,
  • работает зум,
  • выход по эскейпу.

А как вы проверяете размеры элементов и отступов в вёрстке?

Поделиться
Запинить
19 комментариев
Егор Панченко

Если аптечная точность на соответствие макету — плагины наподобие Perfect Pixel. А так через скриншоты в ФШ, ничего удобнее пока не видел для себя.

Артём Поликарпов

Пёрфект-пиксель у меня стоит, он не о том немного.

Илья Страйков

Я так привык всё измерять скриншотилкой, что в Фотошопе и Иллюстраторе её же использую, а не какие-то там их инструменты. И хочу ещё заставить её появляться и пропадать, но не делать скриншот.

Артём Поликарпов

Так эскейп нажимаешь и она пропадает?

Илья Страйков

Хочу без эскейпа :-) Вечно про него забываю, потом рабочий стол какими-то огрызками завален

Артём Поликарпов

Так скриншоты надо не на рабочий стол кидать, а в док: http://ilyabirman.ru/meanwhile/2008/11/09/2/

Антон Романов

Артём, а посмотри на SnappyApp? Оно не работает как измерялка, но аптечную точность обеспечивает: сделал пару скриншотов, надвинул на нужные места в вёрстке и подгоняешь в коде.

Mikhail Baranov

А ты не пробовал использовать маковский зум для слабовидящих перед запуском измерялки икс-скоупа?

Артём Сапегин

У меня тоже Иксскоп не прижился. Иногда пользуюсь Рулерсом, но это не совсем то. Размеры тоже стандартной скриншотилкой измеряю.

Алексей Коромыслов

Илья, можно и без эскейпа, нужно просто (не так уж и просто, на самом деле :) дополнительно зажать ctrl (⌘⇧ctrl4). Правда, в этом случае скриншот положится в буфер обмена.

Денис Денисов

Я использую Ctrl + Shift + Cmd + F4: скриншот сразу попадает в буффер обмена.
Если надо — открываю Sketch, Cmd + V, и там уже обмеряю, что нужно.

Элай Фрост

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

Ден Талала

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

Лев Эйдинов

В OS X есть отличный встроенный зум. Включается в Accessibility, там же важно отключить сглаживание и настроить постоянное слежение за курсором. После включения для зума достаточно будет в любое время зажать Ctrl и покрутить скролл, в том числе и уже нажав скриншотный хоткей.

Борисенко Андрей

Monosnap меня устраивает и как измеритель, и как скриншотоделатель.

Голиков Артём

А зачем определять размеры в вёрстке?

Илья Страйков

Так скриншоты надо не на рабочий стол кидать, а в док.

Ну, блин, а потом эту папку чистить нужно будет :-)

Александр

Удобно использовать встроенное масштабирование, а если сразу промазал, можно зажать option.
Видео: https://www.dropbox.com/s/6l0tk9ggwlvru5f/ruler.mov

Михаил Калашник

Для Фаерфокса есть замечательное дополнение https://addons.mozilla.org/en-US/firefox/addon/pixelzoomer/ с возможностью настроить горячие клавиши как в Фотошопе.

Мишанечка

Артём, вы заговорили про инструменты, хочется спросить у вас, а каким браузером вы пользуетесь для разработки в основном?

Что думаете про то, что, например, для хрома, устанавливая каждую пипетку для удобства, отдаёшь всю статистику?

Какой веб-инспектор самый клёвый? Есть ли шанс у сафаревского когда-нибудь стать удобным?

Андрей Оконечников

Многие не знают, но стандартную скриншотилку можно, как и в фотошопе, двигать при зажатом пробеле.

Кстати, на айпаде при заполнении этой формы страница проскролливается в самый низ и не видно что пишешь.

Павел Малинников

Monosnap. Cmd + Shift + 5.

Популярное