Retour à l'index des tutoriaux.
.01 rendu
.02 Début
Pour pouvoir réaliser ce tuto il faut avoir Adobe Photoshop cs, tout d'abbord, ouvrez un nouveau document de taille 200 px de largeur/ 300 px de hauteur (Ctrl+n). Puis, mettez la couleur de fond que vous souhaitez. (par exemple : # 7A7A7A )
Puis, créez un nouveau calque (Ctrl+shift+n, nomme- le "rectangle"), remplissez à peut près tout l'arrière plan avec l'outil "rectangle de selection" (
) et remplissez de noir avec le pot de peinture. Puis mettez une ombre portée de taille : 5px, distance : o, si tout ce passe bien, vous obtenez ceci:
.03 L'effet
Maintenant nous allons passer à l' étape suivante. Prenez l'outil "rectangle de selection"
puis, regardez en haut a droite vous apercevrez ceci 
, cliquez dessus. Puis, faites Ctrl+clic sur le calque "rectangle" et selectionnez environ trois quart du calque, Puis, créez un nouveau calque en faisant ctrl+shift+n et remplissez la selection en bleu (#00AEFF) :
Puis, en gardant votre selection, toujours avec
, selectionnez environ la moitie, créez un nouveau calque (ctrl+shift+n) nommez le "effet" puis remplissez en blanc avec le pot de peinture , sur le calque" effet", mettez l'opacité à 30 % :
.04 L'effet de fond
Maintenant, cela risque d'être compliqué, donc restez bien concentré ! nous allons passer à l'effet de font, remettez vous sur le calque "rectangle" puis faites Ctrl+clic sur le calque "rectangle" , puis créez un nouveau calque que vous nommerez "fond1". Puis, prenez l'outil "elipse de selection"
en faisant clic droit sur rectangle puis prenez elipse, regarder en haut, a gauche, cliquez sur soustraire de la selection et en partant du haut faite un cercle qui laisse un bout (comme sur l'exemple), quand c'est fait remplissez le bout de selection qui reste, et remplissez le en blanc avec le pot de peinture 
: 
.05 Le texte
Bon, ne vous inquietez pas, on a presque fini, il faut juste rajouter le texte donc la, je pense que vous pouvez y arriver ( si,si !) . Juste, je vais vous aider pour le refflet du texte "link" donc, d'abbord mettez le texte de votre choix, ensuite dupliquez le calque du texte, et faites Ctrl+t (sur le calque du texte dupliqué) , puis faites clique droit," symetrie avec axe vertical " (sur la selection du Ctrl+t) et descendez-le en dessou du texte original avec l' outil déplacement puis faites "enter"; puis refaites Ctrl+t toujours sur le calque du texte, dupliquez et cliquez sur transformation manuelle et retrecissez le calque, et mettez l'opacité a 50% comme ci-dessous :
.06 Finale
Voila, j'éspere que vous êtes satisfait du résultat ! si vous avez un probleme contactez-nous( si c'est un problème de rien du tout il se peut que nous ne répondrons pas... ) :
Tutorial rédigé par thops.
Rushii le 21/05/2008 à 17h14 (10/10) : Merci!! Tuto simple et efficace
Ike le 29/04/2008 à 15h49 (6/10) : Je fais encore mieux ... c'est pas magnifique mais c'est bon pour les newbie, allez vous faire foutre connard
kayran le 17/03/2008 à 17h29 (9/10) :
je dirais 9.5 ;p c'est magnifique thops le 06/03/2008 à 22h08 (10/10) : Ce sont des tutoriaux photoshop, et pas CSS
snake le 05/03/2008 à 12h49 (1/10) : j'apelle pas ça un menu classe et comme la souligner jean il ne suffit pas d'ouvrir photoshop pour faire un menu apres il reste l'integration les CSS...
à compléter je pense
Kwatpers le 10/01/2008 à 21h23 (10/10) : super merci ;-)
thops le 21/11/2007 à 18h29 (10/10) : bonjour Jean, ce tutorial sert à apprendre à faire un menu pour un design web, évidemment, ceci est pour apprendre les bases à un amateur de photoshop, il est évident que vous pouvez le "remixer" par la suite.
Jean le 15/11/2007 à 21h58 (1/10) : Vous ètes assez bon pour faire un tuto permettant de réaliser un design web a 100% de photoshop aux feuilles de styles css
sinon je ne vois pas l'utilité de ces tuto désolé !
Ela le 19/08/2007 à 11h33 (9/10) : Je trouve le tuto très bien je n'utilise pas photoshop mais the gimp il est facile de retranscrire pour the gimp. Quelles sont les difficultés rencontrées ? Où trouvez vous que c'est mal expliqué.. Si vous avez des questions n'hésité pas à demander. C'est fait pour çà les tutos.
une site que je vous conseil :
http://www.crystalxp.net
il est fait pour tous de débutants à confirmés et pour tous les logiciels..
bon courage à tous
Kuraika le 29/07/2007 à 22h07 (9/10) : Sympa!
Mais bon, c'est vrai que des dois ca pourrait etre plus expliquer...
' almaju le 23/06/2007 à 13h53 (6/10) : Sympa mais le texte est rempli de fautes...
Vegeta38 le 23/06/2007 à 13h31 (7/10) : Moi j'ai bien compris car j'ai de l'experience a photoshop mais pour un debutant c'est quand meme assez dure
Bobby le 21/06/2007 à 23h21 (1/10) : Pas assez détaillé
greg le 21/06/2007 à 14h22 (10/10) : Vraiment très beau
Page : 1
