Cocoricones
Toutes les icônes
Recherche par mots clés...
Soutenir Cocoricones
Ce site vous a été utile ou agréable ? Vous voulez qu'il continue à exister à s'enrichir et à évoluer ? Quelques euros suffisent.Dernières nouvelles
Leopard a frappé… icônes de 512 px ! (22.12.07)
Le nouveau système baptisé par Apple “Leopard” (Mac OS 10.5, sorti en 2007), supporte des icônes jusqu’à 512 pixels de côt(...) Lire la suite...Forum customisation sur Mac Gé. ( 7.11.05)
Un forum Customisation (sous forum de Mac OS X) a été créé sur MacGénération, vous y trouverez toutes les réponses à vos questions sur, e(...) Lire la suite...Retour des tutoriels (13.10.05)
Il y avait quelques tutoriels improvisés dans le forum de la précédente version de Cocoricones. Comme promis les tutoriels reviennent avec un (...) Lire la suite...Problème icônes sans icônes ? (27.09.05)
Un visiteur de Cocoricones nous a fait part d’un problème : “J’ai un petit problème, en fait quand j’ouvre le fichier d’ic(...) Lire la suite...Icône d'après photo avec Illustrator
Nous allons voir comment une icône stylisée et son masque de transparence ont été créés, à partir d’une photo, dans un logiciel vectoriel comme Illustrator. Le format vectoriel a plusieurs avantages : la précision, la clareté, l’indépendance par rapport à la résolution…
Je précise que c’est une méthode de travail que j’utilise peu. La plupart de mes icônes sont réalisés directement dans Photoshop, en 128 pixels.
Le tutoriel suivant considère que le lecteur maîtrise l’utilisation des outils de tracé vectoriel d’Illustrator.
Ci-dessous: la photo originale (réduite) et l’icône finale
Auteur du tutoriel
Niconemo
Logiciels utilisés
- Adobe Illustrator (dessin de l’icône)
- Adobe Photoshop (rasterisation et retouches)
- Iconographer (génération de l’icône)
On décalque !
Le principe de base est simple : on met la photo originale sur un calque qu’on verrouille (la dimension et la résolution du document Illustrator importe peu puisqu’on travaille en vectoriel). On place au dessus des calques sur lesquels on trace les éléments à la plume ou tout autre outil de tracé. Ne pas hésiter à multiplier les calques pour se faciliter la vie.
La première voile est tracée à la plume :
Mise en couleur des voiles, pas de problème ! Ici, un simple dégradé linéaire suffit ! (l’image de fond est rendue à moitié transparente pour bien faire ressortir nos tracés).
Un ombrage un peu plus complexe !
Pour la coque du bateau par contre c’est un peu plus compliqué. Comme il y a des motifs colorés (arc en ciel, nom du bateau) et une ombre plus sofistiquée, j’ai décidé de décomposer tout ça : un calque pour les ombres, un autre pour les motifs.
Je commence par le calque des motifs, comme pour les voiles, l’essentiel est du décalcage (ce qui n’empèche pas de styliser des formes au passage, au contraire).
Quand la coque (sans ombres) est terminée, on duplique son calque et on fusionne ses éléments avec l’outil pathfinder pour n’en garder que le contour global.
En se basant toujours sur la photo comme modèle on crée les ombres de la coque en niveaux de gris avec l’outil filet de dégradé cette fois (on peut dupliquer la photo de fond pour en avoir un exemplaire visible en permanence à côté de son travail en cours).
Il ne reste qu’à placer le calque de l’ombre au dessus du calque de la coque et à appliquer une transparence d’environ 70% en mode produit. Et voilà :
Pour le reste du tracé je passe les étapes : pas de nouvelles difficultés.
On peut à présent se débarrasser de l’image de fond :
Créer l’image cadrée de l’icône et son masque
Toujurs dans Illustrator : enregitrer-sous le document au format EPS et placer un carré dans un calque sous tous les autres. Ce carré matérialise le cadrage de l’icône et sert de fond opaque.
En général on fait le fond noir pour permettre des effets d’ombre protée avec le masque… C’est ce que j’ai fait ici par réflexe mais ici il aurait pu être, bleu, vert, ou même un dégradé du bleu au vert (pour éviter le risque de frange noire le long de la coque et des voiles du bateau une fois le masque appliqué).
De nouveau on enregistre-sous pour créer un nouveau document EPS pour le masque. Là c’est simple on passe tout ce qui doit être opaque en noir (la coque, les voiles) tout ce qui doit être semi-transparent en gris (les cordages) et tout ce qui doit être invisible en blanc (le carré de fond).
Rasterisation dans Photoshop
Il ne reste plus qu’à créer un document de 128px par 128px en 72 points par pouces dans Photoshop. Et à y importer nos deux documents EPS, chacun sur un calque.
Astuce : pour prévisualiser le rendu final de l’icône sur fond blanc dans Photoshop, on peut mettre le calque du masque au dessus de l’autre en mode superposition.
On peut, dans Photoshop, réaliser les dernières retouches. L’écume le long de la coque a été réalisée à ce moment. Le bleu des voiles a été étendu sur le noir là où il y avait une légère frange visible.
En étendant le système on peut aussi séparer les éléments vectoriels sur de nombreux calques photoshop et faire tout le travail de colorisation, ombrage texture dans Photoshop. La boite à lettre jaune et la borne N7, par exemple ont été grossièrement tracées dans illustrator (d’après croquis) mais entièrement finalisées dans Photoshop.
Générer l’icône
Passer à Iconographer (se reporter au mode d’emploi de ce logiciel) et enregitrer l’icône.
Commentaires :
chloé 13.01.07 #
bonjour,
est ce que vous pourriez m’ expliquer comment obtenir une image n&b avec des contours noirs autour de chaque zone de couleur différente, en partant d’ une photo ?
pour obtenir une sorte peinture par numéros pas encore peinte ( genre “numéro d’ art” ) ?
merci de me répondre les4dep@wanadoo.fr ce serait vraiment gentil
chloé
Pierre 7.06.07 #
Petit ajout d’ordre pratique :
Pour insérer l’image dans illustrator, choisir “importer” et cocher “modèle” dans la boite de dialogue qui s’affiche.
L’image sera directement placée sur un calque verrouillé et à 50% d’opacité (valeur par défaut pouvant être modifiée).
alise 26.11.07 #
pouvez vous me dire ou je peux trouver un mode d’emploi complet et gratuit de adobe illustrator merci