Codage.
Cursus
Nous allons commencer par modifier notre Footer. Ce dernier est généré par les Templates : Overall_Footer_Begin et Overall_Footer_End. « Begin » gère l’affichage du bloc du footer tandis que « End » va gérer les liens de copyright qu’il contient et la clôture du corps du forum et de la page web. Cette petite partie concernant le Footer n’aura aucune manipulation HTML puisque tout est déjà à notre portée !
Avant de commencer la seconde manipulation sur Photoshop, vous allez avoir besoin d’enregistrer cette image :
Nebula
• Ouvrez Photoshop et créez un nouveau document de dimensions 948*127. (Largeur * Longueur)
• A l’aide de l’outil pot de peinture, remplissez le document de la couleur #17344f.
• Collez la nébuleuse à une position propice, pour ma part je l’ai positionné comme ceci :
• Passez le calque de la nébuleuse en superposition et gommez le haut du calque avec le second motif de la gomme :
• Faites en sorte qu’on est une petite fondue sur le haut. J’ai obtenu ceci :
• Maintenant, nous allons réaliser la typographie où vous marquerez le nom de votre forum. J’ai de nouveau utilisé Blue Highway en 43px de couleur #053c5b. Je l’ai placé dans le coin gauche de l’image en bas.
J’ai appliqué un contour : #275d7f, Position : Extérieur, Taille : 1px, Opacité : 57%.
J’ai appliqué une lueur externe : #297198, Opacité : 23%, Grossi : 0%, Taille : 21px, Superposition.
J’ai appliqué une ombre portée : Opacité : 70%, Angle : 90°, Distance : 2px, Grossi : 0%, Taille : 5px.
Enfin, une incrustation en dégradé : Inverser.
(#031f2f -- #053c5b)
• Dupliquez le calque de texte et effacez le style de calque.
Passez-le en Lumière tamisée avec une opacité de 57%.
Appliquez une incrustation en dégradé du noir au blanc en mode Superposition. Ajoutez-lui une opacité de 70%.
• Dupliquez le calque de texte et effacez le style de calque.
Passez-le en Densité couleur + avec une opacité de 57%.
Appliquez une incrustation en dégradé du noir au blanc en mode Lumière Tamisée.
• Enfin, ajoutez une typo plutôt légère - j’ai pris Exmouth – où vous ajouterez un sous-titre et positionnez-là au-dessus de la typo que nous avons fait. Taille de police : 34px ; Couleur : #035786.
Appliquez une Incrustation en couleur : #086fe2.
Appliquez une ombre portée : Opacité : 75%, Angle : 90°, Distance : 2px, Grossi : 0%, Taille : 1px.
Appliquez une lueur externe : #ffffff, Opacité : 4%, Grossi : 0%, Taille : 10px, Superposition.
• Fusionnez tous vos calques (CTRL + MAJ + E) et enregistrez le document en .jpg
• Direction votre forum test.
Nous allons compléter la partie :
La balise que nous allons modifier est l’ID « page-footer ». Nous modifierons également ses liens donc le css devient :
• Ajoutez à #page-footer un fond de couleur #17344f et votre image. Une bordure sur le haut de 1px (#095279) . Les dimensions seront : 948*122 donc on ajoutera une marge intérieure sur le haut de 5px. Enfin, ajoutez une ombre portée sur le texte.
• Modifions les liens du Footer en leur ajoutant une taille de police (10px) et une couleur : #086fe2.
Vous aviez oublié le !important ? Ce n’est pas grave, c’est un réflexe qui va venir très rapidement vous verrez Wink ! Validez votre feuille de Style et :
La prochaine étape ne contient pas de manipulation, juste un petit bilan de ce que nous avons fais, appris et ce que l’on va faire, ce n’est pas une excuse pour la zapper, elle servira de mémo ;) !
Précédent Suivant
Étape 7 - Élaboration du Footer
C'est plutôt optionnel de réaliser un Footer aujourd'hui, pourtant je trouve que ça collait parfaitement à notre esprit sur le forum alors je me suis dis : Je vais leur apprendre un truc super classe ! Et en effet, le rendu est vraiment classe ! Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Auteur : Taktiik
Création graphique d'un Footer
Nous allons commencer par modifier notre Footer. Ce dernier est généré par les Templates : Overall_Footer_Begin et Overall_Footer_End. « Begin » gère l’affichage du bloc du footer tandis que « End » va gérer les liens de copyright qu’il contient et la clôture du corps du forum et de la page web. Cette petite partie concernant le Footer n’aura aucune manipulation HTML puisque tout est déjà à notre portée !
Avant de commencer la seconde manipulation sur Photoshop, vous allez avoir besoin d’enregistrer cette image :
Nebula
• Ouvrez Photoshop et créez un nouveau document de dimensions 948*127. (Largeur * Longueur)
• A l’aide de l’outil pot de peinture, remplissez le document de la couleur #17344f.
• Collez la nébuleuse à une position propice, pour ma part je l’ai positionné comme ceci :
• Passez le calque de la nébuleuse en superposition et gommez le haut du calque avec le second motif de la gomme :
• Faites en sorte qu’on est une petite fondue sur le haut. J’ai obtenu ceci :
• Maintenant, nous allons réaliser la typographie où vous marquerez le nom de votre forum. J’ai de nouveau utilisé Blue Highway en 43px de couleur #053c5b. Je l’ai placé dans le coin gauche de l’image en bas.
J’ai appliqué un contour : #275d7f, Position : Extérieur, Taille : 1px, Opacité : 57%.
J’ai appliqué une lueur externe : #297198, Opacité : 23%, Grossi : 0%, Taille : 21px, Superposition.
J’ai appliqué une ombre portée : Opacité : 70%, Angle : 90°, Distance : 2px, Grossi : 0%, Taille : 5px.
Enfin, une incrustation en dégradé : Inverser.
(#031f2f -- #053c5b)
• Dupliquez le calque de texte et effacez le style de calque.
Passez-le en Lumière tamisée avec une opacité de 57%.
Appliquez une incrustation en dégradé du noir au blanc en mode Superposition. Ajoutez-lui une opacité de 70%.
• Dupliquez le calque de texte et effacez le style de calque.
Passez-le en Densité couleur + avec une opacité de 57%.
Appliquez une incrustation en dégradé du noir au blanc en mode Lumière Tamisée.
• Enfin, ajoutez une typo plutôt légère - j’ai pris Exmouth – où vous ajouterez un sous-titre et positionnez-là au-dessus de la typo que nous avons fait. Taille de police : 34px ; Couleur : #035786.
Appliquez une Incrustation en couleur : #086fe2.
Appliquez une ombre portée : Opacité : 75%, Angle : 90°, Distance : 2px, Grossi : 0%, Taille : 1px.
Appliquez une lueur externe : #ffffff, Opacité : 4%, Grossi : 0%, Taille : 10px, Superposition.
• Fusionnez tous vos calques (CTRL + MAJ + E) et enregistrez le document en .jpg
• Direction votre forum test.
Création d'un Footer (Codage)
Nous allons compléter la partie :
La balise que nous allons modifier est l’ID « page-footer ». Nous modifierons également ses liens donc le css devient :
• Ajoutez à #page-footer un fond de couleur #17344f et votre image. Une bordure sur le haut de 1px (#095279) . Les dimensions seront : 948*122 donc on ajoutera une marge intérieure sur le haut de 5px. Enfin, ajoutez une ombre portée sur le texte.
EXERCICE
? "page-footer" va prendre les propriétés et valeurs suivantes :
? Un fond de couleur #17344f .
? Un fond avec l'image que nous venons de créer
? Une bordure vers le haut de 1px, solide de couleur #095279.
? Ayant pour dimensions 948*122
? Une ombre portée sur le texte avec X=1, Y=1, Z=1 et pour couleur #000
? Une marge intérieure sur le haut de 5px
? "page-footer" va prendre les propriétés et valeurs suivantes :
? Un fond de couleur #17344f .
? Un fond avec l'image que nous venons de créer
? Une bordure vers le haut de 1px, solide de couleur #095279.
? Ayant pour dimensions 948*122
? Une ombre portée sur le texte avec X=1, Y=1, Z=1 et pour couleur #000
? Une marge intérieure sur le haut de 5px
• Modifions les liens du Footer en leur ajoutant une taille de police (10px) et une couleur : #086fe2.
Vous aviez oublié le !important ? Ce n’est pas grave, c’est un réflexe qui va venir très rapidement vous verrez Wink ! Validez votre feuille de Style et :
La prochaine étape ne contient pas de manipulation, juste un petit bilan de ce que nous avons fais, appris et ce que l’on va faire, ce n’est pas une excuse pour la zapper, elle servira de mémo ;) !
Précédent Suivant