Mon premier design

Bonjour
Le tutorial qui suit ne va pas vous apprendre à réaliser des effets pour vos futurs webdesigns mais à les organiser comme le font tous les sites.

Vous allez apprendre à créer un webdesign de base, pour le reste je vous conseille fortement de faire chaque tutos du site pour apprendre toutes les possibilités de Photoshop et ainsi réussir à créer vos propres effets. Finis de parler, nous allons commencer par les explications.



Etape 1 - Shéma d'un webdesign

Un webdesign de base se commence toujours de la même façon, et aura toujours les mêmes éléments, certains les changent de place selon leurs préférences.
Voici le shéma d'un design simple :



Comment vous pouvez le remarquer, un webdesign est composé de 4 éléments. Le Header ou  bannière. Le Menu, où se trouverons vos liens vers les différentes pages du site, le Corps où vous écrirez vos pages web, et pour marquer votre traces, le Footer qui se trouve en bas de page. Maintenant vous devez vous demander par où commencé... C'est simple passez à l'etape 2.

Etape 2 - Le Design

Commencez par créer un nouveau document soit 800x....px ou alors 1024x....px Pour ma part je fais un nouveau document de 1024x800px pour que le document ne fasse pas trop carré et assez haut pour pouvoir mettre le footer. Il est important de renommer ses calques pour vous y retrouvez. Sur le calque Arrière plan, je fais mettre une autre couleur que le blanc.. j'ai choisis cette couleur #237384 ce qui nous donne un joli fond :



Une fois la couleur de fond choisie, vous pouvez réellement commencer la conception du webdesign, direction l'Etape 3 !

Etape 3 - Le header

On commence donc par le header, nous allons du haut vers la bas... Si nous choissons de faire ainsi c'est pour suivre dans l'ordre la conception du design et rester dans le même aspect tous le long.
Comme nous aimons la nature et le bleu, j'ai choisis de prendre une jolie image d'un ciel.
Mais avant de mettre cette image en header, nous allons créer le fond du header. Créez un nouveau calque, prenez l'outil Rectangle de sélection, l'outil Rectangle et l'outil Rectangle arrondi pour des bords arrondis (ce que j'ai pris).



Renommez le calque de cette image "Header_fond" pour vous souvenir que c'est le fond du header, vous pouvez y ajouter un contour grâce aux options de fusions, en faisant sur le calque Clic Droit -> Options de fusions -> Contour et configurez le comme bon vous semble . J'y ai rajouté un contour de 2px de couleur bleu.
Pour terminer le header vous pouvez y ajouter le titre de votre site, son slogan, etc... Vous pouvez aussi rajouter d'autres images et les intégrer avec des masques de fusions ()

Etape 4 - Le menu

Plus simple encore, le menu peut se trouve à gauche, en dessous ou à droite du header. Pour faire simple nous l'avons fais sur la gauche. Prenez à nouveau un outil comme le rectangle de sélection et sur un nouveau calque remplissez votre séléction d'une couleur soit par le raccourci CTRL+F5, par Edition -> Remplir ou avec le pot de peinture. J'ai choisi de prendre la même couleur que le contour de l'image soit #50b6eb. Vous pouvez personnaliser votre menu, en ajoutant des images, en enlevant soigneusement des petits bouts comme je l'ai fais, ou ajouter des effets avec les options de fusion . Mais restez dans le simple .



Ensuite rajoutez un titre "Menu" en haut de celui-ci, et mettez-y des textes "Liens" pour montrer l'emplacement de vos liens. J'y ai également ajouté des petites choses, vous les verez plus tard .

Etape 5 - Le Corps

Encore plus simple le corps, utilisez toujours un outil comme le rectangle de séléction et remplissez la séléction d'une couleur, j'ai repris la même que le menu et le contour du header. J'ai ajouté un petit titre et une indication au milieu de celui-ci, vous pouvez faire de même ou alors faire comme si le site était ouvert et alors faire le cadre des news, ect... Mais j'ai pas voulu compliquer les choses... Par contre vous pouvez vous amusez avec le pinceau qui se trouve dans la barre du haut :



Voici le rendu de mon design pour le moment :



Allez la dernière étape et surement la plus simple de ce tutorial .


Etape 6 - Le Footer

Le footer est très simple à faire, un petit rectangle de sélection que vous remplissez d'une couleur, et vous y écrire votre copyright par exemple. Vous pouvez y ajouté celui qui a fait le design, le codeur XHTML/CSS qui a découpé ce design, et le codeur PHP qui a codé le site en PHP. Vous pouvez y ajouté des images, effets sans trop exagérer . Comme je vous l'ai dit, sa doit rester simple .

Vous pouvez faire aussi des motifs sur le fond, mettre plus d'effet sur le header, menu, corps, ect...
Voilà, c'est tout pour ce tutorial.
Bonne chance à tous pour vos premiers sites et n'oubliez pas Crea-Paradise, de nombreux tutoriaux peuvent vous aidez ! 

5 commentaires

rocawear	> Posté le : 10/08/2007 à 20h39 | Note :
Groupe : Membres	Super le tuto Développeur web avec 7 années d'expérience. => Ancien modérateur de créa-paradise.
Tidus	> Posté le : 12/08/2007 à 12h21 | Note : Aucune
Groupe : Membres	Merci  Ultimate Tidus
lbeetls01	> Posté le : 12/08/2007 à 12h27 | Note :
Groupe : Membres	Bon tuto ! Crea-paradise - Créateurs de rêves Pas d'aide par MP, les forums sont là pour ça .
daya	> Posté le : 13/09/2007 à 19h33 | Note : Aucune
Groupe : Membres	bravo !! ps: c'est simple Cool man
lesloups	> Posté le : 17/04/2008 à 08h12 | Note : Aucune
Groupe : Membres	il y aura pas un bug avec les commentaires lesloups