UIパック
Redline メニューアイコン — 32px二色セット
警報レッドの二色メニューアイコン6点、32×32グリッド。再生・一時停止・設定・地図・音・閉じる。シートと個別ファイル。

このパックについて
32pxのグリッドに置いた二色のアイコンで、グリッドは大きめです。警告の画面は距離があって緊張した状況で読まれ、そこでは24pxのアイコンは滲みになります。
六点のアイコンはすべて32×32の厳密なグリッドに乗り、線幅は一律2 pxで、視覚上の重さも揃えてあります。だから並べたときに、たまたま同じ大きさの六枚の絵ではなく一つのセットに見えます。カバーするのは再生、一時停止、設定、地図、音、閉じるです。
どのアイコンもちょうど二つの値しか持ちません。本体の色と、その中で抜いたアクセントの細部です。それがパレットのすべてで、影もグラデーションもベベルもありません。だからセットの色替えは置換二回で済み、アクセントはインターフェースの他の用途に空けておけます。
セットは三通りで届きます。個別のSVGは、エンジンがベクターをラスタライズする場合や自分で編集する場合に使うものです。192×32のシートは、テクスチャ一枚と矩形オフセットを好むエンジン向けに六点点を同じグリッドへ並べます。N番目のセルは x = N × 32 から始まります。PNGの書き出しは1x・2x・4xをカバーし、透過の縁もきれいです。
使い方
- シート上でN番目のアイコンは x = N × 32、y = 0、幅32、高さ32の矩形を占めます。順番は再生、一時停止、設定、地図、音、閉じるです。
- アイコンは1x、2x、4xで整数ピクセル上に置いてください。2 pxの線を端数倍率でレンダリングすることこそ、鮮明なアイコンを灰色のにじみに変えてしまう原因です。
- 色を変えるにはSVG内の二つの値、本体色とアクセントの細部を変更してください。PNGへのベタ塗り着色は二色を一色に潰すので、二色の読みを保つならSVGの段階で変えてください。
- タッチ対象では、アイコンを32 pxのまま保ち、拡大するのは背後のボタンにしてください。線の太さはこのサイズに合わせてあります。
ライセンス
コピー用のクレジット表記
"Redline メニューアイコン — 32px二色セット" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/redline-menu-icons-32


