Aller au contenu

[Résolu] Créer des visuels en "pochoirs"


Wanbli

Sujets conseillés

Bonjour !

Here's the deal :

Dans le but d'appliquer des visuels communs pour des sites aux codes couleurs différents, nous avons eu (l'excellente ! :P ) idée de créer des gifs en "pochoirs", c'est à dire que la partie visible est gérée en transparence, et apparaît de la couleur du fond sur lequel le gif est appliqué ...

Heu .... vous suivez ??

J'illustre : sur un tableau a fond blanc, je créée un <TD> de fond noir dans lequel j'applique mon gif transparent : le contour du gif est blanc, et mon image (une puce en forme de triangle par exemple) est transparente : ainsi j'obtiendrai un triantgle noir ...

Ainsi, pour les sites dont la couleur dominante sera bleue, je crée mon <TD> bleu, j'applique le même gif et ô miracle ... mon triangle sera bleu.

L'astuce est donc, pour tous mes sites, d'utiliser le mm gif.

Le souci c'est que pour l'instant ... le résultat n'est pas à la hauteur. Jusqu'à présent j'ai créé mon triangle "inversé" sur Photoshop, et optimisé en gif. Jusque là, tout parait nickel, mon triangle semble parfait, symétrique et tout.

Et "horreur !" lorsque j'édite mon résultat sur IE ... l'une des pointes de mon triangle est immanquablement "rogné" d'un pixel, ce qui fait que mon triangle n'est pas pointu, alors que sur photoshop, au pixel près c'est nickel ...

POURQUOI ?

Je me suis dit qu'il devait y avoir un petit décalage, mais meme en ajustant ... le triangle est ... disons ... merdique.

Donc question : aurais-je une chance d'obtenir un visuel parfait via Illustrator ? En fait j'en doute puisqu'il faudra bien que je pixellise le résultat pour obtenir un gif ... et ...

Question subsidiaire : j'ai l'impression qu'Illustrator ne gère absolument pas la transparence ...

:(

Purée ... les idées de génie sur le papier se revèlent être des solutions à se taper là tete contre l'écran ...

Allez ...

Je retourne pleurer ...

:whistling:

Modifié par Wanbli
Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Navré, cela est un "problème" très classique et très simple (et en même temps compliqué) à résoudre : antialiasing.

En effet, le gif gère la transparence en binaire : Oui ou Non, mais pas 30% de transparence.

Du coup, le fameux "antialiasing" qui permet de rendre les lignes droites créer des pixels avec un taux de transaprence de 0 à 100%

En gros, les pixels à plus de 50% passent à 100% en gif et ceux en dessous de 50% deviennent totalement transparent (vous me suivez là ?)

Reste plus qu'à faire une rectification à la main...

Illustrator fait dans le vectoriel et un gif est un bitmap. Donc, Illustrator n'est pas fait pour. Par contre, il est possible de faire l'image sous Illustrator puis, de l'importer.

Bon courage (ou fait appel à un graphiste du coin ?!)

Lien vers le commentaire
Partager sur d’autres sites

Heum heu ....

Quitte à passer pour une grosse truffe (que je suis !!!) aux yeux des webmasters qui fréquentent le forum ...

J'ai trouvé l'explication (donc finalement je suis 1/2 truffe non ?)

Mon triangle "pochoir" en gif était bien nickel jusqu'au bout des angles ...

La raison qui faisait que l'un des angles semblait être rogné, c'est parce que la hauteur du <TD> dans lequel il se trouvait faisait 1 px de plus que sa propre hauteur ... en raison du texte du <TD> précédent qui forçait la hauteur spécifiée.

Résolution : adapter la taille de mon gif pochoir à 100 % du <TD> auquel il est destiné (hauteur et largeur). Mon triangle sera peut-être un peu moins isocèle à 1 px près, mais au moins mes angles sont nickel ...

Verdict ...

1. Je ne suis qu'une 1/2 grosse truffe (et j'y tiens !)

2. Les pochoirs d' 1 .gif utile pour divers sites aux couleurs différentes ... ça a l'air de marcher du feu de Dieu !! (et ça c'est une bonne nouvelle !!! :yoot: )

Allez j'y retourne !

Lien vers le commentaire
Partager sur d’autres sites

Merci WebMachin !

En fait je te confirme que ce n'était pas un pb d'aliasing, car j'avais fait le nécessaire pour ne pas l'activer et heureusement pour ça, tout fonctionnait nickel.

Pas besoin d'aliasing car je vais utiliser cette méthode de pochoir pour des formes simples, j'utilise donc des calques à 100 % avec contours très marqués.

Jusque là, pas de pb dans ce domaine.

Merci pour l'info !

:)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...