UIパック
Carbon 背景画
7個の背景とオーバーレイ素材(リアル)。ダークUI用、ほぼ黒に注意アンバーのアクセント。SVG+透過PNG 1x/2x/4x。

このパックについて
Carbon 背景画はリアルスタイルで描かれた7点の背景とオーバーレイ素材のセットです。五段のスペキュラなグラデーションが、角にリベットを打ったヘアライン金属の面を流れ落ちます。中身は全画面のメニュー背景、シームレスなパターンタイル、モーダル用の暗幕、タイトルバナー、セクション区切り、ローディングバーのレールと塗りです。
これは無料のUIキットの多くがまるごと省いてしまう部品です。パネルとボタンはくれるのに、それを載せる場所がないキットは、最初の画面を組んだところで役に立たなくなります。そして背景こそ、ベタ塗りでごまかすとメニュー全体が未完成に見えてしまう唯一の要素です。
筆のテクスチャは本物のノイズではなく3pxの線のパターンです。ノイズはPNGの容量を三倍にしますが、1xでは誰にも見えません。影はぼかさず重ねてあるので、4xでも持ちこたえます。
そのスタイルの中でこれはCarbonとしての読みです。ほぼ黒のパレットに注意アンバーのアクセントを載せたダークインターフェースで、閉じた縁の代わりに置いた四隅の金具、152x44の面取りボタン、14分割の中空コアのバー、32pxグリッドの二色のアイコンを軸に組まれています。二つのファミリーがアートスタイルを共有しながら入れ替え可能にならない理由は、この寸法にあります。スタイルは縁の描き方を決め、数値はそのインターフェースが何のためのものかを決めます。
背景はアートスタイルがいちばん自分を見せられる場所なので、スタイルごとに描き方を変えてあります。ディザの帯、三角形のモザイク、ハッチングした紙、アイソメのグリッド、硬い縁の地平線。640x360で収録し、4xで2560x1440へ書き出します。比率を保ったまま1080pまでカバーするので、カバー方式一つでどの解像度にも伸びます。パターンタイルはどのモチーフも自分の範囲の中で閉じているため、並べても継ぎ目が出ません。
どのスプライトも編集可能なSVGと、1x・2x・4xの透過PNGで届きます。PNGをそのままエンジンに置いても、ベクターを開いて色を変えても構いません。Carbonファミリーの他と同じ寸法で描かれているので、このキットとCarbonのパネルキットはどちらもサイズを変えずに揃います。リアルやシミュレーションのインターフェースによく合います。
使い方
- 背景は引き伸ばしではなくカバー方式で使ってください。16:9という比率は意図されたもので、歪めるとグラデーション上ですぐ分かります。
- リストやインベントリのグリッドの背後には、細かいテクスチャなら1x、粗いなら2xでパターンを敷いてください。縦横どちらにもシームレスです。
- ゲームとモーダルの間の暗幕は全画面で描いてください。ベタ黒ではなくスタイルのパレットを使っているので、色のあるゲームを灰色にしません。
ライセンス
"Carbon 背景画" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/carbon-backdrops


