Ductile blog

Le fichier Adobe Illustrator

Celui-ci se nomme stickers.ai et se trouve en pièce jointe de ce billet. Il possède trois groupes de calques :

• Un groupe de calques nommé Document contenant uniquement les repères extérieurs de l’image et son centre vertical (les noms de ces calques débutent tous par un tiret (-) ;
• un groupe de calques nommé Fond contenant quelques repères et les fonds de stickers que je propose :
  • En forme de flèche, pointe vers le bas ;
  • Coupé vers la gauche ;
  • Coupé vers la droite ;
  • En forme de drapeau, pointe vers le haut ;
  • Rectangulaire ;
  • Arrondi, vers le bas ;
  • Arrondi, vers le haut ;
• et enfin un groupe de calques nommé Caractère contenant le repère de la baseline et quelques caractères et symboles :
  • Symbole de flux RSS ;
  • Le @ pour le courrier électronique ;
  • Une enveloppe ;
  • Une pomme (c’est mon côté Mac-addict qui ressort) ;
  • Un point d’interrogation ;
  • Un i entouré.

Il suffit alors d’afficher un fond et un symbole puis d’exporter pour le web l’image correspondante en prenant soin de préserver la transparence. Le format PNG 24 est tout indiqué pour ça.

Je mets ici les fonds inclus sans aucun symbole dessus, ça peut éventuellement dépanner quelqu’un qui ne posséderait pas Adobe Illustrator. Il lui suffirait alors de télécharger l’image choisie, d’y coller dessus le caractère ou le symbole qui lui plaît et d’exporter son image toujours au format PNG en préservant la transparence :

J’ajoute également le fichier stickers.svg qui sera peut-être plus facile à utiliser pour ceux qui ne possèdent pas Adobe Illustrator.

Structure d’un sticker

Pour ceux qui souhaiteraient composer eux-même leur sticker, je vais détailler ici les différents éléments utiles à connaître.

Tout d’abord les dimensions :

Détaillons ensemble si tu veux bien :

• Tout d’abord les dimensions hors-tout de l’image, indiquée par la flèche violette sur le graphique ci-dessus : 44 pixels de large pour 58 pixels de haut.
• Ensuite les dimensions du fond du sticker, indiqué par la flèche orange : 38 pixels par 54 pixels.
• Le fond est décalé de 2 pixels vers la droite et vu ses dimensions il reste une marge à droite et en bas de 4 pixels (les marges sont repérées avec des flèches roses).
• La forme basse du sticker débute à 40 pixels du haut et fait donc 18 pixels de haut. C’est ici qu’on différencie les différents fonds.
• Le caractère ou le symbole fait 20 pixels de large sur 20 pixels de haut, son centre se trouve à 21 pixels du bord gauche de l’image (soit 19 pixels du bord gauche du fond), et la baseline est à 30 pixels du haut.

Voyons maintenant les valeurs utilisée pour l’ombre portée sous le fond du sticker :

• Origine décalée de 2 pixels vers la droite et 2 pixels vers le bas (ce qui donne un soleil en haut à gauche) ;
• Atténuation de 2 pixels ;
• L’opacité est fixée à 50% ;
• La couleur de l’ombre est #999996, soit un gris assez clair.

Pour terminer précisons que la couleur du fond du sticker est #646564 et que la couleur du caractère ou symbole affiché dessus est tout simplement du blanc.

Voilà je pense avoir fait le tour de ce qu’il faut savoir au sujet de ces images utilisées par le thème Ductile. N’hésite-pas cependant à reprendre ce billet si cela s’avérait utile pour une meilleure compréhension ou si jamais j’avais omis quelque chose ou commis une erreur.