Suppression de l`anti-aliasing pour la création de skins dans Fritivi

Suppression de l'anti-aliasing
pour la création de skins dans Fritivi
Tutoriel par xzu
Comme promis, voici un tutoriel applicable à tous (ou presque) logiciels de création graphique.
Le minimum requis étant un soft qui gère les calques.
Présentation
Pour commencer, voici le modèle que nous allons détailler :
Les formes arrondies sont comme d'habitude l'ennemi d'une découpe "propre" sur fond fushia. Pour
obtenir un bel arrondi bien lisse, le logiciel de création graphique atténue les transitions et de fait,
altère le fuschia.
le résultat attendu a beau être "sympa", nous ne pourrons
pas envoyer ce skin à Fritivi.
La seule solution consiste à créer un visuel bitmap, pas très chouette...
On peut aussi créer l'interface en découpant "à la main" en mode bitmap, le contour des formes que
l'on créé.
Le gros problème de cette manipulation est qu'elle allourdi la création de skins puisqu'on doit tout
répéter pour chaque état (survol, inactif, enfoncé). Du coup on aurait tendance à simplifier et à aller
vers des formes carrées...
Dommage...
les courbes c'est tellement plus sexy
Solution
Je vous propose d'appliquer le principe du pochoir.
On va créer un "calque pochoir" en dessous duquel on va pouvoir travailler notre interface.
L'avantage immédiat est de permettre l'application de ce pochoir à tous les états de la skin, sans
avoir besoin de contrôler le fushia sur les bords.
Fin du suspense avec ce schéma :
•Le pochoir c'est notre calque de fushia, et il est au dessus de tout le monde et reste quelque soit
l'état de l'interface (survol, enfoncé, inactif)
•En dessous on trouve notre calque "visible", c'est à dire celui qui représente le meilleur aspect de
notre interface : antialiasé. Il sera remplacé par les autres états (survol, enfoncé, inactif)
•En dessous du tout, il y a le même calque sans antialiasing (bitmap pur). Celui-là pourra rester tout
au long de la création de l'interface et de ses états.
Application du pochoir
les visuels sont montrés à deux fois l'échelle, mais le principe reste le même pour un visuel de la
taille normal (cf image de fin)
On part de notre forme de base que l'on dépose sous sa forme bitmap pure (pas belle donc)
-> sélectionner le contour exact de cette forme
-> tout en gardant quelque part cette sélection active, créer un calque fuschia au dessus de la forme
bitmap
et supprimez la zone correspondante à la sélection précédente
On doit avoir un calque fushia (notre pochoir) qui laisse apparaître au pixel près la forme
bitmap restée en dessous
Vous devinez la suite...
-> insérer le calque anti-aliasé (le "beau" donc), sous le pochoir et au dessus du calque bitmap, et
faites le apparaître
Le résultat est immédiat :
Nous avons bien une forme qui respecte le fuschia à la valeur près, et en même temps une découpe
nette, sans pour autant perdre de l'aspect anti-aliasé de l'interface.
Mais dans certains cas, le passage d'une forme en bitmap a créé un petit paté tout moche. Cela est
dû à la couleur du bord qui est tranchée et que le logiciel coupe car le passage au bitmap simplifie
les formes :
Pas de problème, on va intervenir ponctuellement, et notre modèle sera quand même utilisable pour
les autres états de la skin.
-> créer une sélection qui définisse la zone que le logiciel a "perdu" lors du passage au bitmap
-> se placer sur le calque du pochoir et effacer la sélection ainsi définie, en prenant soin d'avoir
enlevé le lissage de cette sélection
la découpe doit être nette.
-> toujours avec cette sélection active, créer un calque en dessous de tous les autres et le remplir
avec la couleur du contour de l'interface.
• Dans certains cas, il est préférable de ne pas remplir avec une couleur, mais simplement de
dupliquer le calque de l'interface "antialiasé" et de le placer en dessous de tous les autres, pour
obtenir un résultat plus détaillé que cette forme de couleur. Du coup, on peut parler d'un genre de
"fond perdu" puisque l'image va remplir la partie manquante et déborder au delà du pochoir. Sauf
que par définition le pochoir est là pour occulter de façon nette tout ce qui déborde.
Dans ces deux cas "couleur unie" ou "duplication du calque antialiasé", c'est l'oeil qui choisi.
• Cette opération n'est à effectuer qu'une seule fois. Vous verrez que même en remplaçant le calque
d'un état par celui d'un autre (antialiasé), le fond perdu sera toujours raccord.
En fait votre création de calques est libre entre le pochoir et ce fond perdu.
Résultat
une fois appliqué à l'ensemble de l'interface, le pochoir découpé selon la forme bitmap constitue un
vrai "masque" qui contiendra tout débordement de couleur. Comme rien aucun calque ne viendra au
dessus de ce pochoir, il ne sera pas nécessaire de contrôler le contour fushia. Tout au plus faudra-t-il
rectifier le tir avec de la couleur à remettre avec le fond perdu.
Résultat à l'échelle réelle de l'interface
La netteté des contours est acceptable pour l'oeil car elle est régulière. On conserve bien l'aspect
antialiasé à l'intérieur de la forme.
Voilà, c'est long mais en fait assez simple quand on a compris la mécanique. Il y aura forcément des
ajustements manuels à faire, mais la technique à l'avantage d'être souple et sans risque pour les
incrustation dans Fritivi.