Size Marks

Размерные метки
для макета

Roman Shamin
Дизайн-кабак
3 min readOct 23, 2014

--

Size Marks — это скрипт для Фотошопа, который превращает прямоугольное выделение в размерную метку. Помогает дизайнеру и фронтенд-инженеру подготовить макет к верстке.

Результат:

Скриншот сайта https://amplifr.com

Size Marks умен и заботлив:

  1. Создает новый слой, чтобы не испортить содержимое активного.
  2. Превращает горизонтальный прямоугольник в горизонтальную линейку, вертикальный и квадрат — в вертикальную.
  3. Подписывает значение в пунктах и пикселях, если разрешение макета отличается от 72 ppi.
  4. Не забывает дать слою осмысленное короткое имя.
  5. Делает слой полупрозрачным, чтобы метка не мешалась.
  6. «Прибирает за собой» — возвращает исходные значения всем параметрам, что менял в процессе.

Что нового в версии 1.0

  • Скрипт округляет пункты до одного знака после запятой. Например, вместо 39.72413793 pt будет 39.7 pt. Кстати, если пункты странно себя ведут, скорее всего, это потому что разрешение документа не кратно 72 ppi.
  • Можно задавать цвет метки. Скрипт использует foreground color.
  • Можно управлять прозрачностью метки. Теперь скрипт оставляет после себя слой с opacity 65%.
  • Подпись стала ярче размерной линейки.
  • Подпись стала аккуратной: теперь единица измерения отбивается от значения волосяной шпацией.
  • В разделе Install на Гитхабе добавились инструкции для Windows.

Что появилось в 0.1.1

  • Перед завершением работы, скрипт активирует Rectangular Marquee Tool, чтобы было удобнее делать следующую метку.
  • Теперь метка создается не на вершине списка слоев, а над активным. Так легче управлять размещением меток.
  • Включено сглаживание текста у подписи.

Установка

1. Скачайте архив из раздела Install на Гитхабе.

2. Положите файл Size Marks.jsx из архива в фотошоповскую папку со скриптами и перезапустите Фотошоп. Если у вас несколько Фотошопов, повторите этот шаг для каждого.

OS X: /Applications/[Photoshop]/Presets/Scripts/
Windows: C:\[Program Files]\Adobe\[Photoshop]\Presets\Scripts

Папка Scripts

Cкрипт должен появиться в меню: File ▸ Scripts ▸ Size Marks.

Если Size Marks нет, значит вы положили скрипт не туда

3. Для быстрого доступа назначим шоткат.

Edit ▸ Keyboard Shortcuts…, разверните пункт File и крутите до раздела Scripts>. Нажмите на строку Size Marks и задайте комбинацию клавиш.

Попробуйте:

  • Shift+Cmd+P (⇧⌘P) для OS X
  • Shift+Ctrl+P для Windows
⌥⇧⌘K

Системные требования

Тестировался для Photoshop CC 2014 и OS X Yosemite. Если у вас не работает, напишите мне в Твитере: @romanshamin.

Благодарность

Скрипт бесплатен. Мне будет приятно, если вы порекомендуете его друзьям в Твитере или Фейсбуке.

Отзывы

Было очень приятно получить массу крутых отзывов и вопросов из стольких стран. Кажется, скриптом пользуются по всему миру.

  • Just what I needed. — Erik Myers, Mountain View, California.
  • Tu fais des maquettes/spéc sous Photoshop? Voila une petite extension sympa pour placer des marques de mesure. — LegZ, Lyon, France.
  • Перепробовал кучу всяких «образмеривалок» для Ps, но этот простейший скрипт пока кажется одним из самых юзабельных. — Андрей Сундиев, Яндекс, Москва.
  • 選択範囲を作るだけで数値がレイヤーに書きだされる!?これは便利だ! — ヤマシタヒトシ, 愛知県あま市
  • Шикарная вещь, как я раньше жил без Size Marks. — Александр Курганов, Санкт-Петербург.
  • Made my day! — Michl, Germany, NRW.
  • 確かに作業指示書の作成が楽になりそう。ワンアクションで寸法線と値を書き出してくれるのは便利。 — Torii, 静岡県浜松市
  • Nice little PS plugin for handing over designs quickly. — Sebastian Stockmarr, Copenhagen, Denmark.
Реакция пользователя Sketch

--

--

Roman Shamin
Дизайн-кабак

Desingineer @evilmartians • Projects: Compo, Sort Me, State Machine, Size Marks, Evil-Icons.io