Packs de interface

Mint Células de inventário — grade de 56px

56×56 células de inventário em ardósia fria: 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
  • plano
  • interface escura
  • estratégia
  • ferramentas
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×629a transparência aparece como xadrez

Sobre este pack

Células de inventário de 56px numa grade apertada. Num jogo de gerenciamento a célula é mais uma célula de planilha que uma vitrine, e as molduras de raridade são desenhadas como bordas finas em vez de brilhos pelo mesmo motivo.

Uma grade de inventário não precisa de um painel, precisa de um quadrado que se repita: 7 arquivos de 56×56, todos com os mesmos limites externos, para que uma fileira alinhe sem contas de espaçamento. Separe-as em 60 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 vida, mana e vigor 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 transparente plano 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 ZIP64 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 readmeZIP64 kB Obter →
Célula vazia, SVG editávelSVG532 B Obter →
Célula selecionada com marcas nos cantos, SVG editávelSVG991 B Obter →

Como usar

  1. Disponha as células com um passo de 60 px — o sprite de 56 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 39 px; o recesso interno tem 50 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 Zero 1.0 — Domínio público. Sem atribuição. Termos completos · O que isso significa na prática