UIパック

Dusk メニューアイコン — 16pxベタ塗りセット

薄暮のパープルの単色ベタ塗りメニューアイコン57点、16×16グリッド。再生・一時停止・設定ほか54点。シートと個別ファイル。

  • ui
  • svg
  • 透過png
  • アイコン
  • 16px
  • メニュー
  • ベタ塗り
  • ピクセルアート
  • レトロ
  • 2d
薄暮のパープルのタイル上に置いたベタ塗りゲームメニューアイコン57点。大きく見せ、シートに並べ、さらに実寸16ピクセルでも表示
プレビュー 1600×1248透明部分は市松模様で表示

このパックについて

輪郭ではなくベタの形として描いた十六ピクセルのアイコンです。この大きさでは輪郭とは、何もない1ピクセルの周りの2ピクセルの縁のことになってしまいます。それでも元はベクターなので、2xと4xの書き出しは引き伸ばしではなく鮮明です。

57点のアイコンはすべて厳密な16×16グリッドに乗り、線幅は一律2px、視覚的な重さも揃えてあります。だから一列に並べたとき、たまたま同じ大きさの57枚の絵ではなく、ひとつのセットとして読めます。収録は再生、一時停止、設定、持ち物、地図、音、閉じる、決定、体力、通貨、防御、戦利品、ホーム、戻る、進む、上、下、メニュー、検索、絞り込み、更新、全画面、追加、削除、ロック、解除、表示、消去、情報、警告、星、トロフィー、時間、保存、ダウンロード、アップロード、武器、ポーション、宝石、鍵、宝箱、クエスト、危険、炎、エネルギー、マナ、防具、速度、スキル、ターゲット、音楽、プロフィール、パーティ、チャット、メール、ショップ、報酬。

すべて単色です。ファイルごとに値は一つだけなので、セット全体の色替えは置換一回、PNGを使うならマテリアル側の着色一回で済みます。影もグラデーションもベベルも焼き込まれていません。自前の照明を抱えたアイコンは、あなたのインターフェースが変わった瞬間に合わなくなるからです。

セットは三通りで届きます。エンジンがベクターをラスタライズする場合や自分で編集する場合は、個別のSVGが向いています。912×16のシートは57点すべてを同じグリッドに並べます。テクスチャ1枚と矩形オフセットを好むエンジン向けで、N番目のセルはx = N × 16から始まります。PNG書き出しは1x、2x、4xで、透過の縁もきれいです。

ダウンロード

直リンク · 登録不要 · 待機ページなし
ZIPをダウンロード171 kB

フルセット — 個別SVG、シート、1x/2x/4xのPNG書き出し

このパックに含まれるファイル
ファイル形式容量ダウンロード
フルセット — 個別SVG、シート、1x/2x/4xのPNG書き出しZIP171 kB 入手 →
アイコンシート、編集可能なSVGSVG13 kB 入手 →

使い方

  1. シート上でN番目のアイコンは矩形 x = N × 16、y = 0、幅16、高さ16 を占めます。順番は次のとおり:再生、一時停止、設定、持ち物、地図、音、閉じる、決定、体力、通貨、防御、戦利品、ホーム、戻る、進む、上、下、メニュー、検索、絞り込み、更新、全画面、追加、削除、ロック、解除、表示、消去、情報、警告、星、トロフィー、時間、保存、ダウンロード、アップロード、武器、ポーション、宝石、鍵、宝箱、クエスト、危険、炎、エネルギー、マナ、防具、速度、スキル、ターゲット、音楽、プロフィール、パーティ、チャット、メール、ショップ、報酬。
  2. アイコンは1x、2x、4xで整数ピクセル上に置いてください。2 pxの線を端数倍率でレンダリングすることこそ、鮮明なアイコンを灰色のにじみに変えてしまう原因です。
  3. 色を変えるにはSVG内の唯一の塗りまたは線の値を変更するか、UIマテリアルでPNGに着色してください。一つのファイル内の図形はすべて同じ値を使っています。
  4. タッチ対象では、アイコンを16 pxのまま保ち、拡大するのは背後のボタンにしてください。線の太さはこのサイズに合わせてあります。
  5. 1xのこれらのアイコンは8または16ピクセルの文字と並ぶ前提です。フォントがより大きいなら、1xを1.5倍に拡大せず2xの書き出しを使ってください。

ライセンス

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

コピー用のクレジット表記
"Dusk メニューアイコン — 16pxベタ塗りセット" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-menu-icons-16