Sumi パネルキット — 二重枠パネルとボタン

反転したセルシェーディング。紙に濃いインクではなく、暗い地に淡いインクです。硬い縁の境界はどちらのファミリーでも同じ形で、そうでなければなりません。柔らかい減衰はセルシェーディングが唯一許せないものだからです。ただし黒地の淡い輪郭は白地の濃い輪郭より重さが要り、二本目の同心フレームがその置き場所を与えています。

nine-sliceのパネル二枚 — 角14 pxの二重枠のウィンドウ枠と、角12 pxの沈んだ内枠 — で、メニューに必要なほぼすべての箱をまかなえます。ダイアログ、インベントリのグリッド、リストの下地、ツールチップ、ステータスパネル。間に隙間を置いた二重の縁は、描かれたというより彫られたように読めます。それが、作り込まれたインターフェースと線を引いただけの矩形を分ける違いです。角は決して拡大されず中央はフラットな塗りなので、どちらもどんなサイズにもきれいに伸びます。

パネルの上にはタブ形ボタンの4状態が載ります。通常、ホバー、押し込み、無効。いずれも同じ120×48の土台に角8 pxで描かれているので、ボタンのウィジェット一つでテクスチャを差し替えるだけで、矩形を動かさずに操作の一巡りがそろいます。押し込み状態は暗くするだけでなく面を2ピクセル下げて上のハイライトを外します。これが、ただ色が変わったのではなく押されたという手応えを作ります。

すべてが二通りで届きます。SVGソースはキットを実際に描いたファイルそのものです。開いて木炭の淡塗りの六色か封蝋の赤のアクセント一色を変え、書き出し直してください。PNGの書き出しはフラットで透明、ビットマップを求めるエンジン向けに1x・2x・4xへあらかじめ拡大してあり、アルファの事前乗算もスプライト外にはみ出す焼き込みの影もありません。

クリエイティブ・コモンズ 表示 4.0 — 商用利用も無料。クレジット表記が必要です。 全文 · 実際どういう意味か