Dans ce tutorial, nous allons voir la création d’un webdesign. À la fin, vous devriez obtenir quelque chose de similaire à ceci :



Commencez tout d’abord par choisir une palette de couleur, vous pouvez en trouver sur les sites suivants :
ColorBe
ColourLovers.
Pour ma part, je vais utiliser celle-ci



Etape 1 - Mise en place des guides

Créer un nouveau document de 760x760 pixels. Tracez quatre guides, chacun à 10 pixels du bord de votre document. Placez en un ensuite à 37 pixels en partant du haut, un autre à 47 pixels, un autre à 200 pixels, encore un à 210 pixels, puis à 715 pixels et pour finir à 725 pixels. Maintenant, pour les repères de gauche à droites, un à 540 pixels et un autre à 550 pixels.




Etape 2 - Création du patron

Prenez l’outil Rectangle de sélection (M) puis faites des sélections grâce aux guides que vous remplirez de #A0A0A0 (chaque sélection devra être sur un calque différent). Renommer chaque calque en vous aidant de l’illustration ci-dessous. Mettez les calques créés dans un dossier nommé Patron.




Etape 3 - Fond et onglets

Créez tout d’abord un dossier nommé Elements. Créez un calque et remplissez le de la couleur de fond choisi. Dans ce dossier, créez en un que vous nommerez Tab. Récupérez la sélection du calque Tab (Ctrl + clique sur le calque). Créez un nouveau calque et remplissez-le de la couleur de votre barre d’onglets. Placez un nouveau guide à 68 pixels en partant de la gauche.




Etape 4 - Onglets

Créez un nouveau calque. Choisissez l’outil Crayon (B) avec comme réglage : Diamètre : 1 px Dureté : 100%, Mode : Normal, Opacité : 100% et avec comme couleur, cette de votre fond de page. Dessinez dix points chacun espacé de 1 pixel, et cela dans l’espace de vos onglets en partant du haut. Pour centrer le tout, déplacez simplement de 4 pixels vers le bas. Dupliquez le calque et décalez-le de 60 pixels vers la droite (appuyez sur Shift et six fois sur la flèche vers la droite). Répétez cette opération autant de fois que vous voulez d’onglets.






Etape 5 - Header

Créez un nouveau dossier à la racine de Elements. Séléctionnez l’outil Rectangle (U) et tracez un rectangle de la taille du bloc header. Placer un guide à 650 pixels en partant de la gauche et un autre à 230 en partant du haut. Ceux-ci vont permettre de créer la flèche.




Etape 6 - Header

Sélectionnez l’outil Plume (P) , placez le début du tracé sur le croisement des guides à 650 pixels et 230 pixels. Maintenez Shift enfoncé et tracez un triangle. Sélectionnez ensuite Etendre la zone de la forme (+) et refaite un second triangle en face du premier.






Etape 7 - Header

Nous allons pouvoir passer aux effets appliqués à ce header. Commencez donc par créer un nouveau calque et sélectionnez l’outil Rectangle de sélection 1 rangée . Sélectionnez le premier pixel de votre header et remplissez de blanc. Récupérez la sélection à partir du patron (Ctrl + clique sur la calque), inversez la sélection (Shift + Ctrl + I) et supprimez (Del ou Suppr). Baissez l’opacité de ce calque à 25%




Etape 8 - Header

Créez encore un calque, et récupérez la sélection d’abord sur le calque vectoriel du header (Ctrl + clique sur le calque) et additionnez la sélection de la flèche (Shift + ctrl + clique sur le calque). Tracez un dégradez linéaire de noir à transparent du bas vers le haut de la sélection et baissez l’opacité du calque à 10%.




Etape 9 - menu

Créez un dossier entre Tab et Header, nommez le Menu. Récupérez la sélection du patron et remplissez de la couleur choisie sur un nouveau calque.

Etape 10 - Menu

Maintenant, dupliquez le calque de la flèche du header et placez dans le dossier Menu au dessus du calque créé à l’étape 9. Décalez la flèche de 10 pixels (Shift + un coup sur la flèche vers le bas), et changez la couleur par celle du fond de votre design.






Etape 11 - Menu

Répétez l’étape 7 sur ce calque. Puis faite une sélection à partir de la flèche (Ctrl + clique sur le calque) et effacez (Del ou Suppr). Créez un nouveau calque en gardant la même séléction, dans le menu Edition, faite contour puis réglez sur Intérieur, couleur blanche.




Etape 12 - Menu

Il nous faut maintenant supprimer les pixels du faut de la flèche. Faites une sélection et effacer (Del ou Suppr). Baissez l’opacité du calque à 17%.



[img][/img]


Etape 13 - Content

Créez un nouveau dossier au dessus de Menu et créez un nouveau calque. Récupérez la sélection sur le calque patron et étendez là jusqu’au menu (550ème pixel horizontal). Remplissez de la couleur choisie. Appliquez l’étape 7.




Etape 14 - Content

Choisissez maintenant l’outil Rectangle de sélection 1 colonne et sélectionnez les pixels les plus à droite du Content. Remplissez de blanc sur un nouveau calque, récupérez la sélection sur le calque de couleur, inversez la sélection (Shift + Ctrl + I) et supprimer (Del ou Suppr). Baissez l’opacité du calque à 50%




Etape 15 - Footer

Créez un dossier Footer et sur un nouveau calque faite une sélection rectangulaire et tracer la partie Content, puis la partie Menu. Appliquez un dégradé de Noir à transparent sur un nouveau calque et baissez l’opacité de celui-ci à 10%.




Etape 16 - Footer

Pour achever la plus grosse partie, répétez l’étape 14 sur la dernier pixel de droite de la partie Content du footer.




Etape 17 - Finalisation

Sur le bloc Tab, laissez deux pixels avant et après les pointillés. Choisissez Trebuchet MS comme police en Bold, une taille de 12 px et ne mettez aucun lissage. Comme couleur prenez celle du fond de votre page.
Appliquez un dégradé radial de blanc à transparent sur le Header, passez le calque en mode Incrustation et baissez son opacité à 25%. Bien évidemment, faite un Ctrl + clique sur le calque du header, inversez la sélection (Shit + Ctrl + I) et supprimez (Del ou Suppr).
Pour le texte du Header, utilisez la police Minion Pro et appliquez un style de calque.






Conclusion

Voilà ce tutorial est terminé, aucune notion de codage n’a été abordée ici, une seconde partie de ce tuto sera peut-être faite, essentiellement sur le codage en HTML et CSS…