Comment créer un en-tête de site Web professionnel dans Photoshop

Photoshop CC 2014 est un outil idéal pour concevoir des images professionnelles pour votre site Web, y compris des bannières. Lors de la conception de votre première bannière, gardez le design simple afin que le graphique ne soit pas surchargé avec trop d'informations visuelles. Si votre entreprise a des couleurs d'entreprise et une police d'entreprise, vous pouvez certainement les utiliser dans votre bannière.

Étape 1

Lancez Photoshop. Appuyez sur "Ctrl-N" ou sélectionnez "Nouveau" dans le menu Fichier. Dans la boîte de dialogue, spécifiez la hauteur et la largeur de votre bannière, par exemple 900 pixels de large et 150 pixels de haut. Cliquez sur OK."

Étape 2

Sélectionnez une couleur d'arrière-plan unie pour la bannière si vous le souhaitez. Pour ce faire, cliquez sur l'icône "Couleur de premier plan" dans la barre d'outils et sélectionnez une couleur, puis cliquez sur "Outil rectangle" et faites-la glisser sur toute la bannière. Dans ce didacticiel, cependant, nous superposerons deux dégradés au lieu d'utiliser un arrière-plan uni.

Étape 3

Cliquez sur l'outil "Dégradé" dans la boîte à outils. Cliquez sur le menu "Remplir" dans la barre d'options et sélectionnez le dégradé noir et blanc parmi les préréglages disponibles. Cliquez n'importe où au-dessus de la bannière dans le canevas et faites glisser le curseur sous la bannière. Relâchez le bouton de la souris pour appliquer le dégradé.

Étape 4

Cliquez sur l'outil « Texte horizontal » dans la boîte à outils. Faites glisser le curseur sur la bannière pour créer une zone de texte. Utilisez les menus de la barre d'options pour spécifier une police, une taille de police et une couleur. Faites glisser la zone de texte afin qu'elle soit centrée sur le côté gauche de la bannière.

Étape 5

Sélectionnez "Ouvrir" dans le menu Fichier et sélectionnez n'importe quelle image sur votre ordinateur que vous souhaitez utiliser pour votre bannière, comme un logo d'entreprise, une photo de vous-même ou un produit que vous vendez. Lorsque l'image s'ouvre, sélectionnez "Dupliquer" dans le menu Calque. Remplacez la destination par votre fichier d'en-tête, qui s'appellerait "Sans titre-1" à moins que vous ne l'ayez déjà enregistré. Cliquez sur "OK" pour ajouter l'image en tant que nouveau calque à votre bannière.

Étape 6

Sélectionnez "Transformer" dans le menu Edition, puis cliquez sur "Échelle". Dans la plupart des cas, l'image entière ne sera pas visible sur la bannière étroite, mais son contour est visible une fois que vous avez sélectionné « Echelle ». Faites glisser n'importe quel coin du contour de l'image pour le redimensionner pour votre bannière. Maintenez la touche "Shift" enfoncée tout en faisant glisser pour verrouiller son rapport hauteur/largeur. Appuyez sur Entrée." Faites glisser l'image pour qu'elle se trouve sur le côté droit de la bannière.

Étape 7

Cliquez sur l'icône "Couleur de premier plan" dans la barre d'outils pour ouvrir le sélecteur de couleurs. Cliquez n'importe où sur le côté droit de la bannière pour faire correspondre sa couleur dans le sélecteur de couleurs, puis cliquez sur "OK".

Étape 8

Sélectionnez l'outil « Rectangle » dans la boîte à outils. Cliquez sur le menu "Remplir" puis sélectionnez l'icône "Dégradé" en haut des options du menu. Faites glisser le curseur sur la bannière juste à l'intérieur du côté gauche de l'image jusqu'au bord gauche de la bannière. Le fait un rectangle avec un dégradé en utilisant la couleur que vous avez assortie de l'image.

Étape 9

Localisez le calque "Rectangle 1" dans le panneau Calques, qui est le calque contenant le rectangle de dégradé que vous venez d'ajouter. Faites glisser ce calque vers le bas pour en faire le troisième calque à partir du haut - en dessous du "Calque 1" et du calque contenant votre texte. Cliquez sur le menu "Opacité" en haut du panneau Calques et faites glisser le curseur pour qu'il soit d'environ 50 pour cent. Rendre le dégradé supérieur semi-transparent lui permet de fusionner avec le dégradé en dessous, créant ainsi un arrière-plan riche.

Étape 10

Sélectionnez le calque contenant votre texte dans le panneau Calques. Cliquez sur le menu "Calque", sélectionnez "Style de calque", puis cliquez sur "Bevel & Emboss". Assurez-vous que le menu Style est défini sur "Emboss" et faites glisser le curseur "Profondeur" vers la gauche - environ "225" pour cent - pour ajouter seulement un peu de cet effet au texte.

Étape 11

Cliquez sur l'option "Satin" dans la fenêtre Style de calque. Pour ce style, utilisez un mode de fusion de "Multiplier" et réduisez l'opacité à environ "15" pour cent. Cela combine le style satiné avec le style gaufré. Ajustez les paramètres si vous le souhaitez et cliquez sur "OK".

Enregistrez l'image en tant que bannière optimisée pour le Web en sélectionnant « Enregistrer pour le Web » dans le menu Fichier. Sélectionnez « JPEG » dans le menu Format et utilisez une qualité d'image comprise entre 75 et 80 %. Cela crée une image avec une petite taille de fichier, qui est rapidement chargée par n'importe quel navigateur Web, sans sacrifier la qualité de l'image. Cliquez sur "Enregistrer" et sélectionnez un emplacement pour stocker le fichier sur votre ordinateur. Après avoir fermé Photoshop, ajoutez le fichier à votre page Web.