スクリプト -> 9Patch

Posted by muchag | Photoshop | 2016-05-20 (金) 19:18:36

9Patch ファイルを出力するスクリプト。

【環境】
Photoshop:CS6
OS:Windows 10 Home 64bit
作り方

以前、Android アプリを製作したときの記事。
draw9patch.bat

元画像の外周に 1px の余白を取り、黒(#000000)の塗りつぶしを付ける
.9.png という拡張子で保存する(png でなくてもいいみたい?)

引き伸ばす領域

元画像の左端の余白、該当箇所にマーキング。基本は上下2箇所
元画像の上端の余白、該当箇所にマーキング。基本は左右2箇所

コンテンツ領域

引き伸ばしたくない領域
元画像の右端の余白、該当箇所にマーキング。基本は内部1箇所
元画像の下端の余白、該当箇所にマーキング。基本は内部1箇所

基本タイプイメージ
patch 領域
引き伸ばし領域
コンテンツ領域
JSX
仕様
  • 引き伸ばす範囲は、元画像の周囲 1px 部分
  • コンテンツ領域は、元画像の周囲 1px 以外の部分
  • 2行目に元となる PSD ファイル名を列挙(利用者が入力)
    • Android 側、解像度名に対応する順番にすること
    • 現仕様では、6種のサイズを吐き出すことになっているけど、不要なものは削除可能
    • 不要なものを削除する場合は、ファイル名と同時に、Android 側、解像度名も削除すること
  • 元画像の幅と高さは自由
  • 元画像は全て同一ディレクトリに配置
  • スクリプト実行前に、元画像の最初の PSD ファイルを開いておく
  • 元画像と同一ディレクトリに .9.png ファイルが保存される
    • .9.png ファイルの名称は、splash_(Android 側、解像度名)
  • 元画像のアクティブレイヤーが「塗りつぶし」できないレイヤーだとエラーになる
  • ExtendScript Toolkit から実行したので、Photoshop 本体からの実行は試してない
コード

iG:Syntax Hiliter だとバグるので、CodePen。。。

See the Pen Making 9Patch with Photoshop CS6 by muchag (@muchag) on CodePen.

参考サイト

Life goes on:PhotoShop CS5でAndroid用9patchを作るのに便利なjsx(2011-08-12)

Photoshop | 2016-05-20 (金) 19:18:36 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment