UI制作効率化！おすすめのスクリプトまとめ
UI制作に役に立ちそうなスクリプトをまとめました。
シェイプの角を丸くする
Photoshopで作成した矢印をを少し丸くしたいと思ったのですが、デフォルトだとシェイプを保ったまま丸くする機能がなさそうなのでスクリプトを探してみました。
※ちなみにイラレにもっていけば、丸くする機能がデフォルトであります。
- 下記のURLからスクリプトをダウンロードします。
Photoshop Scripts
Corner EditorThis Photoshop script can do everything that the Rounded Rectangle Radius Resizer script can, and a lot more! Round the corners of any polygonal shape Multiple ... - シェイプを選択します
- スクリプト＞参照＞Corner Editor.jsx
- 4,4,4,4のという感じで丸めたいピクセル数を選択
- 丸めたい形のアイコンを選択すれば、シェイプに丸みが付きます。
ガイドをコピーする
画像アセットがあるものの、未だにガイド引いてスライス機能は使います。
ガイドコピーしたいと思い、探しましたら便利なスクリプトがありました。
名前をCopyGuides.jsxにします。
コピーしたいガイドのあるデータを開きます
ファイル＞スクリプト＞参照からShitキーを押しながらCopyGuides.jsxを選択
これでガイドがコピーされた状態になります。
ガイドをペーストしたいデータを開き、もう一度ファイル＞スクリプト＞参照からCopyGuides.jsxを普通に選択するとガイドがペーストされます。
ドキュメント内で使用されているフォント一覧を表示する
指定されたフォントだけ使われているか調べるため、ドキュメント内で使用されているフォント一覧を表示するスクリプトです。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\サンプルデータもついてます。
レイヤー操作：パーツのサイズ情報を自動で作成
UIパーツの情報を自動で作成してくれる拡張機能『Ink』の紹介です。
- 下記からInkをダウンロード
あわせて読みたいInk. Specs for your Photoshop LayersInk is a photoshop documentor plugin made by chrometaphore.com -
Photoshop CC 2015+フォルダの中をInk.zipを解凍。
-
解凍した中身を下記の場所に格納
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Required\CEP\extensions\Ink -
Photoshopを起動。ウインドウ＞エクステンション＞Inkを選択
-
寸法を表示したいレイヤーを選択して水滴ボタンをクリック。
自動でサイズが表示されます。
表示がはみ出ていたら、イメージ＞すべての領域を表示
レイヤー操作：パーツの余白の計測をする
『Size-Marks.jsx』の紹介です。
選択範囲を囲み、スクリプトを実行だけです。
テキスト：位置を変えずに文字を中央揃えにする
イラレのスクリプトで使って地味に便利だったので、Photoshop版も作成してみました。
やっていることは単純です。
- 座標を予め取得しておく
- 中央揃え
- 元の座標位置に戻す
* 複数選択可
* 左合わせ “`var just = Justification.LEFT“`
* 右合わせ “`var just = Justification.RIGHT“`
レイヤー操作：選択したレイヤーサイズのシェイプを作成する
画像のサイズを取得しようとしてできたスクリプトです。
選択してるレイヤーの座標を調べる方法
boundsで4点取得できます。(開始X座標,開始Y座標,終了X座標,終了Y座標)
layObj = activeDocument.activeLayer.bounds;
x1 = layObj[0];
y1 = layObj[1];
x2 = layObj[2];
y2 = layObj[3];
alert("("+x1+","+y1+")-("+x2+","+y2+")");
選択したレイヤーのサイズのシェイプを作成する
カンバス操作：カンバスサイズを偶数にリサイズする
カンバスサイズを奇数ピクセルから偶数ピクセルにする（奇数の場合+1pixel足す）スクリプトを書いてみました。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\[/timeline]
1発でデスクトップにPNG画像書き出し
デスクトップはきれいに保ちたいものの、何だかんだ作業中の仮置き場として最適なのでデスクトップにPNG画像を書き出す方法を模索してみました。
クイック書き出し
まずは基本機能のおさらい！
クイック書き出し+ アクションでショートカットを押すだけで出力できるようになります。
- クイック書き出しをアクションで登録
- アクションにショートカットを追加（F2とか）
iwb.jpPhotoshop CC 2015で使えるPNGやJPGの超高速書き出し方法目次PNGやJPGを超高速書き出しクイック書き出しとは超高速書き出しの環境設定方法アクションに登録する具体的にどのくらい速い？画像アセットの生成 PNGやJPGを超高速書き...
書き出し画像容量の比較
黒ネクタイのアイキャッチ(512×512)を書き出してサイズ検証してみました
- PNG保存 1.01 MB
- PNGとしてクイック書き出し 16.0 KB
- WEB用に保存 12.0 KB
WEBで書き出すと一番軽い状態で書き出せます。
瞬時にPNG画像をデスクトップ書き出しするスクリプト
WEBで書き出しを速攻でできるようにしてみました。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\
すいみん
すいみん
すいみん
