Mint Kit de panneaux — panneaux à barre de titre et boutons

Design plat avec le rayon rentré presque entièrement. La famille plat claire utilise des coins de 20px et des boutons pilule parce qu'elle vise le jeu casual ; celle-ci utilise 8px et des boutons carrés parce qu'un écran de stratégie n'est presque que des lignes et qu'un rayon généreux gaspille précisément la largeur où vont les nombres. Il n'y a de contour ni d'ombrage nulle part — la profondeur, ce sont trois passes d'ombre empilées et rien d'autre.

Deux panneaux nine-slice — un cadre de fenêtre à barre de titre avec des coins de 8 px et un cadre intérieur en creux avec des coins de 6 px — couvrent presque toutes les boîtes dont un menu a besoin : dialogues, grilles d'inventaire, fonds de liste, infobulles et panneaux de statistiques. Un bandeau de titre est intégré au haut du panneau : l'en-tête d'un dialogue n'a besoin ni d'un second sprite ni d'un alignement manuel. Les deux s'étirent proprement à n'importe quelle taille parce que les coins ne changent jamais d'échelle et que le centre est un remplissage plat.

Sur les panneaux se posent quatre états de bouton à coins droits : normal, survol, enfoncé et désactivé. Ils sont dessinés sur la même base de 120×36 avec des coins de 6 px : vous échangez la texture sur un seul widget de bouton et vous obtenez toute la boucle d'interaction sans déplacer un rectangle. L'état enfoncé descend sa face de deux pixels et retire le reflet du haut au lieu de simplement s'assombrir, et c'est ce qui donne à un bouton la sensation d'être cliqué plutôt que simplement recoloré.

Tout est livré deux fois. Les sources SVG sont les fichiers dans lesquels le kit a été dessiné — ouvrez-les, changez les six tons gris bleuté ou l'unique accent vert menthe, et réexportez. Les exports PNG sont plat, transparents et pré-mis à l'échelle en 1x, 2x et 4x pour les moteurs qui veulent des bitmaps, sans alpha prémultiplié et sans ombre cuite hors des limites du sprite.

Creative Commons Zero 1.0 — Domaine public. Aucune attribution. Conditions complètes · Ce que cela veut dire en pratique