UI-Packs

Oak Inventar-Slots — 72px-Raster

72×72 Inventar-Slots in warme Eiche: leer, Hover, ausgewählt und gesperrt, plus drei Seltenheitsrahmen. SVG und transparentes PNG.

  • ui
  • svg
  • transparentes png
  • Inventar
  • Slot
  • Item-Rahmen
  • Seltenheit
  • Raster
  • Fantasy
  • rpg
  • Holz
Eine Reihe quadratischer Inventar-Slots auf Schachbrettgrund: leer, Hover, ausgewählt mit Eckhaken und diagonal schraffiert gesperrt, gefolgt von farbigen Seltenheitsrahmen und einem gekachelten Acht-Slot-Raster
1600×651 VorschauTransparenz als Schachbrett dargestellt

Über dieses Pack

Das Teil, das ein Fantasy-Inventar wirklich braucht: ein Quadrat, das kachelt. Zweiundsiebzig Pixel sind groß genug, dass ein doppelt gerahmter Rand immer noch Platz für den Gegenstand lässt — genau die Größe, ab der die meisten Inventar-Kits aufhören zu funktionieren.

Ein Inventarraster braucht kein Panel, es braucht ein Quadrat, das kachelt: 7 Dateien in 72×72, alle mit denselben Außenmaßen, sodass eine Reihe davon ohne Abstandsrechnerei fluchtet. Setze sie 76 px auseinander und die Ränder lesen sich als ein einziges Raster statt als Reihe getrennter Kästen.

Die Zustände sind als Struktur gezeichnet, nicht als Farbe. Der ausgewählte Slot bekommt Eckhaken, der gesperrte eine Diagonalschraffur, der Hover-Slot hebt seinen Rand eine Stufe an. Das ist Absicht: Der Inventarbildschirm ist in den meisten Spielen die lauteste Fläche, er liegt unter Item-Grafik in allen Farbtönen zugleich, und ein Zustand, der nur eine Randfarbe ist, wird unsichtbar, sobald ein rotes Schwert im Slot liegt.

Die drei Seltenheitsrahmen greifen die Farben für Leben, Mana und Ausdauer aus dem Rest der Familie wieder auf, jeder mit einer Eckmarkierung zusätzlich zum farbigen Rand — wer nach Seltenheit sortiert, liest also zwei Signale, und keines davon konkurriert mit der Item-Grafik in der Mitte des Slots.

Alles ist als bearbeitbares SVG und als flaches transparentes PNG in 1x, 2x und 4x enthalten. Die Slot-Innenflächen sind transparent, was du hinter dem Raster renderst, scheint also durch, statt von einer eingebrannten Hintergrundfarbe verdeckt zu werden.

Download

Direkter Link · keine Anmeldung · keine Warteseite
ZIP herunterladen29 kB

Komplettes Set — SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und Readme

Dateien in diesem Pack
DateiFormatGrößeDownload
Komplettes Set — SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und ReadmeZIP29 kB Holen →
Leerer Slot, bearbeitbares SVGSVG930 B Holen →
Ausgewählter Slot mit Eckhaken, bearbeitbares SVGSVG1.4 kB Holen →

So wird es benutzt

  1. Lege die Slots im Abstand von 76 px an — 72 px Sprite plus 4 px Zwischenraum — dann bleiben die Ränder einen Pixel auseinander statt sich zu verdoppeln.
  2. Zeichne das Item-Icon zentriert im Slot bei etwa 50 px; die innere Vertiefung misst 66 px, alles Größere berührt den Rand und schluckt den Rahmen.
  3. Tausche für ausgewählte und gesperrte Zustände das ganze Slot-Sprite, statt eine Färbung darüberzulegen, denn Eckhaken und Schraffur gehören zum Sprite.
  4. Die Seltenheitsrahmen ersetzen den leeren Slot eins zu eins — gleiche Maße, gleiche Vertiefung — ein Seltenheitswechsel ist also ein einziger Texturtausch ohne Layoutänderung.
  5. Der 72 px Slot ist für ein 48 px Item-Icon mit Luft bemessen; bei 64 px beginnt der doppelte Rahmen das Item einzuengen und der Seltenheitsrand hört auf zu lesen.

Lizenz

Creative Commons Namensnennung 4.0 — Kostenlos für kommerzielle Nutzung. Namensnennung erforderlich. Vollständige Bedingungen · Was das in der Praxis heißt

Namensnennung zum Kopieren
"Oak Inventar-Slots — 72px-Raster" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-inventory-slots