Retour à l'index des tutoriaux.
.01 Rendu
Ce tuto est long et fastidieux mais regardez ce que vous obtenez, alors tenez bon et vous aussi devenez de véritables webdesigners !
.02 Le header
Tout d’abord, créer un nouveau document (Ctrl+N) de 800*800 pixels de fond transparent et commencez à remplir le premier calque de blanc avec l’outil Pot de peinture (touche G). Jusque là pas trop dur vous allez me dire, mais attendez, on y arrive !
Créez un nouveau calque (Maj+Ctrl+N) et appelez-le Header pour qu’on s’y retrouve ! A présent, faites un rectangle sans bords arrondis (touche U) de couleur #4bb1d8. Maintenant, jouons un peu avec les options de fusion, ici Incrustation en dégradé. Mettez un dégradé avec les options comme l’image ci-dessous :
A présent, nous allons créer des bandes en diagonale. Pour cela, créez un nouveau document de 3*3 pixels et de fond transparent et créer une diagonale avec l’outil crayon (touche B) (largeur de 1 pixel) comme ceci :
Ensuite allez dans Edition / Utiliser comme motif Et appelez le Bandes diagonales par exemple. Vous pouvez maintenant fermez ce fichier sans l’enregistrer. Revenons à nos moutons … Appliquez au calque Header l’option Incrustation de motif et choisissez les options comme ci-dessous :
Pensez à baisser l’opacité car sinon on voit trop les imperfections naturelles des barres !
Voila une bonne chose de faite ! Maintenant attaquons-nous au deux petites formes sur les côtés. Pour cela, créez un nouveau calque et nommez-le Forme1. Maintenant, sélectionnez l’outil Forme personnalisée (touche U) et faites une forme comme ceci de couleur blanche :
Maintenant placez votre image sur le côté droit du header puis faites Ctrl+click sur le calque Header ce qui permet de récupérer la sélection du header, puis Ctrl+Shift+I ce qui permet d’inverser la sélection. Maintenant, Appuyez sur votre touche Supprimer du clavier. Maintenant, rendez vous dans les options de fusion et appliquez un Contour au calque Forme1 de taille 2 px et de couleur #a8a8a8 (laissez les autres options par défaut).
Maintenant, dupliquer ce calque et nommez le Forme2. Faites Edition / Transformation / Symétrie axe horizontal et déplacez votre forme sur le côté gauche du header.
Bon voici en ce qui concerne le header ! Faisons un petit bilan, voici ce que vous devriez avoir à ce stade de la création. Allez tenez bon !
.03 Le menu
Bien attaquons nous au menu, chose primordiale sur un site ! Créez un nouveau calque et nommez-le Menu (il n’y a pas plus simple) et créez un rectangle sans bords arrondis (touche U) de 700*80 et de couleur #8dc63f et centrez-le en le collant juste en dessous du header. Maintenant appliquez-lui une Incrustation en dégradé avec comme mode de fusion Lumière tamisée et 100% d’opacité (ne touchez pas aux autres réglages).
A présent, créez un nouveau calque nommé Refletet sélectionnez l’outil Ellipse de sélection (touche M) et tracez une sélection comme ceci :
Sans désélectionner, prenez l’outil Pot de peinture (touche G) et remplissez la sélection de blanc. Maintenant faites Ctrl+click sur le calque Menu, puis Ctrl+Shift+I et supprimez. Baissez à présent l’opacité du calque Reflet à 40 %.
Et voilà, le menu est fini, voici ce que vous devriez avoir :
.04 Les cadres de news
Bon vous pouvez soufflez un peu, vous avez passer la plus grosse partie du tuto. Si vous avez réussi à faire les 2 parties précédentes, vous trouverez celle-là trop facile !
Créez trois nouveaux calques Cadre1, Cadre2, Cadre3 et créez un rectangle sans bords arrondis de couleur blanche dans chaque calque (oui, je sais c’est difficile de voir ce que l’on fait vu que le fond est blanc mais pas de panique : rendez vous dans le premier calque que vous aviez remplis de blanc au début et remplissez-le de noir). Faites deux rectangles de 300*300 px et un autre plus en dessous de 470*70 px et voici ce que ça devrait donner :
Maintenant, baissez le fond du calque à 0 % et appliquez lui un Contour de 1 px et de couleur #aaaaaa (et ne touchez pas encore aux autres réglages). Pensez à remettre votre premier calque avec un fond blanc ! Et voici que par magie, vous avez trois cadres blancs de contour gris !
Maintenant, nous allons créer un petit en-tête à nos cadres. Pour cela, créez un nouveau calque En-tête, et faites un rectangle sans bords arrondis de couleur #f7941d et de taille 298*39 px et centrez-le bien en haut du premier cadre. Appliquez lui maintenant une Incrustation en dégradé comme ceci :
Maintenant, vous n’avez qu’à dupliquer le cadre et de déplacer l’en-tête sur l’autre cadre de droite. Pour la cadre du dessous (qui est destiné à la publicité), on ne met pas d’en-tête.
Voila, nous avons terminés nos cadres ! Voici ce que vous devriez avoir :
.05 Le footer
Allez c’est la dernière ligne droite. Je me dépêche un peu car il commence à faire tard !
Créez un nouveau calque Trait footer et tracé un trait avec l’outil crayon (touche B) de couleur noir et de taille 1 px, bien droit : pour cela, maintenez la touche Shift enfoncé quand vous tracez votre trait. Ce trait permet de délimiter le footer.
A présent, créez un nouveau calque que vous nommez Forme3 et sélectionnez l’outil Forme personnalisée (touche U) et faites une forme de couleur #4bb1d8 comme ceci :
Pour la taille, je vous laisse gérer, à vous de voir en fonction de la taille du footer. Faites Ctrl+T ce qui permet d’activer la transformation manuelle et tourner un petit peu votre forme, et placez la dans le coin en bas à gauche. Appliquez lui une Incrustation en dégradé avec comme mode de fusion Lumière tamisée et 100 % d’opacité. Dupliquez votre calque en le nommant Forme4 et faites Edition / Transformation / Symétrie axe horizontal et placez à l’opposé du footer.
Et voila c’est fini … enfin ! Vous pouvez à présent souffler, vous venez (peut-être) de réaliser votre premier webdesign ! Enjoy
Voici ce que vous devriez obtenir :
.06 Le final
Vous avez créer le webdesign mais bien sûr, il est un peu vide ! Vous n’avez plus qu’à compléter avec du texte. Voici ce que j’ai fait (cliquez sur l'image pour aggrandir ):
Pour tout problème ou pour toutes erreurs dans le tuto (ce qui est possible vu la longueur de celui-ci), merci de le signaler sur le forum.
C.Moreau à votre service.
Tutorial rédigé par C.Moreau.
Merci beaucoup!
Justiine le 02/11/2008 à 13h58 (10/10) : Merci milles fois !
Boulledogue le 11/07/2008 à 17h45 (10/10) : Merci! Facile, joli, super!
Octave_41 le 04/06/2008 à 19h41 (8/10) : Bon tuto pour un premier webdesign !
a_ousmane le 27/05/2008 à 21h08 (10/10) : Je trouve intéressent. Merci.
rukia le 02/05/2008 à 23h22 (10/10) : très bon tuto
je les utiliser pour faire mon webdesign
merci
x-x-X-x-Rom-Teck-x-X-x-x le 20/04/2008 à 20h15 (10/10) : Bonjour, tout d'abord je voudrais vous demandé la suite, apres avoir découpé sur toshop, car je l'ai fais j'ai donc ma page web formé d'images MAIS je ne vois pas comment ecrire par desus l'image des cadres merci d'avance,
Cordialement
Rom-Teck
PS : contactez moi rom-le-bogoss@live.fr
lesloups le 12/04/2008 à 10h38 (10/10) : merci beaucoup
en faite moi je faisun par un je commence par la banniere j'ai fini apres je continu etc..
MyPseudo le 31/03/2008 à 03h26 (-2147483648/10) : MyCommentaire
MyPseudo le 31/03/2008 à 03h26 (0/10) : MyCommentaire
MyPseudo le 31/03/2008 à 03h24 (-1/10) : MyCommentaire
MyPseudo le 31/03/2008 à 03h23 (-1/10) : MyCommentaire
aaaaaaaaaa le 31/03/2008 à 03h18 (10/10) : aaaaaaaaaaaaa
qsdsq le 31/03/2008 à 03h18 (10/10) : qsdqsdsq
elie le 20/03/2008 à 06h44 (10/10) : et le codage, a chaque fois ce sont les memes tutos mais il n'y a jamais l'essentiel : le codage !!! merci pour vos efforts
skymo le 28/02/2008 à 13h59 (10/10) : http://www.generation-tuto.com/admin/upload/C.Moreau1174333299imp03.png
cette image est manquante pour le l'incrustation par motif, quel mode de fusion doit on choisir ?
Misa-chan le 10/12/2007 à 20h11 (10/10) : Très bon tuto mais il manque peut etre la partie la plus importante, le codage?
Shiba le 09/12/2007 à 17h33 (10/10) : Il est vrai qu'une seoncde partie "Découpage" serait des plus interessante
Sinon Site vraiment interessant, et tutos tres clairs Du bon travail, merci!
Mickei le 07/11/2007 à 13h08 (7/10) : Peut-être que le tuto montre à faire le layout, mais ce serait bien une deuxième partie qui montre à coder...
Wii-Wii le 31/08/2007 à 17h51 (7/10) : C'est un beau design mais il manque le plus dur : le découpage...
