Créer un design simple sous photoshop

Dans ce tutorial, nous allons élaborer une interface de site internet assez simple, qui pourra, par la suite, être découpée puis intégrée à l'aide des CSS dans une page XHTML.

Vous pouvez voir le résultat final en regardant l'image finale.

Notre site sera adapté pour les résolutions d'écran de 800 par 600 pixels et supérieures. Nous allons donc créer un document de 800px de largeur et 600px de hauteur. Vous pouvez utiliser les Formats prédéfinis de la boîte de dialogue Nouveau de Photoshop. Indiquez une résolution de 72 pixels par pouce et un fond transparent (ou blanc) par défaut.

Note : Par commodité, pensez à indiquer le nom de la création.

Voir l'image n°1.

Nous voici sur notre interface de travail. Renommez le premier calque "Arrière-plan" et remplissez-le de blanc, si vous avez choisi un fond transparent.

Organisons notre travail, nous allons commencer par l'entête de la page,. Créons donc un dossier de calques et un calque "logo" dans ce dossier.

Voir l'image n°2.

Choisissez l'outil rectangle arrondi (raccourci "U"). Activez pixels de remplissage, et choisissez un rayon de 10px pour les bords.

Voir l'image n°3.

Créez votre rectangle, ici en rouge #CC0000.

Nous allons donner une impression de relief pour donner un effet à notre cadre. Créons un nouveau calque "relief", comme sur l'image n°4.

Selectionnez les pixels remplis du calque "logo" (Ctrl+Clic sur le calque dans la fenêtre "calques", sous windows). Allez ensuite chercher, dans le menu Sélection > Modifier, l'outil Contracter. (voir l'image n°5).

Choisissez Blanc comme couleur de premier plan. Avec l'outil dégradé, dont l'opacité sera réglée à 50% et le type choisi "Premier plan > transparent" (image n°6), appliquez l'effet souhaité, en dosant le plus justement possible.

Nous allons ajouter au logo un motif de diagonnales. Nous allons commencer par créer ce fameux motif, avec une nouvelle image, de 5 par 5 pixels, avec un fond transparent (image n°7).

Avec l'outil crayon, et la couleur noire, dessinez la diagonale de l'image. Zommez pour vous faciliter la tache.

Utilisez cette image comme motif à l'aide du menu Edition > Utiliser comme motif (image n°8). Pensez à le nommer justement, car il vous servira peut-être plus tard pour d'autres compositions.

Retournez vers votre image à travailler. Sélectionnez à nouveau le calque "Logo" avec Ctrl+clic. Dans le menu Edition, choisissez Remplir (image n°9). Remplissez donc le calque avec le motif personnalisé que vous venez de créer. Pour que l'effet ne soit pas trop visible, optez pour un taux d'opacité faible (30% convient), et n'oubliez pas de cocher conserver les zones transparentes (image n°10).

Appliquons un effet d'ombre portée au calque "Logo", Choisisesez une distance de 0px, pour donner l'impression que la lumière vient du dessus. La taille de l'ombre sera définie à 7px. Pour que l'effet ne soit pas trop sombre, l'opacité sera réglée à 60% (image n°11).

Voir le resultat.

Pour le motif du logo et le texte, blancs tout les deux, que vous choisirez (par exemple dans les formes prédéfinies et avec l'outil texte), nous allons appliquer un effet d'ombre interne, pour donner l'impression d'un découpage dans le rectangle.

Réduisez l'opacité à 50%, la distance à 2px et la taille à 5px (image n°12). Vous pouvez encore réduire si l'ombre est trop grosse.

Nous n'allons pas trop travailler sur le contenu. En effet, il sera surtout établi par les feuilles de style CSS, plus tard. Mais pour se donner une idée, il est utile de commencer dans photoshop.

Le menu sera vertical, il faut donc une séparation entre le menu et le contenu proprement dit (image n°13). Un trait léger (1px, en gris #CCC) sera suffisant (image n°14).

La suite de la composition réutilise les outils et effets déjà utilisés. A vous d'imaginer la suite.

Vous pouvez obtenir le fichier Photoshop (psd).

N'hésitez pas à poser vos questions sur le forum