Créer une bannière web
Apprenez à créer une bannière dans Photoshop à l’aide de calques de forme et de styles de calque. Utilisez ces compétences pour créer l’en-tête d’un blog, d’une publicité ou d’un e-mail, ou pour mener à bien tout autre projet dans Photoshop.
Publié le
Dans ce tutoriel, vous allez créer une bannière web 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 blogue 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.
Cette fenêtre se rapporte à une fonction très utile d'importation de ressources dans le panneau Bibliothèques Creative Cloud de Photoshop.
Pour en savoir plus sur les Bibliothèques Creative Cloud, vous pouvez cliquer sur ce lien.
Comme nous n'allons pas importer de ressources pour ce tutoriel, vous pouvez cliquer sur Annuler.
Nous allons créer un œuf à partir d'une série de formes, en commençant par un cercle.
Les outils de création de formes se trouvent ici, dans la palette d'outils.
Cliquez longuement sur l'outil Rectangle, puis sélectionnez l'outil Ellipse.
Ces outils permettent de créer toutes sortes de formes vectorielles, ce qui est parfait pour une illustration comme un œuf, car les formes vectorielles sont adaptables et facilement modifiables.
Créez un cercle sur la page tout en maintenant la touche Maj. enfoncée.
La touche Maj. permet d'obtenir un cercle parfait.
Dès que les dimensions vous conviennent, relâchez le bouton de la souris, puis la touche.
Un nouveau calque de forme contenant le cercle est apparu dans le panneau Calques.
Nous allons le nommer afin d'identifier et d'organiser les calques plus facilement.
Double-cliquez sur le nom du calque, saisissez « Blanc d'œuf » et appuyez sur Entrée ou Retour.
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.
Fermez le panneau Propriétés en cliquant sur son onglet.
À 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.
Choisissez Calque > Dupliquer le calque.
Nommez-le « Jaune d'œuf » 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 étant trop gros, il va falloir le réduire.
La commande Transformation de Photoshop permet de redimensionner le contenu du calque sélectionné, indépendamment du reste de l'image.
Le calque Jaune d'œuf et l'outil Déplacement étant toujours sélectionnés, choisissez Édition > Transformation manuelle.
Maintenez la touche Maj. enfoncée pour conserver un cercle parfait, puis faites glisser un angle pour réduire la forme.
Relâchez le bouton de la souris, puis la touche Maj.
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.
Assurez-vous de choisir un format Photoshop et de cocher l'option Calques pour disposer d'un fichier multicalque que vous pourrez modifier ultérieurement.
Cliquez ensuite sur Enregistrer.
L'option Maximiser la compatibilité permet d'enregistrer un fichier compatible avec les versions antérieures d'Adobe Photoshop ainsi que d'autres programmes.
Si vous ne savez pas vraiment comment le fichier sera utilisé, il est conseillé de laisser l'option Maximiser la compatibilité cochée.
Cliquez sur OK.
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, choisissez la destination de l'exportation, puis cliquez sur Exporter.
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 blogue, un en-tête d'e-mail, un habillage de chaîne YouTube, une bannière publicitaire , etc.
Explorez les possibilités offertes par Photoshop tout en vous amusant !
Cliquez ici pour en savoir plus sur Creative Cloud abonnement Équipe.
