Tutoriel photoshop : Créer une icone de média sociaux (facebook, twitter...) Tutoriaux photoshop > Webdesign > Tutoriel photoshop : Créer une icone de média sociaux (facebook, twitter...)

Aujourd'hui nous allons voir comment créer facilement des icones de média sociaux ou autre, à intégrer sur un site internet.
En fait on va essayer de créer une sorte de base pour que l'on ait le moins de chose à refaire et que le style se duplique facilement.
Donc pour commencer je pars sur un fond noir et on va essayer de créer l'icone netvibes. (Vous verrez après que pour les icones facebook ou twitter... ça ira tout seul)
On prend l'outil rectangle angle arrondi avec un rayon de 10px (dans la barre d'option de l'outil) et une couleur verte


On applique une lueur interne. Menu calque -> style de calque -> lueur interne


Voilà ce que ça donne


Maintenant on va faire un reflet. Prend l'outil ellipse couleur blanc et on en dessine une par dessus.


Dans la fenêtre calque tout en appuyant sur la touche ALT, allez entre le calque de l'ellipse et la forme du bouton cliquez pour créer un écrétage de cette manière.
Sinon sélectionnez les calques dans la fenêtre calques et aller dans le menu calque et cliquez sur créer un masque d'écrêtage. (raccourci CTRL+ALT+G)




On baisse à présent l'opacité de l'ellipse à 40%


Et on passe le calque en mode incrustation à la place de normal.


A présent dans la fenêtre calque, tout en appuyant sur la touche CTRL cliquez sur la vignette du calque du fond du bouton pour sélectionner son contour.


Prenez l'outil dégradé et choisissez un dégradé de noir vers transparent et effectuez un dégradé de bas en haut. (Appuyez sur la touche SHIFT pour avoir un magnétisme et tiré un dégradé bien droit)


Passez ce calque aussi en incrustation mais laissez son opacité à 100%


Il nous reste plus qu'à rajouter le symbole voulu, là un +. et de le placer entre le calque de l'ombre et le calque du reflet.


A présent pour en faire d'autre vous n'aurez qu'à changer la couleur de fond de l'icone et bien entendu le logo pour en créer sur la même base.
Voici des exemples que l'on peut obtenir avec facebook, twitter, flux RSS, blogger, flickr & co.


A vous de jouer ! :)

Autres tutoriaux photoshop : Webdesign

Faire une barre de navigation d'un site internet Création d'un bouton Flux RSS glossy Faire une barre de navigation, scroll barre Créer une icone glossy pour une interface web