Dot-Design - Tutoriels, Créations & Galerie CSS

Je vous propose aujourd'hui un tutoriel pour vous aider à créer un petit icône tout simple mais très beau !
Tout d'abord, je tiens à vous dire que l'idée de faire ce tuto m'est venue en voyant - ce pack - d'icône que j'ai trouvé de très bonne qualité !
Ce tuto est un des premiers que je fais donc n'hésitez pas à me demander si il y a quelque chose que vous ne comprenez pas :-)

Ici je ferais un icône avec le logo RSS, mais vous pouvez bien entendu faire ceci avec n'importe quel logo.

Les images du tutoriel sont à 300% de leur taille réelle pour une meilleure visibilité.

Tout d'abord créez un nouveau document de 200x200.

Sélectionnez l'outil ellipse et créez une ellipse de 45px de diamètre.

Pour cela, cliquez sur l'onglet Information, en haut à gauche. Restez appuyé sur la touche MAJ (pour avoir la même hauteur et la même largeur), et dessinez votre cercle tout en regardant dans les informations que L et H soient bien à 45.

Ne vous souciez pas de la couleur, nous allons voir ça juste après !

Nous allons maintenant voir les options de fusion de ce calque.
Cliquez sur Ajouter un style de calque puis Incrustation de couleur de la couleur #fe8208.

Allez maintenant dans Contour et remplissez comme cela :
Taille de 1px, et comme couleur #b97512.

Jusqu'à la rien de très compliqué :-)

Nous allons créer le reflet supérieur gauche de l'icône.

Créez un nouveau calque , ensuite restez appuyé sur CTRL et cliquez sur le calque précédemment créer afin de récupérer la sélection (voir image).
Puis Edition > Remplir > Couleur... et tapez #ffffff (blanc).

Vous vous retrouvez avec le même rond, mais rempli de blanc.
Vous avez encore la sélection active (sinon récupérez la avec CTRL + Clic gauche sur le calque)

Vérifiez bien que vous êtes avec l'outil sélection et avec les flèches de votre clavier, descendez d'1 pixel vers le bas et d'1 pixel vers la droite puis supprimez avec la touche Suppr.

Passez le calque en mode Incrustation et baissez son opacité à 70%.

Vous devriez en être au même stade que l'image de gauche.

Maintenant, il faut ajouter l'ombre qui part d'en bas à droite à en haut à gauche.

Choisissez comme couleur du premier plan #e06f00.

Maintenant sélectionnez l'outil dégradé puis en haut, cliquez sur le dégradé comme sur cette image :

Une nouvelle fenêtre s'ouvre, cliquez sur le deuxième carré en partant de la droite : Premier plan - Transparent, comme sur cette image :

Créez un nouveau calque puis comme dans l'étape précédente, il va falloir sélectionner le rond initial, c'est donc CTRL + Clic gauche sur le premier calque (le calque où nous avons rempli les options de fusions) que vous allez devoir faire.

Ensuite faites : Sélection > Modifier > Contracter avec une valeur de 1 pixel.

Vous êtes donc sur un nouveau calque avec la sélection du rond contractée de 1 pixel et vous avez l'outil dégradé avec Premier plan - Transparent.

Faites maintenant un dégradé du bas vers le haut comme sur l'image en haut à gauche !
Si tout c'est bien passez, vous devriez avoir le résultat de l'image juste en dessous !

L'icône commence à prendre forme, il est déjà pas mal mais nous allons l'améliorer davantage.

Une nouvelle fois sélectionnez l'outil ellipse et en couleur de premier plan du blanc (#ffffff).

Faites un ovale comme sur l'image ci-contre, puis clic droit sur ce nouveau calque, Pixelliser le calque.

Encore une fois nous allons récupérer la sélection du rond (CTRL + Clic gauche sur le premier calque). Puis Sélection > Intervertir et appuyer sur Suppr pour n'avoir que la partie en rapport avec le rond.
Réglez maintenant l'opacité du calque à 15% et vous devriez avoir quelque chose de semblable à l'image de gauche.

La base de notre icône est maintenant entièrement finie !

Il ne vous reste plus qu'à ajouter le logo de votre choix dessus.
Dans cet exemple j'ai choisi le logo très connu du flux RSS.

Je l'ai donc trouvé sur image Google, détouré etc... Et insérer sur mon icône vide, j'ai ajouté un Ombre portée d'Opacité 20%, Distance 1px, Grossi 0%, Taille 1px.

Mais après tout, c'est vous qui voyez !