■チュートリアル:サムネール(選択アイテム:パネル形式)の作成 |
このチュートリアルでは、CGモード等で頻繁に利用する、選択アイテム:パネル形式のサムネールを作成します。
パネル形式は、「非選択状態」「選択状態(カーソルが乗っているときの画像)」「無効状態(入力禁止の画像)」の3枚の画像がこの順番で横に並んでいる画像データで、retouchには、それぞれの大きさが違っても構わないものや、αチャンネルマスクを個々に指定できるパネル形式もありますが、現在sketchUIから直接利用できるものは、3枚の大きさが同じでマスクデータを持たないものに限られています。 |
|
1.作成の準備 |
まず、フォルダを作成して、使用ツールをダウンロードします。 |
最初に、サムネールを作成する場所を作りましょう。
標準では、sketchのプロジェクトフォルダ/resource/フレーム/以下に適当なフォルダを掘って配置されますが、作業自体はどのフォルダで行っても同じです。今後この作業フォルダを、tn/とします。TnumbNailですね。以降はこのtnフォルダをカレントとして話を進めます。フルパスは便宜上、D:/tn/
だとしておきます。
まず、parts と finish を tnフォルダに作成しておきましょう。 |
tn/ |
|
|
|
parts/ |
無効時の画像や、サムネール背景画像が配置される。 |
|
finish/ |
出力したサムネール(フルカラー版)が格納される。 |
|
|
|
src/ |
|
どこでも良い。元になるイベント画像が格納されている。 |
|
次に、サムネール作成ツールである、createThumbnailをダウンロード[外部リンク]しましょう。リンク先のページの真ん中あたりにあります。
ダウンロードが終わったら、適当なフォルダに配置して、createThumbnail.exeを実行して下さい。 |
|
2.createThumbnail |
|
すると左図のようなダイアログが開きます。
上半分のパラメータは、単にサムネールを作る時も使用するパラメータで、以下の意味を持ちます。
転送元参照 |
元になるイベント画像が格納されているフォルダを指定します。このフォルダにある展開可能な全ての画像ファイルが処理の対象になります。なお、サブフォルダは処理しません。 |
転送先参照 |
サムネールを出力するフォルダを指定します。
出力されるファイルのファイル名は転送元のファイル名と同じになりますが、拡張子はbmpになります。同名のファイルが存在した場合は上書きされますのでご注意下さい。 |
出力サイズ |
出力するサムネールの大きさを指定します。
アスペクト比を固定しない場合、全ての画像はこの大きさに変形されます。固定した場合は、画像の長辺がこのサイズになるよう変形されます。
選択アイテムを作成する場合は1枚1枚のパーツの大きさです。例えばパネルならここで指定したサイズが横に3個並ぶ大きさになります。 |
背景色指定 |
アスペクト比を固定した場合、画像の長辺が出力サイズになるように調整されます。その際、画像がない領域が出来るわけですが、その部分の色をRRGGBB形式で指定します。000000で黒。FF0000で赤。FFFFFFで白になります。 |
|
|
サムネールを作成するだけなら以上の設定を行って「出力」を押せばOKです。結果が、finish/に出力されます。なお、手抜きのためキャンセルできません。ご注意下さい。
さて、選択アイテム(パネル)を出力するためには、「選択アイテムの作成」をチェックして、以下のパラメータも設定しなければなりません。 |
|
createThumbnailで作ることの出来るサムネール用のパネルは、
|
|
|
|
という形をしています。元画像を出力サイズにしたものが「実画像」、実画像をモノトーン化したものが「モノトーン画像」、下記の無効画像指定で指定したものがそのまま「無効画像」となります。
それぞれの画像は、下記の「背景画像」で指定した画像に、「合成用マスク」を適用して合成されたものになります。つまり、選択アイテムの各パーツにフレームが付いている場合、そのフレームの画像が「背景画像」に、フレームを抜いたマスク画像が「合成用マスク」になります。
|
|
背景画像 |
サムネールの背景になる画像を指定します。
この画像の上に、合成用マスクを適用した各サムネールを描画したものが、出力される画像のパーツになります。 |
合成用マスク |
グレースケール画像でなければなりません。
上記の背景画像に対して、このマスクを適用したサムネールを描画したものが各パーツになります。 |
非選択領域 |
元の画像の白(RRGGBB:FFFFFF)にあたるモノトーン画像の色をRRGGBB形式で指定します。
FFFFFF を指定すると単なるグレースケールに、FF0000 を指定すると赤のスケールになります。セピア調のスケールにしたいとき等に利用します。 |
無効画像指定 |
もともとCGモード等のサムネールを作成する用途であったため、選択不可能時(つまり見ていないとき)は、対象画像とは無関係な、所謂蓋のような統一された画像を使用することが多くなります。その画像を指定します。
なお、この画像にも背景画像は合成されます。
また、希に、背景画像を適用せず、この画像を単色で塗りつぶしたい場合があります。例えば、透明色で塗りつぶすことで、無効時は透明にしてしまいたいような場合です(選択アイテムの更に背景にあるイベント画像に直接無効時の状態が書いてあるとき等がこれにあたります)
その場合は、半角のスラッシュに続いて、塗りつぶしたい色を指定することが出来ます。
この色指定は、0xRRGGBB形式で行います。
例1:d:\tn\parts\futa.png
例2:/0x00FF00
例1では、futa.png に合成用マスクを適用して背景画像に合成したものが無効画像として利用されます。
例2では、出力サイズの大きさが緑(00FF00)で塗りつぶされたものが無効画像として利用されます。 |
|
|
これらを指定した後「出力」ボタンを押せば、選択アイテムを出力できます。 |
|
|
実行はキャンセルできませんので、転送元参照にテスト用のフォルダを指定して、2〜3個のデータで出力を確認してから実行するのが良いでしょう。
|
|
|
3.createThumbnail 出力例 |
createThumbnailによる実際の出力例は、こちらを参照[外部リンク]して下さい。 |
|
4.その他のサムネール作成方法 |
同一の画像を縮小し、3個横に並べて縁の色だけで差異を付ける場合は、gyu.exe の /panel (コマンドID:26) のモード0でも作成できます。
gyu.exe を、gyu /help 26 で実行すると、詳細が表示されます。されないものはバージョンが古いものと思われます。 |
|