PhotoshopCS2用 『表示レイヤーを特定形式で書き出す.jsx』

切り抜き形式

last update : 2006/11/06

サンプル

レイヤーのピクセル存在範囲に合わせて自動的に切り抜く

書き出し時にレイヤーの透明部分を除いた切り抜きを行い、余白をカットします。

余白のないレイヤーは切り抜かれずにそのまま書き出されます。

この操作が元のPSDドキュメントに影響する事はありません。

例:

対象レイヤー:circle
サンプル
(ピクセル存在範囲に合わせて切り抜く)
(ファイルタイプ:PNG)
書き出されたファイル:circle.png
サンプル

切り抜き詳細設定

標準の設定では、四方の余白をすべてカットする設定になっていますが、このうち特定の方向の余白を残す事が出来ます。

また、「表示領域の外側のピクセルも含める」設定にすると、PSDドキュメントの表示範囲(カンバス)からはみ出ている画像も含めて切り抜くことが出来ます。

切り抜き詳細設定ダイアログ
サンプル

例:

対象レイヤー:circle
サンプル
(ピクセル存在範囲に合わせて切り抜く)
(ファイルタイプ:PNG)
書き出されたファイル:circle.png
サンプル
※上の空白を保護する設定
書き出されたファイル:circle.png
サンプル
※左右の空白を保護する設定

例:

対象レイヤー:circle2
サンプル
(ピクセル存在範囲に合わせて切り抜く)
(表示領域の外側のピクセルも含める)
(ファイルタイプ:PNG)
書き出されたファイル:circle2.png
サンプル

座標リスト

切り抜き設定が有効な際には、書き出された画像が切り抜き前にどの位置に置かれていたかという座標情報をテキストファイルに出力する事ができます。

座標リストの出力先は、元のPSDドキュメントと同フォルダか、書き出し先のフォルダかの、どちらかから選べます。

座標リストの名前は、「座標リスト[(PSDドキュメント名)].txt」となります。※1

例:

対象レイヤー:circle
切り抜きサンプル.psd
サンプル
(ピクセル存在範囲に合わせて切り抜く)
(ファイルタイプ:PNG)
書き出されたファイル:circle.png
サンプル

座標リスト[切り抜きサンプル].txt
(x:29,	y:8)	circle.png	

例:

対象レイヤー:circle2
切り抜きサンプル2.psd
サンプル
(ピクセル存在範囲に合わせて切り抜く)
(表示領域の外側のピクセルも含める)
(ファイルタイプ:PNG)
書き出されたファイル:circle2.png
サンプル

座標リスト[切り抜きサンプル2].txt
(x:-13,	y:-19)	circle2.png

座標リストには書き出す度に新しいデータが追加されていき、古いデータは順に下に押しやられていきます。

そしてその度に区切りとして、書き出しを実行した回数と日付と時刻、書き出し先のパスまたはPSDドキュメントのパスが、データの頭に付きます。

例:

座標リスト[切り抜きサンプル2].txt
----- [#02] 2006/10/24 (Tue) 23:01:21 -----
書き出し先: "C:¥Example"

(x:-10,	y:-20)	circle2.png


----- [#01] 2006/10/23 (Mon) 20:35:03 -----
書き出し先: "C:¥Example"

(x:-13,	y:-19)	circle2.png

座標リストは切抜きが有効になっていなければ出力されません。

とはいえ素材の更新状況を知るため等、切り抜きを行わなくても座標リストだけは出力したいという場合もあります。

その場合は、いったん切抜きを有効にしてから四隅の空白を保護する設定・表示領域の外側のピクセルを含めない設定にして下さい。

この設定は切抜きをまったく行わない状態と同じ結果が得られ、座標リストも出力されます。

例:

対象レイヤー:circle
切り抜きサンプル.psd
サンプル
(ピクセル存在範囲に合わせて切り抜く)
(上の空白を保護する)
(左の空白を保護する)
(右の空白を保護する)
(下の空白を保護する)
(表示領域の外側のピクセルを含めない)
(ファイルタイプ:PNG)
書き出されたファイル:circle.png
サンプル

座標リスト[切り抜きサンプル].txt
----- [#03] 2006/10/25 (Wed) 10:10:02 -----
書き出し先: "C:¥Example"

(x:0,	y:0)	circle.png	

座標リスト書式設定

座標リストの書式は自由に編集可能です。

座標リスト書式設定ダイアログ
サンプル

書式設定エディットボックスに書かれた内容が、書き出すファイルの分だけ座標リストに追加されていきます。

そしてその中に各書き出し画像の情報を含めるには専用のタグを使います。

座標リスト用タグ一覧:

<name>……書き出しファイルの名前(拡張子抜き)
<type>……書き出しファイルの拡張子(「.」付き)
<x>……左端座標
<y>……上端座標
<x2>……右端座標
<y2>……下端座標
<w>……横幅
<h>……縦幅
<n>……改行
<t>……水平タブ(インデント)

これらのタグが、レイヤー書き出し時にその都度対象レイヤーの各情報に置き換わって出力されます。

それ以外の文字はそのまま出力されます。

例:

座標リストの書式(標準の設定):
(x:<x>,<t>,y:<y>)<t><name><type><n>
※出力された座標情報
(x:29,	y:8)	circle.gif
(x:-13,	y:-19)	circle2.gif

書式は柔軟に変更できますから、例えばHTMLソースや、開発中のシステムのソースにそのままコピー&ペーストする文字列を吐き出す事も可能です。

例:

座標リストの書式(HTML用):※2
<img src="./image/<name><type>" width="<w>" height="<h>" /><n>
※出力された座標情報
<img src="./image/circle.gif"
	width="99" height="74" />※2
<img src="./image/circle2.gif"
	width="186" height="122" />※2

例:

座標リストの書式(プログラム用):※2
var <name>_cg<t>= new CG("<name>");<n><name>_cg.x<t>= <x>;<n><name>_cg.y<t>= <y>;<n><n>
※出力された座標情報
var circle_cg	= new CG("circle");
circle_cg.x	= 29;
circle_cg.y	= 8;

var circle2_cg	= new CG("circle2");
circle2_cg.x	= -13;
circle2_cg.y	= -19;

表紙 |
http://www.re-sonance.com | webmasteratmarkre-sonance.com | Copyright 2006 Saitoh Kagura.