| Auteur |
Message |
 |
hare
Schtroumpfissime
Messages: 599
|
 Posté le:
04 Sep 2007 16:29 |
  |
Bonjour à tous !
Je propose mon premier tutoriaux ! inscris depuis deux ans, il est temps 
Créer un design de site internet
Tous niveaux
Note : Les noms donnés aux calques sont ceux de mon choix, si vous en voyez plus apropriés .... c'est vous qui voyez !
Pour commencer, créez un nouveau document sous photoshop. Dans cet exemple, j'ai crée un document de 1004 par 1354 pixels avec un fond transparent.
Créez un groupe de calque que vous appelerez base
Renommez le premier calque calque1 par fond puis placez le dans votre premier groupe de calques.
Remplissez ce calque d'une couleur avec l'outil Pot de peinture (raccourcis clavier : G). Je l'ai remplis de noir #000000.
Ensuite, créez un nouveau calque cliquez sur l'icone a droite de celle qui vous a servit a créer un groupe tout à l'heure) puis renommez le patterns.
Toujours avec l'outil pot de peinture, remplissez ce calque par un pattern.
Voir comment créer des patterns ici
Pour ma part, j'ai utilisé ce motif
Maintenant nous allons créer le header.
Faites CTRL+R pour faire apparaitre la règle sur votre document, vous pouvez voir qu'une règle sur le coté gauche et en haut est apparut. Cette règle va nous servir a réaliser des lignes "imaginaires" pour la mise en forme du design. Cliquez sur la règle du coté du document puis, sans relacher la souris, glissez la vers la droite.
Vous pouvez alors apercevoir une ligne qui apparait sur votre document.
Placez-en plusieurs, mettez les comme ceci :
Pour faire des lignes verticales faites la meme chose mais en plaçant votre souris sur la règle en haut du document.
A présent, faites une sélection comme ceci
puis allez cherchez cette image et copiez là.
Retournez a votre document sous photoshop et avec votre sélection active, faites Edition > Coller dedans.
Un nouveau calque s'est créer, appelez le header.
En utilisant cette technique, vous pouvez déplacer votre image sans qu'elle sorte de votre sélection précédente.
Voici ce que vous pouvez obtenir
J'ai rajouter un effet a la banniere grace à l'outil plume.
Passons maintnant au corps du design.
Placez vous sur le groupe base puis créez un nouveau que vous appelez body suivis d'un calque du nom de bande.
La disposition de vos calques devrait ressembler à ça.
A présent faites une selection comme sur cette image.
et remplissez la du bleu #3c72b4.
CTRL+D pour déselectionner.
Créez un nouveau calque du nom de ombre. Faites une sélectionner comme ceci puis remplissez la en noir.
Dupliquez ce calque, pour se faire glisser votre calque vers l'icone qui vous sert a créer un nouveau calque.
Renommez ce calque content et remplissez le en blanc.
Reprenez le calque ombre et faites CTRL+T, en maintenant ALT enfoncé, cliquez sur la poignée de gauche (par exemple) et déplacez votre souris un petit peu vers la gauche. Vous devriez voir les bords noirs dépacé s de chaque cotés comme ceci :
A présent, en restant toujours sur le calque ombre, faites Filtre>Atténuation>Flou Gaussien et entrez une valeur de 10 pixels.
Passons au menu.
Comme pour les étapes précédentes, créez un groupe du nom de menu et un calque qui s'appelera base
Créez une nouvelle ligne horizontale sous la derniere grace a la règle.
Faites une sélection sous votre header que vous remplirez en noir.
Ensuite sélectionnez votre menu en longueur et a la moitié pour la hauteur, voici une image pour mieux comprendre.
Créea un nouveau calque appelé blanc et remplissez votre sélection de blanc et baissez son opacité a 20%.
Maintenant avec l'outil Texte (raccourcis T) nous allons écrire les noms des bouttons.
j'ai utilisé la police Zero Twos.
Pour finir le menu, nous allons créer des séparations entre chaques bouttons.
Créez un nouveau groupe de calques dans le groupe MENU.
Créez un nouveau calque que l'on appelera barre. Avec l'outil crayon (raccourcis B) créez un trait de 2 pxl en gris #909090 puis un noir de 1 pxl de chaques cotés.
Voila ce que vous devriez avoir :
Suite a ca, créez un masque de fusion sur votre calque puis appliquez un degradé (Noir vers blanc).
Maintenant, dupliquez ce calque plusieurs fois et placez les entre chaques textes du menu pour arriver a ceci :
Pour le reste du design, je vous laisse faire libre court a votre immagination ! Voici ce que donne le design
J'espere que ce tutorial vous aurra plus!
hare |
---------------------------------------------------------
/me <3 FG =D |
|
| Inscrit le: 05 Déc 2005 |
    |
|
Cmwa
Schtroumpfissime
Messages: 628
|
| Posté le:
04 Sep 2007 16:56 |
|
|
| Inscrit le: 22 Fév 2007 |
 |
|
Iso
Invité
|
| Posté le:
04 Sep 2007 17:01 |
|
|
|
|
|
hare
Schtroumpfissime
Messages: 599
|
| Posté le:
04 Sep 2007 23:59 |
|
Ah sympa Iso, je connais pas  |
---------------------------------------------------------
/me <3 FG =D |
|
| Inscrit le: 05 Déc 2005 |
|
|
Anonji
Schtroumpfissime
Messages: 775
|
| Posté le:
05 Sep 2007 1:05 |
|
Sympa : ) Merci Hare. |
---------------------------------------------------------
 |
|
| Inscrit le: 18 Juin 2007 |
|
|
Le Lutin
Schtroumpfissime
Messages: 732
|
| Posté le:
08 Sep 2007 13:36 |
|
Merci du tuto Hare  |
|
|
| Inscrit le: 07 Fév 2007 |
|
|
hare
Schtroumpfissime
Messages: 599
|
| Posté le:
08 Sep 2007 15:34 |
|
hihi
Ca m'a fais plaisir de le faire |
---------------------------------------------------------
/me <3 FG =D |
|
| Inscrit le: 05 Déc 2005 |
|
|
ToXxX
Schtroumpf
Messages: 46
|
| Posté le:
08 Sep 2007 18:25 |
|
"Acceuil" ... ouïe ça fait mal aux yeux 
( Ca s'écrit accueil ' ) |
|
|
| Inscrit le: 15 Aoû 2007 |
|
|
Zelda
Schtroumpfissime
Messages: 842
|
| Posté le:
08 Sep 2007 21:56 |
|
Merci pour le tuto Hare 
Sympa les walls Iso je ne connaissais pas moi non plus  |
---------------------------------------------------------
 |
|
| Inscrit le: 25 Avr 2006 |
|
|
Tchupa
Schtroumpf
Messages: 141
|
| Posté le:
11 Sep 2007 14:04 |
|
Sympas le tuto merci |
|
|
| Inscrit le: 06 Sep 2007 |
|
|
bwaa
Schtroumpf
Messages: 39
|
| Posté le:
23 Sep 2007 11:46 |
|
Super tuto
Il m'a beaucoup aidé |
|
|
| Inscrit le: 13 Mai 2007 |
|
|
stefde3
Schtroumpf costaud
Messages: 170
|
| Posté le:
23 Sep 2007 11:57 |
|
 parfait pour le design |
---------------------------------------------------------
 |
|
| Inscrit le: 16 Sep 2007 |
|
|
howsmyride
Schtroumpf farceur
Messages: 1039
|
| Posté le:
24 Sep 2007 5:39 |
|
Merci ! Je me fais souvent chier à faire un motif potable ! |
---------------------------------------------------------
Howsmyride -> [b]Refresh[b] |
|
| Inscrit le: 28 Oct 2006 |
|
|
punch
Schtroumpf paresseux
Messages: 1867
|
| Posté le:
24 Sep 2007 17:51 |
|
| howsmyride a écrit: |
Merci ! Je me fais souvent chier à faire un motif potable ! |
C'est vrai que c'est galère, surtout quand à la fin, tu remarque qu'il y a un décalage  |
---------------------------------------------------------
 |
|
| Inscrit le: 13 Nov 2005 |
|
|
Tchupa
Schtroumpf
Messages: 141
|
| Posté le:
02 Fév 2008 9:15 |
|
Moi j'aurais une petite question:
As tu des conseils a nous donner pour la découpe de ce design ? |
|
|
| Inscrit le: 06 Sep 2007 |
|
|
Anonji
Schtroumpfissime
Messages: 775
|
| Posté le:
03 Fév 2008 19:04 |
|
Pour compléter le commentaire de Drag, si je peux me permettre, je ne trouve pas ta signature très appropriée sur un forum dans ce genre.
Pour ce qui est de ta question, je ne sais pas si c'est ce que tu cherche mais j'ai trouver un tuto à ce sujet.
De plus, je ne crois pas avoir pu te lire dans la section présentation. Il serait sympa que tu y passes, comme tout le monde. |
---------------------------------------------------------
|
|
| Inscrit le: 18 Juin 2007 |
|
|
crafty
Schtroumpfissime
Messages: 708
|
| Posté le:
03 Fév 2008 19:59 |
|
Ouai j'avou sa le fait pas trop le theme de ta sign , on est pas sur un site porno ici il y a aussi des mineurs... |
---------------------------------------------------------
  |
|
| Inscrit le: 16 Aoû 2007 |
|
|
Tchupa
Schtroumpf
Messages: 141
|
| Posté le:
04 Fév 2008 9:02 |
|
C'est un tuto ou un débat sur ma signature? |
|
|
| Inscrit le: 06 Sep 2007 |
|
|
Rokkall
Schtroumpf costaud
Messages: 217
|
| Posté le:
04 Fév 2008 10:33 |
|
J'te rassure, le tuto est plus intéressant et le débat concernant ta signature
est clos. Veilles juste à respecter les règles. |
---------------------------------------------------------
Lorsque l'érutdit montre la lune,
l'idiot regarde le doigt. |
|
| Inscrit le: 28 Nov 2005 |
|
|
Misakura
P'tit schtroumpf
Messages: 8
|
| Posté le:
07 Fév 2008 0:46 |
|
Super tuto!!
J'ai juste eu un probleme pour créer le calque ombre (qui appartient à body). Lorsque j'ai fait la copie et que j'ai decalé la poignée vers la gauche, ça restait noir. ça devenait pas blanc
Je voulais aussi savoir, comment on fait ensuite pour que les boutons du menu deviennent des liens? |
|
|
| Inscrit le: 05 Fév 2008 |
|
|
|
|
