Dans : News Membres Forums Galeries Ressources Tutoriaux Concours


Recherche avancée

Créer une icône web

Bonjour à toutes et à tous !
Dans ce tutorial je vais vous apprendre à créer une icône web comme celle utilisée pour les news : .

C'est partit !

Préparation

Commençons pour préparer notre espace de travail

Créez un nouveau document de 20/20px. Définissez ensuite la couleur de premier plan : #0173a3 et de second plan : #03c3da.

Création du fond

Maintenant nous allons créer le fond, c'est à dire notre planète Terre . Contrairement à ce que l'on peux voir dans certains tutoriaux nous n'allons pas utiliser de filtres, nous allons juste utiliser la plume.

Prenez l'outil et tracez un cercle dans le document. Ne le faîtes pas trop près du bord .





Une fois le cercle tracé nous allons créer les continents. Prenez l'outil et définissez sa couleur avec celle du second plan.



Et enfin tracez vos continents . Ne vous inquiétez pas si ils dépassent du fond nous réglerons ça tout à l'heure. Et ne vous inquiétez pas non plus si ils n'ont pas exactement la forme que vous voulez, à cette taille là ça ne change pas grand chose .



Pour finaliser le fond nous allons supprimer ce qui dépasse du fond. Et pour donner un petit effet nous allons couper 1 pixel à l'intérieur du fond .

Tout d'abord nous allons pixeliser les calques des continents. Sélectionnez ces calques (CTRL enfoncé et clic sur tous les calques des continents) et faîtes CTRL + E.
Maintenant récupérez la sélection du calque du fond :



Nous allons maintenant contracter la sélection de 1 pixel pour donner un petit effet en plus : Sélection > Modifier > Contracter et entrez 1 en valeur.
Faîtes ensuite Sélection > Intervertir et Supp.




Voilà notre fond est terminé !
Il nous reste juste à faire l'effet crystalisé .

Crystalisation

Je donc vais maintenant vous montrer ma technique de crystalisation .

Pour commencer nous allons faire un petit contour blanc à notre icône. Tout d'abord créez un nouveau calque et reprenez la sélection du fond :



Refaites ensuite Sélection > Modifier > Contracter et mettez de nouveau 1 comme valeur.

Puis Edition > Contour et configurez le comme ci-dessous.



Vous obtenez normalement :



Réglez maintenant l'opacité du calque du contour à 50%. Ne désélectionnez pas ! Si vous l'avez fait par erreur refaites les opérations pour avoir la sélection (on l'a fait 2 fois vous devriez normalement vous en souvenir ).



Nous allons maintenant finaliser l'effet avec un reflet. Créez un nouveau calque. Faîtes Sélection > Modifier > Contracter et mettez de nouveau 1 comme valeur. Prenez l'outil et configurez le comme ci-dessous.



Faîtes ensuite un dégradé du haut de la sélection jusqu'aux 3/4.





Puis prenez l'outil et sélectionnez le dégradé à sa moitié comme ci-dessous.



Et pour finir faîtes Supp, désélectionnez et baisez l'opacité du calque à 50%.

Si vous avez bien suivi vous devriez obtenir ce résultat :



Et voilà ! Votre icône web est terminée et je vous ai par la même occasion appris à crystaliser .

Résultat final

Si vous avez des questions n'hésitez pas à les poser sur les forums et postez vos créstions en commentaire !

2 commentaires

myGot	> Posté le : 04/07/2007 à 18h44 | Note :
Groupe : Membres	Bon tuto, effet interessant. Mes Tutoriaux : Effet Néon | Effet 3D TREVISAN brice
Alex-Milk	> Posté le : 09/08/2007 à 10h32 | Note :
Groupe : Membres	Très bon tutos ! je vais l'utiliser pour créer des smiley  Je cherche un Codeur PHP pour mon projet de création d'un jeu en ligne ! MP moi svp