Unity デザイナーズ・バイブル 6月6日発売!

【Photoshop】UI仕様書が捗る!パーツのサイズ情報を自動で作成してくれるスクリプト[Ink]

0

UIパーツの情報を自動で作成してくれる拡張機能『Ink』

存在は知っていたのですが、その時は必要としていなかったので見逃していました。

使ってみたらめちゃくちゃ便利で、もっと早くに出会いたかったツールです。

タップできるもくじ

導入方法

Photoshop2017に入れてみました。

Ink. A Photoshop documentor plugin

  1. 上記からInkをダウンロード
  2. Photoshop CC 2015+フォルダの中をInk.zipを解凍。
  3. 解凍した中身を下記の場所に格納。

C:\Program Files\Adobe\Adobe Photoshop CC 2017\Required\CEP\extensions\Ink

  1. Photoshopを起動。ウインドウ>エクステンション>Inkを選択


使い方

  1. 寸法を表示したいレイヤーを選択して
  2. 水滴ボタンをクリック。自動でサイズが表示されます。
  3. 表示がはみ出ていたら、イメージ>すべての領域を表示



追記

余白などの計測は『Size-Marks.jsx』がおすすめです。

選択範囲を囲み、スクリプトを実行だけです。

ガイドラインや指示書の作成が楽になる!エレメントやマージンのサイズを書き出してくれるPhotoshopのスクリプト -Size Marks | コリス



感想

UIの構成を確認するにも仕様書作るのにも使えそうです。

あとは他のUIを分析するにも使えそう。

はやくAdobe XDにも似たような機能が搭載されるのを期待しています。



参考

デザインのガイドラインや指示書の作成が驚くほど捗るPhotoshopの機能拡張 -Ink | コリス





photoshop-summary-article


便利な機能紹介!Photoshopに関する作り方まとめ



photoshop-summary-article


作業効率化!Phoshopスクリプトに関する作り方まとめ

フォトショップのソフト


eyecatch-buy-adobe-creative-cloud
【Adobe Creative Cloud】最安!アドビ認定スクールから購入する方法(+講座付き)

フォトショップの参考書籍

すいみん
独学で勉強できてしまうPhotoshopですが、他の人の手法を見ると全然使いこなせてなかったことに気がつくこともあります
すいみん
専門誌の定期購読をするなら月額980円の「Kindle Unlimited」がおすすめです!


eyecatch-amazon-kindle-unlimited
【Kindle Unlimited】CGデザイナーにおすすめ!専門書読み放題の電子書籍サービス

以上、すいみん(@cg_method)でした!

0