Packs de interface

Byte Panos de fundo

7 peças de fundo e sobreposição (pixel art) para interfaces em modo claro — osso frio, acento azul-petróleo de sinal. SVG e PNG transparente em 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • imagem de fundo
  • pano de fundo
  • repetível
  • tela de menu
  • pixel
  • pixel art
  • pixel art
  • interface clara
  • quebra-cabeça
  • gerenciamento
Folha com 7 peças de fundo e sobreposição (pixel art) da família Byte, dispostos sobre um xadrez de transparência com suas medidas em pixels escritas embaixo
prévia 1600×1341a transparência aparece como xadrez

Sobre este pack

Byte Panos de fundo é um conjunto de 7 peças de fundo e sobreposição desenhados no estilo pixel art, em que cada canto é uma escada de pixels inteiros e nada tem antialiasing. Contém um pano de fundo de menu em tela cheia, um ladrilho de padrão sem emendas, uma camada de escurecimento para modais, um banner de título, um separador de seção e o trilho e o preenchimento de uma barra de carregamento.

Esta é a peça que a maioria dos kits de interface gratuitos deixa completamente de fora. Um kit que te dá painéis e botões mas nada em que apoiá-los deixa de ser útil na primeira tela que você montar, e o pano de fundo é a única coisa que não dá para simular com uma cor chapada sem que o menu inteiro pareça inacabado.

O contorno avança em degraus de 4px e o sombreamento é um dithering de Bayer em vez de um degradê, então o conjunto sobrevive a uma escala por fator inteiro — o único jeito de escalar pixel art sem virar mingau.

Dentro desse estilo, esta é a leitura Byte: uma interface em modo claro sobre uma paleta osso frio com acentos azul-petróleo de sinal, construída em torno de uma moldura de borda única, botões em cápsula totalmente arredondados de 112x36, barras em faixas divididas em 10 segmentos e ícones com contorno numa grade de 24px. São essas medidas que explicam por que duas famílias podem compartilhar um estilo artístico sem serem intercambiáveis: o estilo decide como se traça uma borda, os números decidem para que serve a interface.

O pano de fundo é onde um estilo artístico tem mais espaço para se mostrar, então é desenhado de forma diferente em cada um: faixas com dithering, um mosaico triangulado, papel hachurado, uma grade isométrica, um horizonte de borda dura. Vem em 640x360 e exporta para 2560x1440 em 4x, o que cobre 1080p mantendo a proporção, então se estende a qualquer resolução com um único ajuste de cobertura. O ladrilho de padrão fecha cada motivo dentro dos próprios limites, então a repetição não mostra emenda.

Cada sprite vem como SVG editável e como PNG transparente em 1x, 2x e 4x, então você pode jogar os PNGs direto num motor ou abrir o vetor e mudar uma cor. Desenhado com as mesmas medidas do resto da família Byte, o que significa que este kit e o kit de painéis Byte se alinham sem que nenhum dos dois seja redimensionado. Combina bem com jogos em pixel art.

Download

Link direto · sem cadastro · sem página de espera
Baixar ZIP18 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 readmeZIP18 kB Obter →
Pano de fundo de menu em tela cheia, pixel art, SVG editávelSVG1.8 kB Obter →

Como usar

  1. Use o pano de fundo com ajuste de cobertura em vez de esticá-lo — a proporção 16:9 é intencional e deformá-la aparece na hora num degradê.
  2. Repita o padrão atrás de listas e grades de inventário em 1x para uma textura fina ou em 2x para uma grossa; ele é sem emendas nas duas direções.
  3. Desenhe o escurecimento entre o jogo e uma janela modal em tela cheia. Ele usa a paleta do estilo em vez de preto chapado, então não deixa cinza um jogo colorido.

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
"Byte Panos de fundo" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/byte-backdrops