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

Question

[Senseich]

Подскажите, как Photoshop можно точно измерить расстояния между элементами. Стоит задача попиксельной верстки, поэтому нужна точность.

Смотрел в интернете примеры как верстают, такое чувство что на глаз отмеряют, т.е. инструмент "прямая" берут и смотрят приблизительное расстояние. Это нормально?

Comments

[Георгий Кузнецов]

Скачай Adobe XD (что-то около 250Мб) и все твои проблемы решатся. Выделяешь объект, зажимаешь alt и вуаля.

Answer 1

[Дима]

Если фотошоп не совсем старый, то там есть Extras. При зажатом CMD (или Ctrl) они показывают расстояния до ближайших элементов в макете.

Answer 2

[Алексей]

Включите пиксельную сетку в меню «Просмотр» - «Показать» - «Пиксельная сетка».
При достаточном увеличении картинки она будет отображаться.

В меню настроек (CTRL+K) в пункте «Единицы измерения и линейки» выставьте для линейки «Пиксели». Тогда можно будет ориентироваться по линейке (CTRL+R, если выключена). И прямоугольником можно измерять расстояние.

Answer 3

[Галина]

Если у вас версии фотошопа 2015 и ниже, то поставьте плагин guideguide. На более новые что-то подобное.
Плагин автоматически расставляет направляющие под заданные вами параметры. И уже по такой сетке будет удобно работать.

Comments

[Senseich]

А как он определяет какие мне направляющие нужны?

[Галина]

Они полностью настраиваемые. То есть вы сами расставите их так, как вам будет удобно.
https://guideguide.me/ - зайдите и попробуйте.
У меня на иллюстраторе работает на 2017 версии.

[Senseich]

Галина, А чем они отличаются от стандартных направляющих фотошоп?

[Галина]

Senseich, тем, что вы не в ручную будете это делать. Просто я так вас поняла, что сетку вам не предоставили, но зная параметры, ее можно сделать.

Answer 4

[Alexander Litvinenko]

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

Comments

[Senseich]

Можно чуть подробнее, как понять накладывать картинку и что за плагин такой?

[Alexander Litvinenko]

Их много, я использую "PixelParallel by htmlBurger", посмотрите в дополнениях к хрому.
1. Набросали вы сайт с размерами на глаз, далее делаете jpeg макета, загружаете его в плагин
2. Поверх сайта появиться скриншоит, в dev tool начинаете править размеры пока не получите точное совпадение, потом переносите их в файл.
3. Так и выходит пиксель перфект, а руками мерять - тут на пиксель, там на пиксель ошибетесь, нето, больше мороки с меньшей отдачей.