Packs de interface

Nightcity Kit de progressão

11 componentes de progressão e recompensa (cyberpunk) para interfaces em modo escuro — azul meia-noite, acento magenta intenso. SVG e PNG transparente em 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • árvore de habilidades
  • estrelas
  • recarga
  • fase
  • cyberpunk
  • cyberpunk
  • cyberpunk
  • ficção científica
  • neon
  • hud
Folha com 11 componentes de progressão e recompensa (cyberpunk) da família Nightcity, dispostos sobre um xadrez de transparência com suas medidas em pixels escritas embaixo
prévia 1600×1123a transparência aparece como xadrez

Sobre este pack

Nightcity Kit de progressão é um conjunto de 11 componentes de progressão e recompensa desenhados no estilo cyberpunk, em que cada moldura tem seu próprio contorno assimétrico — um entalhe num canto, um trilho ao longo de uma borda. Contém quatro estados de nó da árvore de habilidades, estrelas de avaliação vazia, pela metade e cheia, um selo de nível, um anel de experiência e um anel de recarga de habilidade.

As telas de progressão são onde o estado mais importa e onde a cor é menos confiável: uma árvore de habilidades já está coberta de arte de habilidades em todos os matizes, então um nó cujo estado é só uma cor de borda fica ilegível assim que recebe um ícone dentro.

A silhueta é composta e não escalada: cada um dos quatro cantos e cada uma das quatro bordas recebe o próprio tratamento, então não há duas molduras do conjunto que compartilhem contorno. O brilho de neon é uma pilha de traços em opacidade decrescente, não um filtro de desfoque — alguns rasterizadores SVG aplicam filtros de outro jeito e transformam o halo numa mancha em 4x.

Dentro desse estilo, esta é a leitura Nightcity: uma interface em modo escuro sobre uma paleta azul meia-noite com acentos magenta intenso, construída em torno de uma moldura de borda única, botões chanfrados de 176x44, barras de núcleo oco divididas em 16 segmentos e ícones em duas cores numa grade de 32px. 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 nó bloqueado é hachurado, o nó no máximo leva quatro marcas nos cantos e o nó disponível é simplesmente a face lisa — três estados contados por textura e quantidade em vez de matiz. Os dois anéis compartilham uma mesma geometria e diferem só na direção do preenchimento e na cor, então se alinham quando sobrepostos.

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 Nightcity, o que significa que este kit e o kit de painéis Nightcity se alinham sem que nenhum dos dois seja redimensionado. Combina bem com interfaces cyberpunk, de ficção científica e de futuro próximo.

Download

Link direto · sem cadastro · sem página de espera
Baixar ZIP93 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 readmeZIP93 kB Obter →
Nó da árvore de habilidades, bloqueado, cyberpunk, SVG editávelSVG3.4 kB Obter →

Como usar

  1. Desenhe o ícone da habilidade dentro do nó, não em cima; a arte do nó deixa o centro livre exatamente para isso.
  2. Anime o anel de recarga redesenhando o arco em vez de girar o sprite — o quadro incluído é um exemplo estático em 68%.
  3. Empilhe três estrelas do mesmo tamanho para uma linha de avaliação; a meia estrela existe para que uma média de 2.5 não precise ser arredondada.

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
"Nightcity Kit de progressão" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/nightcity-progression-kit