Sumi Kit de panneaux — panneaux à cadre double et boutons

Le cel shading inversé : encre pâle sur un lavis sombre plutôt qu'encre sombre sur papier. Le terminateur à bord dur a la même forme dans les deux familles et il le faut — une retombée douce est la seule chose que le cel shading ne peut pas se permettre — mais un contour pâle sur du noir a besoin de plus de poids qu'un contour sombre sur du blanc, et le second cadre concentrique donne au panneau un endroit où le mettre.

Deux panneaux nine-slice — un cadre de fenêtre à cadre double avec des coins de 14 px et un cadre intérieur en creux avec des coins de 12 px — couvrent presque toutes les boîtes dont un menu a besoin : dialogues, grilles d'inventaire, fonds de liste, infobulles et panneaux de statistiques. Deux bordures concentriques séparées par un intervalle se lisent comme sculptées et non comme tracées, et c'est ce qui sépare une interface travaillée d'un rectangle avec un trait. 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 onglet : normal, survol, enfoncé et désactivé. Ils sont dessinés sur la même base de 120×48 avec des coins de 8 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 lavis de fusain ou l'unique accent rouge de sceau, et réexportez. Les exports PNG sont plats, 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 Attribution 4.0 — Gratuit pour un usage commercial. Attribution obligatoire. Conditions complètes · Ce que cela veut dire en pratique