Packs de interface

Neon Células de inventário — grade de 64px

64×64 células de inventário em neon de alto contraste: estados vazia, hover, selecionada e bloqueada mais três molduras de raridade. SVG e PNG transparente.

  • ui
  • svg
  • png transparente
  • inventário
  • célula de inventário
  • moldura de item
  • raridade
  • grade
  • ficção científica
  • hud
  • cyberpunk
Uma fileira de células de inventário quadradas sobre fundo xadrez mostrando os estados vazia, hover, selecionada com marcas nos cantos e bloqueada com hachura diagonal, seguida de molduras de raridade coloridas e de uma grade de oito células
prévia 1600×640a transparência aparece como xadrez

Sobre este pack

Células de 64px com a silhueta facetada mantida: o encaixe é um polígono angular, não um quadrado arredondado, então pertence à mesma malha dos painéis. O estado selecionado clareia uma única faceta em vez da moldura inteira, o que se lê como luz presa numa aresta e não como filtro de brilho.

Uma grade de inventário não precisa de um painel, precisa de um quadrado que se repita: 7 arquivos de 64×64, todos com os mesmos limites externos, para que uma fileira alinhe sem contas de espaçamento. Separe-as em 68 px e as bordas se leem como uma única grade em vez de uma fileira de caixas soltas.

Os estados são desenhados como estrutura, não como cor. A célula selecionada recebe marcas nos cantos, a bloqueada uma hachura diagonal, e a de hover sobe a borda um degrau. É proposital: a tela de inventário é a superfície mais barulhenta da maioria dos jogos, fica sob arte de itens de todos os matizes ao mesmo tempo, e um estado que é só uma cor de borda vira invisível assim que há uma espada vermelha na célula.

As três molduras de raridade reaproveitam as cores de escudo, energia e calor do resto da família, cada uma com uma marca de canto além da borda colorida — então quem ordena por raridade está lendo dois sinais, e nenhum deles compete com a arte do item no centro da célula.

Tudo está incluído como SVG editável e como PNG chapado transparente em 1x, 2x e 4x. Os interiores das células são transparentes, então o que você renderizar atrás da grade aparece através, em vez de uma cor de fundo assada na imagem.

Download

Link direto · sem cadastro · sem página de espera
Baixar ZIP31 kB

Conjunto completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readme

Arquivos inclusos neste pack
ArquivoFormatoPesoDownload
Conjunto completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readmeZIP31 kB Obter →
Célula vazia, SVG editávelSVG432 B Obter →
Célula selecionada com marcas nos cantos, SVG editávelSVG891 B Obter →

Como usar

  1. Disponha as células com um passo de 68 px — o sprite de 64 px mais 4 px de espaço — e as bordas ficarão a um pixel de distância em vez de dobrarem.
  2. Desenhe o ícone do item centralizado na célula com cerca de 45 px; o recesso interno tem 58 px, então qualquer coisa maior toca a borda e engole a moldura.
  3. Troque o sprite inteiro da célula nos estados selecionada e bloqueada em vez de sobrepor uma tinta, porque as marcas nos cantos e a hachura fazem parte do sprite.
  4. As molduras de raridade substituem diretamente a célula vazia — mesmos limites, mesmo recesso — então uma mudança de raridade é uma única troca de textura, sem mexer no layout.

Licença

Creative Commons Atribuição 4.0 — Grátis para uso comercial. Atribuição obrigatória. Termos completos · O que isso significa na prática

Linha de crédito para copiar
"Neon Células de inventário — grade de 64px" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/neon-inventory-slots