Aujourd’hui nous allons voir comment faire pour créer un “bandeau d’angle” pour son Site/Blog avec Photoshop CS.

Temps : 10 min
Niveau : Débutant
Logiciel utiliser : Photoshop CS3

Nota Bene : Pour les “Experts” qui passeraient par ici, cette méthode n’est qu’une parmi d’autres, je suis certain que vous auriez fait autrement, ou même mieux qui sais. Dans mes tutoriaux, j’essais de faire en sorte que “n’importe quelle personne” puisse réaliser ce que je montre, d’où le grand nombre de screenshot ^^. Néanmoins, même pour les débutants, le mieux serrait d’avoir quelques connaissances de bases, ne serait-ce que pour savoir ou sont les outils, ce qu’est un calque etc..

Pour commencer nous allons créer un nouveau document/image Photoshop.

(Fichier/nouveau ou Pomme+n) au format 1024×768 Pixel 72 Dpi.

N’oubliez pas d’afficher votre image en “taille réel” pour mieux travailler.

Pour commencer, nous allons changer la couleur de fond de notre image en utilisant une couleur sombre (#58636d). Faites un double clic dans le petit cadre “couleur de premier plan”. Vous n’avez plus qu’a y entrer le code héxadécimale (#58636d). Sans le # bien sur ^^.

Ensuite sélectionnez l’outil “Pot de peinture” dans la barre d’outils et cliquez avec dans votre image.

Voilà, nous avons un joli fond “Grisé” pour continuer.

Sélectionnez maintenant l’outil “Forme” dans les outils.

Puis dans les options en haut (au dessus de l’image) sélectionnez “Rectangle”, Style “Aucun” et couleurs “Blanc” et tracez votre rectangle.

Maintenant choisissez l’outil “Texte” et cliquez avec dans votre rectangle, écrivez votre texte. (Vous pouvez le déplacer une fois écrit en cliquant sur l’outil “Déplacement” et en utilisant les touches fléchées de votre clavier pour bien le centrer.

Maintenant, nous allons intégrer une petite étoile. Sélectionnez l’outil “Forme” et dans les options secondaire au dessus (comme pour le rectangle un peu plus haut) choisissez votre forme.

N’oubliez pas de régler les options sur “Proportions définies” pour que votre étoile soit proportionnelle.

Tracez la et déplacez la dans votre barre.

Maintenant sélectionnez votre calque de texte et faites un clic droit dessus en choisissant “Option de fusion” puis cochez “Ombre portée” en suivant les réglages du screenshot.

Nous allons maintenant dupliquer le calque de votre rectangle blanc. Pour ce faire faites un clic droit sur le calque en question et choisissez “Dupliqué le calque”. Une fois dupliqué il apparait au dessus du premier calque avec le même nom suivi de “Copie”. Double cliquez sur la vignette de votre copie dans la gestion des calques pour faire apparaitre la fenêtre des couleurs. Entrez y ensuite la couleurs suivante (#7c8083). Votre calque doit être devenu gris.

Sélectionnez maintenant l’outil “Baguette magique”.

Tout en maintenant la touche “Pomme” enfoncée, cliquez sur la copie du calque que vous avait faite, cela dois le sélectionner comme sur le screenshot.

Dans la barre des menus, choisissez (Séléction/Modifier/Contracter).

Entrez comme valeur (3 pixel)

Un décalage est maintenant apparent entre la sélection et le rectangle gris. Vous allez maintenant pixeliser votre calque de copie. Clic droit dessus puis choisissez “Pixélisé le calque”. Une fois le calque pixélisé, vous avez toujours votre sélection active, appuyez sur la touche “Supprimer”, pour effacer ce que contiens la sélection et faire apparaitre ce qui se trouve derrière votre premier calque blanc en laissant une bordure grise autour.

Nous allons maintenant ajouter un petit dégardé au notre barre principale (la blanche). Pour ce faire, faite un clic droit sur le calque et choisissez “option de fusion”, puis cochez incrustation de dégradée et choisissez une opacité de 10%. Validez.

Notre barre est maintenant quasiment terminée, il ne reste qu’a la placer dans le bon sens et lui ajouter un petit effet d’ombrage. Vous aller sélectionner tous les calques que nous avons utilisé sauf l’arrière plan. Pour ce faire, cliquez sur chacun d’eux en maintenant la touche “Pomme” enfoncée. Une fois tout sélectionné, faite “Pomme+G” ce qui les groupera en un seul dossier.

Voila. Nous avons maintenant un joli dossier avec tout nos calques, c’est déjà plus propre. Par la suite vous pourrez même nommer chacun d’eux pour vous y repérer plus facilement en cas de retouche.

Nous allons maintenant pivoter notre image pour qu’elle se place dans l’angle droit. Si vous préférez le gauche, faite l’inverse ^^.

Sélectionnez votre groupe dans le menu des calques et cliquez sur l’outil “Déplacement”. Placez ensuite le pointeur du mulot sur un des angle de la sélection en l’éloignant un petit peu jusqu’à ce que le curseur se transforme en une petite double flèche incurvée puis cliquez. Dans le menu des options en haut vous devez maintenant avoir comme sur le screenshot une case “Définir la rotation”. Indiquez lui 40°. Vous devez maintenant avoir votre barre a la bonne inclinaison.

Avec la l’outil de déplacement et les touches de votre clavier (ou votre mulot), déplacez votre barre dans l’angle droit.

C’est presque terminé, nous allons ajouter un effet d’ombre pour un peu plus de réalisme. Sélectionnez le calque de votre barre et cliquez avec le bouton droit/option de fusion. Choisissez “Ombre portée” et appliquez lui les réglages du screenshot. Validez.

Nous allons en profiter pour ajouter un effet à notre étoile également. Faite comme précédemment pour arriver au option de fusions de l’étoile. Choisissez “Bisotage/Estampage” et avant toute chose décochez l’option “Utilisé l’éclairage globale”. Entrez ensuite les réglages du screenshot.

Vous devez maintenant avoir une petite ombre sous la barre et un petit dégradé sur l’étoile. Une dernière touche d’effet et on pourra conclure. Vous allez faire un clic droit sur le calque de votre barre et choisir l’option “Dupliqué le calque”.

Vous allez avoir une copie de votre claque de barre au dessus de l’original maintenant avec “Copie” d’ajoutez dans son nom. Placez le en (drag and drop) en dessous de votre calque original. Ouvrez le menu déroulant des effet spéciaux de votre calque principal en cliquant sur la petite flèche à coté de Fx et décochez “Ombre portée”.

Vous devez maintenant avoir deux calques pour la barre, un original en premier avec l’option “Ombre portée” de décochée et un calque de copie en dessous dans lequel on a rien touché.

Vous aller maintenant “Pixelisé” le calque “copie” afin de pouvoir agir sur l’ombre de la barre.

Sélectionnez votre calque pixélisé si ce n’est pas déjà fait et dans les outils sélectionnez “La gomme”. Dans les options cliquez sur “Formes” et entrez un diamètre de 190% avec 0% de dureté.

Placez votre gomme comme indiquée sur le screenshot et cliquez une fois pour effacer un petit bout d’ombre.

Répétez l’action pour l’autre coin. A ce stade vous pouvez enregistrer votre travail si vous ne l’avez pas déjà fait.

Nous avons terminé, il ne reste plus qu’a l’exporter pour pouvoir l’utiliser sur votre site.

Pour ce faire, fermer votre groupe s’il est déroulé. Décochez le calque d’arrière plan. Avec l’outil “Rectangle de sélection” sélectionnez votre barre en entier dans l’angle.

Une fois sélectionné, dans le menu cliquez sur “Edition/Copier avec fusion”.

Toujours dans le menu, dans “édition” faites “nouveau” sans changer aucun paramétre. Par défaut il prendra la taille de votre sélection d’avant.

Une nouvelle fenêtre vierge vient d’apparaitre.

Faites “Edition/Coller”.

Décochez le calque d’arrière plan pour avoir la transparence et voila ^^. Il ne vous restes plus qu’a faire un “enregistré sous” en choisissant le type de fichier qui vous convient. En sachant que dans l’idéal pour garder les effets d’ombre et la transparence il faut exporter sous .png. Si vous voulez exporter en .gif transparent il ne prendra pas en compte l’ombre portée.

Ressources :