Création d'une bannière web

Dans ce tutoriel, vous allez créer une bannière dans Adobe Photoshop pour découvrir quelques principes de base de Photoshop comme l'utilisation des formes et des styles de calque, et l'exportation d'un projet.

Vous pourrez utiliser le modèle fourni et les techniques abordées ici pour créer une bannière pour votre blog ou votre chaîne YouTube, un en-tête d'e-mail, une bannière publicitaire, et bien d'autres choses encore.

Pour débuter ce projet, nous partirons du fichier de modèle fourni. Sélectionnez Fichier > Ouvrir, puis accédez au fichier. Sélectionnez-le et cliquez sur Ouvrir.

Dans le panneau Calques, Photoshop a automatiquement créé un nouveau calque de forme
contenant le cercle que vous avez tracé.

Nous allons modifier la couleur de la forme pour qu'elle ressemble davantage à un œuf. Dans le panneau Propriétés qui s'est ouvert une fois la forme créée, cliquez sur cette case de couleur et choisissez une couleur de fond pour le cercle.

À l'aide de l'outil Déplacement, placez le cercle au centre de la page. Un repère commenté magenta peut apparaître pour signaler que le cercle est centré.

Ajoutons maintenant un effet artistique au cercle à l'aide d'un style de calque, afin qu'il ressemble plus à un œuf. Les styles de calque permettent d'améliorer des objets en appliquant des effets tels que des ombres, des contours, des lueurs, etc.

Pour appliquer un style de calque, vérifiez que le calque est bien sélectionné, et choisissez Calque > Style de calque > Ombre interne. Dans la boîte de dialogue qui s'affiche, vous pouvez régler les paramètres afin d'obtenir l'effet souhaité, ou même essayer d'autres effets courants comme Lueur externe ou Ombre portée.

Lorsque le résultat vous convient, cliquez sur OK. L'effet Ombre interne apparaît maintenant sur l'image, mais aussi sous le calque de la forme dans le panneau Calques, ce qui permet de l'afficher, le masquer, le modifier ou le supprimer aisément.

Passons au jaune de l'œuf. Il nous faut un autre cercle, mais comme celui-ci a déjà l'effet souhaité, le plus simple est de le dupliquer et de le modifier ensuite. Vérifiez que le calque de la forme est sélectionné dans le panneau Calques et choisissez Calque > Dupliquer le calque. Nommez-le « Yolk » et cliquez sur OK.

Ouvrez le panneau Propriétés en cliquant ici. Cliquez sur cette case de couleur et choisissez une teinte jaune pour remplir le cercle. Cliquez sur l'onglet du panneau Propriétés pour le fermer.

Notre jaune d'œuf est trop gros, il faut le réduire. La commande Transformation de Photoshop permet de redimensionner le contenu du calque sélectionné, indépendamment du reste de l'image. Comme vous avez sélectionné le calque « Yolk » et l'outil Déplacement, vous allez voir le cadre Transformation autour du jaune d'œuf. Si vous ne le voyez pas, choisissez Edition > Transformation manuelle. Maintenez la touche Maj. enfoncée pour conserver un cercle parfait, puis faites glisser un angle pour réduire la forme. Cliquez à l'intérieur du cadre en veillant à ne pas cliquer sur cette icône au centre, puis faites glisser le cercle pour le positionner ici. Cliquez sur la coche dans la barre d'options pour quitter le mode de modification.

Maintenant, enregistrons la bannière.

Sélectionnez Fichier > Enregistrer sous. Veillez à choisir un format Photoshop et à cocher l'option Calques pour disposer d'un fichier multicalque que vous pourrez modifier ultérieurement. Cliquez ensuite sur Enregistrer.

Vous pouvez exporter une autre copie dans un format adapté à la publication sur un site web, comme le format JPEG, PNG ou même SVG. Sélectionnez Fichier > Exportation > Exporter sous.

La boîte de dialogue qui s'affiche permet de choisir le format du fichier, JPEG en l'occurrence. Cliquez sur Tout exporter et choisissez l'emplacement où exporter les fichiers, puis cliquez sur Exporter.

Vous pouvez aussi exporter certaines parties de la bannière — par exemple, uniquement l'œuf. Nous devons d'abord regrouper les calques de forme d'œuf pour qu'ils ne soient pas traités comme un seul objet. Dans le panneau Calques, cliquez sur le premier calque de forme, puis sur le dernier en maintenant la touche Maj. enfoncée. Choisissez Calque > Associer les calques. Cliquez avec le bouton droit de la souris sur le calque du groupe et choisissez Exporter sous. Dans la boîte de dialogue Exporter sous, sélectionnez un format tel que PNG ou SVG — qui conviennent tous les deux pour un site web — et cliquez sur Tout exporter. Seule la forme d'œuf est alors exportée, sans le reste de la bannière.

Vous trouverez plus d'informations sur l'exportation d'illustrations depuis Photoshop dans d'autres tutoriels Photoshop sur le site Adobe.com.

Grâce au modèle fourni et aux techniques que vous venez d'apprendre, vous pouvez désormais créer une bannière pour votre blog, un en-tête d'e-mail, un habillage de chaîne YouTube, une bannière publicitaire, etc. Amusez-vous à explorer les possibilités offertes par Photoshop !