Bonjour !

Aujourd'hui, nouveau tutoriel web design ! Nous allons apprendre à créer un design web simple, professionnel et sobre. Le genre de design que pourrez utiliser sur presque tous les sites. Ceci n'est bien sûr qu'un entraînement qui vous montrera aussi des astuces telles que le centrage de calque, astuces sur les ombres, …
Résultat final : Voir le résultat final

---

Pour commencer, créez un nouveau document : 1000 pixels de hauteur, 800 pixels de largeur.
Remplissez ce nouveau document de gris clair, ici dedede (#DEDEDE) en "Notation HTML" (aussi appelé Hexadécimal).

Nous allons passer au design en lui-même.
Créez un nouveau calque. Calque > Nouveau calque... Appelez-le "Design". Faites une sélection d'environ de largeur 935 pixels, et de hauteur 770 pixels (vous pouvez voir les dimensions de votre calque dans la barre en bas de votre fenêtre).
Remplissez cette sélection de blanc et allez dans Calque > Découper la sélection. Pourquoi ? Car nous allons utiliser l'outil "Alignement", et il aligne selon les dimensions du calque. Donc si on veut centrer un calque de 1000x800 par rapport à une image à 1000x800, il n'y aura pas de différence. Alors que là, le calque fera 935x770.
L'outil alignement, c'est cette icône : . Sélectionnez le calque "Design" et cliquez sur la partie blanche du document. Ensuite, cliquez sur les icônes encadrées en vert :


Passons à l'ombre du design. Donc allons dans Filtre > Ombres et lumières > Ombre portée...
Configurez décalage X à 0, décalage Y à 0, rayon du flou à 5, couleur noire, opacité 80 et "Permettre redimensionnement" décoché.

À présent, place au header, faites clic droit sur "Design" dans la fenêtre des calques puis Alpha vers Sélection.
Allez dans Sélection > Réduire... à 2 pixels.
Créez un nouveau calque appelé "Header" (Calque > Nouveau calque...). Reprenez l'outil Sélection en mode Soustraire (cette icône ).
Faites une sélection à peu près comme celle ci (cliquez pour voir l'image).

Ensuite, faites un dégradé () PP vers AP. Moi, j'ai comme couleur (en notation HTML) de premier plan 797979 (gris) et en arrière plan FFFFFF (blanc).
J'ai ensuite fait un dégradé de bas en haut de cette taille (cliquez pour voir).
À présent, le texte du header. Là, c'est du freestyle. Petite note pour avoir de plus belles polices pour vos textes : décochez "Indice d'ajustement" et cochez lissage.
Là, je me suis contenté d'un simple texte "OPEN-STUDIOS.EU", Trebuchet MS 35px, ombre portée X=0 Y=0 Rayon = 3 couleur noir opacité 80. Puis j'ai mis un gros OPEN-STUDIOS.EU derrière le OPEN-STUDIOS.EU qu'il y avait. Taille 42px, opacité 40.
Maintenant que vous avez votre header, passons à la barre de navigation.

La barre de navigation : faites clic droit sur le calque Header puis Alpha vers sélection. Prenez l'outil déplacement en mode sélection.
Mettez la sélection à deux pixels en dessous du header. Puis prenez l'outil sélection en mode soustraire puis faites en sorte que la sélection ne fasse plus qu'une trentaine de pixels. Puis faites un dégradé linéaire droit de bas en haut PP vers AP, couleur de premier plan e6e2d2 (notation HTML) et arrière plan ffffff (blanc). À présent, le menu.

Pour le menu : je vais vous laisser vous débrouiller. Oui, à vous de faire libre court à votre imagination.
Si néanmoins vous êtes à court d'inspiration et que vous aimeriez faire comme moi, regardez cette vidéo qui montre comment j'ai fait : voir la vidéo.

À présent, passons au corps. Pour ma part j'ai fait quelque chose de très simple : un rectangle arrondi. J'ai fait un nouveau calque "Corps".
Prenez l'outil sélection avec "Coins arrondis" de coché, 4px de rayon. Faites une sélection qui est à la même hauteur que le menu. Voici le type de sélection que vous devriez avoir.
Pour faire le contour, je vais remplir cette sélection de gris (C9C9C9 en notation HTML) et je fais Sélection > Réduire... de 1px, puis je remplis cette nouvelle sélection de blanc.

Pour le footer. J'ai fait clic droit sur le calque "Design" > Alpha vers sélection. J'ai ensuite fait Sélection > Réduire... de 2 px. J'ai ensuite créé un calque appelé "Footer".
J'ai utilisé l'outil sélection en mode soustraire de façon à ce que la sélection de fasse plus qu'une centaine de pixels. J'ai ensuite fait un dégradé comme dans la barre de navigation, avec une couleur plus foncée (d0cdc1 en notation HTML).

Voilà, maintenant vous avez votre design ! Voir le résultat final.

---

Télécharger le fichier XCF du design
Votez pour cet article dans Scoopeo.

Notez que je vous ai volontairement laissé libre court à votre imagination. En effet, la création d'un design web est souvent personnelle.
Mais si vous bloquez ou si vous désirez plus d'explications, n'hésitez pas à me le dire !
Bonne chance et n'oubliez pas, c'est en pratiquant qu'on s'améliore !