Tag Archives: Photoshop

Photoshop script for web designers and front-end engineers

images Add demo gif 11 days ago
src Add creating marks above active layer 6 days ago
.gitignore Init 12 days ago
CHANGELOG.md Add changelog 6 days ago
LICENSE Add MIT license 12 days ago
README.md Add testimonials section a day ago
Size Marks.jsx v0.1.1 6 days ago
Size-Marks.jsx-v0.1.1.zip Rename zip 6 days ago

Size Marks

Size Marks is a helpful Photoshop script for web designers and front-end engineers.

Script converts rectangular marquee to labeled measurement mark. Landscape marquee → horizontal mark. Portrait or square marquee → vertical mark.


  1. Right click: Size-Marks.jsx-v0.1.1.zip and choose Download Linked File As....
  2. Unzip and place Size Marks.jsx in the Photoshop’s Scripts folder. For OS X:/Applications/Adobe Photoshop CC 2014/Presets/Scripts/ and restart Photoshop.
  3. Now script is available in File ▸ Scripts ▸ Size Marks. Let’s make a shortcut.
  4. Edit ▸ Keyboard Shortcuts.... Unwrap File and scroll to Scripts>. Select Size Marks and set shortcut. I recommend Shift+Cmd+P (⇧⌘P) — it must be available.


Create rectangular selection with Rectangular Marquee Tool (M) and use your shortcut (see Install section).

System Requirements

Script has been tested for Photoshop CC 2014 on OS X Yosemite. If you have troubles, drop me a line:@romanshamin.


For Satisfied Pro’s

If you’re professional web developer:

  • Use Size Marks for free and pay with a tweet/post
  • Buy me a cup of puer tea: pay $3 by PayPal


  • 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.

P. S. Thanks to all the users for the great feedback!


Copyright © 2014 Roman Shamin https://github.com/romashamin

Size Marks is licensed under the MIT licence. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE file for more details.

Photoshop plugin that converts your layers to CSS3.


Hi everyone, first day of the week and new plugin. Here you have a tool that can make life easier for more than one developer.

CSS3Ps  is a resource for implementing the popular design tool, Photoshop and will allow us to save an interesting time when carrying out our web projects.

Actually ideally have some knowledge, because the plugin is not perfect, but it is a tool that can save us a lot of time in the layout, which can use it to continue designing more.

This plugin has an operating system in the cloud that is responsible for converting the layers of design on CSS3 to turn them into what will be a future website.