Packs d'interface

Paper Interface de groupe

13 éléments de groupe et d’effectif (plat) pour interfaces en mode clair — papier chaud, accent rouge rouille. SVG et PNG transparent en 1x/2x/4x.

  • ui
  • svg
  • png transparent
  • groupe
  • effectif
  • escouade
  • ordre des tours
  • formation
  • plat
  • plat
  • interface claire
  • minimaliste
  • casual
Planche montrant 13 éléments de groupe et d’effectif (plat) de la famille Paper, disposés sur un damier de transparence avec leurs tailles en pixels inscrites en dessous
aperçu 1600×707la transparence est montrée en damier

À propos de ce pack

Paper Interface de groupe est un ensemble de 13 éléments de groupe et d’effectif dessinés dans le style plat, où il n'y a ni contour ni ombrage d'aucune sorte. Il contient six états de carte de membre, une case d’effectif vide, une occupée et une verrouillée, une grille de formation à trois rangs, une bande d’ordre des tours, une ligne d’invitation et une paire de flèches d’échange.

Un HUD dessine un personnage. Un écran de groupe en dessine quatre à la fois, et c’est un autre problème : avec quatre cartes côte à côte, à qui est le tour, qui mène et qui est à terre doivent se lire d’un même coup d’œil, alors que la couleur qui porterait normalement cette information est déjà prise par les personnages eux-mêmes.

La profondeur ne vient que d'une ombre douce en couches — trois passes empilées plutôt qu'un filtre de flou, parce que certains rastériseurs SVG mettent un flou à l'échelle de travers et que le PNG 4x sort en bavure. Tout le reste est d'une seule couleur pleine.

À l'intérieur de ce style, voici la lecture Paper : une interface en mode clair sur une palette papier chaud avec des accents rouge rouille, bâtie autour de un cadre à bordure unique, de boutons pilule entièrement arrondis en 140x44, de barres en bandes divisées en 10 segments et d'icônes au trait sur une grille de 24px. Ces mesures expliquent pourquoi deux familles peuvent partager un style artistique sans être interchangeables : le style décide comment un bord est tracé, les nombres décident à quoi sert l'interface.

Chaque état de groupe est une marque à un endroit différent de la carte : deux états peuvent donc être vrais en même temps sans qu’aucun ne se perde. Chef est une pointe d’angle en haut à gauche, tour actif une barre sur le bord gauche, prêt une pointe en bas à droite, ciblé un crochet autour de toute la carte et à terre une hachure en travers. Aucune ne touche le creux du portrait, car le portrait appartient à votre illustration et non au kit. La grille de formation marque son rang avant avec l’accent, pour qu’un écran de placement se lise sans légende.

Chaque sprite est livré en SVG modifiable et en PNG transparent à 1x, 2x et 4x : vous pouvez déposer les PNG directement dans un moteur ou ouvrir le vecteur et changer une couleur. Dessiné aux mêmes mesures que le reste de la famille Paper, ce qui veut dire que ce kit et le kit de panneaux Paper s'alignent sans qu'aucun des deux soit redimensionné. Convient bien aux interfaces minimalistes et mobiles.

Téléchargement

Lien direct · sans inscription · sans page d'attente
Télécharger ZIP156 kB

Ensemble complet — sources SVG, exports PNG en 1x/2x/4x, licence et readme

Fichiers inclus dans ce pack
FichierFormatPoidsTéléchargement
Ensemble complet — sources SVG, exports PNG en 1x/2x/4x, licence et readmeZIP156 kB Obtenir →
Carte de membre du groupe, au repos, SVG modifiableSVG1.1 kB Obtenir →

Comment l'utiliser

  1. Réservez le creux du portrait à votre propre illustration ; toutes les marques d’état sont dessinées à l’extérieur, rien ne recouvre donc un visage.
  2. Combinez les marques d’état au lieu de choisir entre elles. Un chef également à terre porte les deux, et elles sont dessinées pour ne pas se chevaucher.
  3. Pilotez la bande d’ordre des tours par l’indice plutôt que par la couleur ; le point actif est dessiné plus grand, et c’est ce qui le rend dénombrable de loin.
  4. La carte de membre et la case d’effectif partagent leur hauteur avec le kit de panneaux de cette famille : un écran de groupe se monte avec les deux sans rien redimensionner.

Licence

Creative Commons Attribution 4.0 — Gratuit pour un usage commercial. Attribution obligatoire. Conditions complètes · Ce que cela veut dire en pratique

Ligne de crédit à copier
"Paper Interface de groupe" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-party-ui