UIパック
Sumi 背景画
7個の背景とオーバーレイ素材(セルシェード)。ダークUI用、木炭の淡塗りに封蝋の赤のアクセント。SVG+透過PNG 1x/2x/4x。

このパックについて
Sumi 背景画はセルシェードスタイルで描かれた7点の背景とオーバーレイ素材のセットです。太いインクの輪郭が、硬い斜めの境界で分かれた二つのフラットな色調を包みます。中身は全画面のメニュー背景、シームレスなパターンタイル、モーダル用の暗幕、タイトルバナー、セクション区切り、ローディングバーのレールと塗りです。
これは無料のUIキットの多くがまるごと省いてしまう部品です。パネルとボタンはくれるのに、それを載せる場所がないキットは、最初の画面を組んだところで役に立たなくなります。そして背景こそ、ベタ塗りでごまかすとメニュー全体が未完成に見えてしまう唯一の要素です。
影は減衰のまったくない硬い縁の単一形状です。それがセルシェーディングを定義する性質であり、グラデーションには決して真似できないものです。輪郭は縁の色調ではなくパレットで最も暗い色調を使います。そうしないとインクではなく太い灰色の枠に見えてしまいます。
そのスタイルの中でこれはSumiとしての読みです。木炭の淡塗りのパレットに封蝋の赤のアクセントを載せたダークインターフェースで、二重の同心フレーム、120x48のタブ形のボタン、9分割の光沢のあるバー、32pxグリッドの線画のアイコンを軸に組まれています。二つのファミリーがアートスタイルを共有しながら入れ替え可能にならない理由は、この寸法にあります。スタイルは縁の描き方を決め、数値はそのインターフェースが何のためのものかを決めます。
背景はアートスタイルがいちばん自分を見せられる場所なので、スタイルごとに描き方を変えてあります。ディザの帯、三角形のモザイク、ハッチングした紙、アイソメのグリッド、硬い縁の地平線。640x360で収録し、4xで2560x1440へ書き出します。比率を保ったまま1080pまでカバーするので、カバー方式一つでどの解像度にも伸びます。パターンタイルはどのモチーフも自分の範囲の中で閉じているため、並べても継ぎ目が出ません。
どのスプライトも編集可能なSVGと、1x・2x・4xの透過PNGで届きます。PNGをそのままエンジンに置いても、ベクターを開いて色を変えても構いません。Sumiファミリーの他と同じ寸法で描かれているので、このキットとSumiのパネルキットはどちらもサイズを変えずに揃います。セルシェードやトゥーンレンダリングのゲームによく合います。
使い方
- 背景は引き伸ばしではなくカバー方式で使ってください。16:9という比率は意図されたもので、歪めるとグラデーション上ですぐ分かります。
- リストやインベントリのグリッドの背後には、細かいテクスチャなら1x、粗いなら2xでパターンを敷いてください。縦横どちらにもシームレスです。
- ゲームとモーダルの間の暗幕は全画面で描いてください。ベタ黒ではなくスタイルのパレットを使っているので、色のあるゲームを灰色にしません。
ライセンス
"Sumi 背景画" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/sumi-backdrops


