Le Web 2.0 est un terme utilisé pour désigner la réelle évolution vers la simplicité et l'interactivité d’Internet. Le Web 2.0 peut être résumé par l’ensemble des techniques (design dynamique, interfaces enrichies…) et de la communication (partage et diffusion d’information…). Dans l’ensemble des techniques du Web 2.0, il y a l’interface graphique qui utilise de nombreux effets d’ombres, de lumières, de reflets et de jeux de couleurs pour donner une identité graphique à un projet, à une marque ou à une entreprise. C'est la raison pour laquelle nous vous présenterons dans ce tutoriel l'amélioration d'une simple icône en ajoutant des effets pour lui donner un style Web 2.0.
-Tout d'abord nous nous occuperons de la partie grise qui se trouve sur le bord de l'icône. En commençant par lui appliquer un effet métallisé et un effet de reflet pour lui donner un coup d'éclat.
1. Tracez un cercle pour détourer l'icône. Appliquez-lui un Dégradé de couleurs de type "Linéaire" avec 2 nuancées de gris #BFBFBF en bas et #404040 en haut.
| 2. Dupliquez ce cercle et placez-le pour que le centre soit sur le bord comme illustré. |  |
| 3. Sélectionnez les 2 cercles et utilisez l'Outil Pathfinder "Division" pour séparer les formes en 3. Effacez la partie du bas. |
4. Tracez un nouveau cercle qui servira de contour pour le cercle bleu, il sera du même dégradé que les cercles précédents.
| 5. Dupliquez le nouveau cercle et changez sa couleur par un niveau de gris de 10%. Placez-le pour que le centre soit sur le bord comme illustré. |  |
| 6. Sélectionnez les 2 cercles et utilisez l'Outil Pathfinder "Division" pour séparer les formes en 3. Effacez la partie du bas. |
- Voici le rendu pour l'instant:
- Maintenant nous allons reproduire les mêmes effets sur la partie intérieure de l'icône pour produire un reflet de saphir.
| 7. Détourez le cercle bleu avec l'Outil Ellipse (L). Appliquez-lui un Dégradé de couleurs de type "Linéaire" avec 2 nuancées de bleu #29529C en haut et #009EE0 en bas. Rajoutez un contour bleu #29529C d'épaisseur de 7pt. |  |
| 8. Détourez à nouveau l'icône entière avec l'Outil Ellipse (L) et attribuez-lui les mêmes caractéristiques de couleurs à l'aide de l'Outil Pipette (I). |  |
| 9. Placez le nouveau cercle pour que le centre soit sur le bord de l'icône comme illustré. Sélectionnez les 2 cercles bleus et utilisez l'Outil Pathfinder "Division" pour séparer les formes en 3. Effacez la partie du bas. |
10. Ajoutez une ellipse blanche de forme ovale dans la partie supérieure bleue de l'icône. Dupliquez-la par dessus et attribuez-lui un Dégradé de couleurs noir et blanc de type "Linéaire". Sélectionnez les 2 ellipses et créez un masque d'opacité. Baissez l'opacité à 75%.
| 11. Vectorisez le "2" à l'aide de l'Outil Plume (P) ou utilisez l'Outil Texte (T) avec comme police "Arial Bold". Dupliquez celui-ci par dessus et appliquez la couleur blanche pour le "2" du dessus et bleu #29529C pour celui du dessous. |  |
| 12. Sélectionnez le "2" en arrière-plan et décalez-le dans le menu "Objet >Transformation > Déplacement" (Maj+Ctrl+M) de -7px à l'horizontale et de -7px à la verticale. |
13. Ciblez le bord gris de l'icône. Appliquez-lui l'effet 3D dans le menu "Effet > 3D > Extrusion et biseautage" avec les options suivantes.
14. Ciblez les autres parties de l'icône. Appliquez-leur l'effet de rotation 3D dans le menu "Effet > 3D > Rotation" avec les options suivantes.
(Après cette étape, certains sous-calques peuvent être décalés à cause de l'Option de rotation 3D.)
- Et pour finir, appliquer une ombre portée permet de rajouter un relief de plus à l'icône et de le faire ressortir du fond.
15. Tracez une forme ovale de couleur noire avec l'Outil Ellipse (L) sous l'icône. Appliquez-lui un effet de Flou gaussien de rayon 25px et baissez son opacité à 10%.
(Astuce: Vous pouvez ensuite changer la couleur de l'icône avec le réglage de "Teinte/Saturation" en l'important sous Photoshop )
Autres tutoriels:
 |  |  |  |
"Amélioration d'une icône en style WEB 2.0 sous ILLUSTRATOR" rédigé par Nicolas Leonard
Tous droits réservés vectoriser.com 2006/2011
