Sketch Kit de panneaux — panneaux à cadre double et boutons

Chaque bord de ce kit est légèrement faux, exprès. Le contour est échantillonné sur toute sa longueur et chaque point est décalé, si bien qu'aucune ligne n'est vraiment droite et qu'aucun coin ne se plie comme un autre — ce qu'un rectangle tracé à la règle ne peut jamais faire. L'ombrage est en hachures croisées plutôt qu'en dégradé, et c'est ce qui le garde lisible comme du dessin et non comme un rectangle arrondi avec un filtre par-dessus.

Deux panneaux nine-slice — un cadre de fenêtre à cadre double avec des coins de 18 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 reposent douze sprites de bouton carrés : normal, survol, enfoncé et grisé, chacun dessiné trois fois — une barre standard de 132×46, un bouton d’icône carrés carré et un bouton compact pour les barres d’outils et les actions en ligne. Les trois tailles sont des fichiers distincts et non un sprite mis à l’échelle, car le dessin dépend de la taille : le chanfrein calculé à 46 px est recalculé sur les plus petits, pas rétréci. L’état enfoncé abaisse sa face de deux pixels et retire le reflet supérieur au lieu de simplement s’assombrir — c’est ce qui fait qu’un bouton semble cliqué et non simplement recoloré.

Quatre pièces plus petites couvrent ce dont un menu a besoin entre les panneaux : une infobulle à pointe, une barre de titre qui se pose le long du haut d’un panneau, un séparateur de section avec une marque centrale, et une puce d’étiquette pour les compteurs et les statuts. Aucune n’est le panneau de fenêtre à une autre taille — un nine-slice s’étire déjà à toute dimension, donc un second fichier d’une autre largeur serait du remplissage et non un composant.

Tout est livré deux fois. Les sources SVG sont les fichiers dans lesquels le kit a été dessiné — ouvrez-les, changez les six tons papier blanc cassé ou l'unique accent bleu encre, 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