Packs de interface

Byte Janelas modais

15 janelas modais e avisos do sistema (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
  • modal
  • caixa de diálogo
  • confirmação
  • notificação
  • faixa
  • pixel
  • pixel art
  • pixel art
  • interface clara
  • quebra-cabeça
  • gerenciamento
Folha com 15 janelas modais e avisos do sistema (pixel art) da família Byte, dispostos sobre um xadrez de transparência com suas medidas em pixels escritas embaixo
prévia 1600×1691a transparência aparece como xadrez

Sobre este pack

Byte Janelas modais é um conjunto de 15 janelas modais e avisos do sistema desenhados no estilo pixel art, em que cada canto é uma escada de pixels inteiros e nada tem antialiasing. Contém três janelas modais de gravidade crescente, três placas de sistema e três faixas de sistema, uma linha inferior de três botões, um botão de fechar, um escurecimento de fundo em camadas e um campo de entrada simples, outro em foco e outro com erro.

Uma janela modal não é um painel: ela para o jogo, espera uma resposta e às vezes essa resposta não pode ser desfeita. O jeito habitual de dizer isso é uma borda vermelha, que colide com a cor de vida já presente na tela e some assim que alguém retinge o kit para a própria paleta.

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.

A gravidade está na espessura da faixa da borda superior e não no seu tom: três pixels para um aviso, seis para um alerta, dez para algo destrutivo. Assim ela sobrevive a qualquer tingimento e a qualquer captura em escala de cinza. As posições dos botões são fixas e propositais: cancelar à esquerda e em relevo, a ação que confirma à direita e rebaixada. Essa ordem vira memória muscular ao longo de um jogo, e um kit que a varia é o motivo de alguém apagar um save por reflexo. O escurecimento é feito de quatro degraus empilhados e não de uma camada uniforme, porque uma única folha preta sobre a tela inteira mata a arte que deveria escurecer.

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 ZIP48 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 readmeZIP48 kB Obter →
Janela modal, espessura de aviso, SVG editávelSVG4.0 kB Obter →

Como usar

  1. Mantenha cancelar à esquerda e a ação que confirma à direita em toda janela, inclusive nas que você montar com a linha inferior.
  2. Escolha a janela pela espessura da faixa superior em vez de retingir um sprite. O sinal é a espessura.
  3. Estenda o escurecimento atrás da janela no tamanho da sua tela e repita-o: ele é desenhado em degraus distintos e por isso amplia sem artefato de desfoque.
  4. Use o campo de entrada com erro em vez de uma borda vermelha. Ele duplica o sublinhado, e isso se lê em escala de cinza e ao lado de uma barra de vida.

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