Codage.
Cursus
• Retournez sur Photoshop et créez un document vide de dimension 865*600 (Largeur*Longueur). Utilisez le pot de peinture en remplissant votre calque 1 de la couleur #031f2f.
•Créez un nouveau calque et remplissez-le de la même couleur. Double-cliquez sur le Calque 2 et appliquez une Incrustation en Dégradé.
(#021926 - #020f16) Angle : 0°
•Créez un nouveau calque que vous remplissez de blanc (#ffffff). Double-cliquez dessus et appliquez une Incrustation en Motif. Pour ma part, j’ai utilisé un motif assez simple qui ressemble à une texture de cuir. J’ai baissé l’opacité à 26%.
• Utilisez l’outil de sélection Ellipse (Clique droit sur le rectangle) et l’angle en haut à gauche de votre document. Réalisé un ovale de telle façon à obtenir une forme comme ceci :
N’hésitez pas à utiliser la transformation de sélection (clique droit sur votre sélection) pour que cette dernière soit bien collez aux deux bords du document. Faites clique droit sur votre sélection, Intervertir et gommez la partie du haut de votre sélection pour avoir le résultat au-dessus. (N’oubliez pas de gommer sur le Calque 2 et 3).
• Gardez la sélection que vous avez et faites clique droit dessus puis Transformation de la sélection => Symétrie axe vertical. Créez un nouveau calque et remplissez au pinceau la partie basse de la sélection de la couleur blanche. Double-cliquez sur le calque 4 et appliquez une Incrustation en dégradé.
(#02601b - #dd0119) Mode de fusion : Couleur plus clair, Opacité : 11%, Angle 0°.
Passez le Calque 4 en mode Saturation avec une opacité de 71%.
•Dupliquez le Calque 4 (CTRL + J), passez le en mode Produit, avec une Opacité de 71%. Double-cliquez dessus et appliquez une incrustation de dégradé :
(#292d30 - #000000) Mode de fusion : Lumière Tamisée, Opacité 55%, Angle 0°.
• Prenez la baguette magique et cliquez (sur le calque 4 Copie) dans la zone non remplie. Dès que vous avez la sélection, intervertissez-la et passez sur le calque 2 et 3. Gommez sur les deux calque puis double cliquez sur le calque 2.
Appliquez une ombre porté : Opacité 100%, Utiliser l’éclairage global désélectionné, Angle 90°, Distance 1px, Grossi 0px, Taille 3px.
• Prenez à nouveau la baguette magique et cliquez (sur le calque 2) sur les deux coins en haut à gauche et en haut à droite puis intervertissez la sélection. Ensuite, faites clique droit sur votre sélection.
• Créez un nouveau calque que vous mettez au dessus du calque 2 et 3, remplissez le de blanc. Sélectionné une partie du blanc et supprimez la pour obtenir ceci :
Passez le calque en mode Produit et Mettez-lui une opacité de 45%.
Double-cliquez dessus et appliquez une incrustation en dégradé du noir au blanc. (Mode de fusion : Incrustation, Angle 90°, Échelle 100%.
Appliquez une ombre porté : Opacité 100%, Utiliser l’éclairage global désélectionné, Angle 90°, Distance 3px, Grossi 0px, Taille 3px.
• Nous arrivons aux dernières étapes maintenant. Passez sur le calque 2 et sélectionnez à nouveau les coins gauches et droits du haut. Passez sur le calque 1 et gommez ce que vous avez sélectionné.
• Gardez la sélection, intervertissez grâce au clique droit et créez notre dernier calque que vous allez place en première place (Tout en haut). A présent, faites clique droit sur la sélection, contour.
Faites ces réglages : 1px, intérieur #095279
Voilà, nous avons nos catégories, simples mais belles non ^^ ? Non T_T ? (Va bouder ailleurs)
Bon ok, j’vais vous aider pour le découpage mais c’est bien parce que je vous aime bien <.<.
• Sélectionnez avec l’outil rectangle la partie du haut qui constitue notre header catégorie jusqu’à la fin du dégradé que nous avons fait. Coupez-là (CTRL+X), créez un nouveau document (CTRL+N) et collez-là (CTRL+V). Enregistrez là en .PNG. Appelez-la, « TopCate ».
• A présent, sélectionnez la partie du milieu jusqu’au début du dégradé du vert au rouge. Réalisez le même procédé que plus haut pour la sauvegarder.
• Enfin, récupérez la partie du bas et sauvegardez la dans un nouveau document avec le même procédé.
Devinez à quoi va-t-on passer *o* ? Non pas encore à l’installation mouahahah, il faut que l’on fasse les titres des catégories, que l’on va faire en image !
• Pour ceux qui veulent les même polices que moi, téléchargez ces deux polices :
Blue Highway : http://www.dafont.com/fr/blue-highway.font
Exmouth : http://www.dafont.com/fr/exmouth.font
Installez-les dans votre dossier de police et passez sur Photoshop !
• Créez un document de taille : 893*93 (Largeur*Longueur).
Écrivez le nom de votre catégorie en taille 42px avec la police Blue Highway ou avec une autre assez large. (Pour ma part je l’ai écrit avec la couleur #053c5b) Centrez bien le nom puis double-cliquez sur le calque qui a été créé.
Contour = Extérieur, couleur : #022031
Ombre portée = Opacité : 37%, Utiliser l’éclairage global déselectionné, Angle 90°, Distance 2px, Grossi 0px, Taille 5px. Incrustation en dégradé : Normal, Inverser, Angle 90°.
(#031f2f - #053c5b)
• Dupliquez le calque, faites un clique droit dessus et faites « Effacer le style de calque ». A présent, double cliquez sur la duplication et appliquez une incrustation en dégradé.
Incrustation en dégradé : Du Noir au blanc, Superposition, Opacité 69°, Angle 90°.
• Dupliquez le calque à nouveau, faites un clique droit dessus et faites « Effacer le style de calque ».
Maintenant, appliquez une dernière incrustation en dégradé.
Incrustation en dégradé : Du Noir au blanc, Lumière Tamisée, Inverser, Angle 90°.
• Créez une nouvelle type, cette fois-ci on utilise Exmouth (Ou une autre assez légère, mince). Écrivez votre sous-titre de forum et placez-le au centre du titre de la catégorie.
Pour ma part j’ai mis :
Incrustation en couleur : #062b54
Lueur Externe : Superposition, Opacité 4%, Bruit 0%, couleur blanche
Ombre portée : Opacité 75%, Distance 2px, Grossi 1px, Taille 1px.
Au départ, je voulais vous laisser le champ libre mais mon but est de vous apprendre tout ce que j'ai fais pour ce thème, y compris les images New/No New/Lock ! Nous allons créer des images de ce type :
Police utilisée : Forte
• On y va ! Ouvrez un document de taille 44*80 (Largeur*Longueur).
• En faisant clique-droit sur l'outil Texte Horizontal, sélectionnez l'outil Texte Vertical.
• Sélectionnez la moitié du document en largeur et la totalité en longueur.
• J'ai pris une police de 33px, il faut qu'elle soit plus grande que la seconde donc n'hésitez pas à la faire assez grande. J'ai utilisé la couleur #053c5b pour le texte. Écrivez le mot "No".
• Double-cliquez sur le calque créée et Appliquez :
Une Ombre Portée = Opacité : 37%, Angle : 90°, Distance : 3px, Grossi : 0px, Taille : 1px.
Une Incrustation en Dégradé = Opacité : 100%, Angle : 0°, Echelle : 100%.
(#053c5b - #061f2d)
Placez le tout sur la moitié gauche du document (On raisonne en Largeur).
• Cliquez à nouveau sur l'outil Texte Vertical. Créer dans la seconde moitié un texte : On écrira "New". J'ai pris une police de 17px (Pratiquement la moitié), il faut qu'elle soit plus petite que la première ! J'ai utilisé la couleur #053c5b pour le texte.
• Double-cliquez sur le calque créée et Appliquez :
Une Ombre Portée = Opacité : 37%, Angle : 90°, Distance : 3px, Grossi : 0px, Taille : 1px.
Une Incrustation en Dégradé = Opacité : 100%, Angle : 0°, Echelle : 100%.
(#373c4f - #8a8c99)
• Déplacez cette typo juste à coté de la première, fusionnez les calques (CTRL + MAJ + E). Enregistrez le document en .PNG :)
• Pour la suite, je vous laisse réaliser la même chose en changeant les dégradés, Il faut plutôt choisir quelque chose de sombre pour Lock et quelque chose qui se démarque pour New !
Et voilà, on a nos images catégories et nos catégories, on va enfin passer à l’installation ;) !
Précédent Suivant
Étape 5A - Création graphique des catégories
J’ai délibérément séparé la création des Catégories en deux parties : Graphisme & Codage. Pourquoi ? Tout d’abord parce que ce serait trop long, deuxièmement parce que l’approche n’est pas du tout la même, ni même la réflexion d’ailleurs. Passons donc à la création GRAPHIQUE de nos catégories. Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Auteur : Taktiik
Création de nos catégories
• Retournez sur Photoshop et créez un document vide de dimension 865*600 (Largeur*Longueur). Utilisez le pot de peinture en remplissant votre calque 1 de la couleur #031f2f.
•Créez un nouveau calque et remplissez-le de la même couleur. Double-cliquez sur le Calque 2 et appliquez une Incrustation en Dégradé.
(#021926 - #020f16) Angle : 0°
•Créez un nouveau calque que vous remplissez de blanc (#ffffff). Double-cliquez dessus et appliquez une Incrustation en Motif. Pour ma part, j’ai utilisé un motif assez simple qui ressemble à une texture de cuir. J’ai baissé l’opacité à 26%.
• Utilisez l’outil de sélection Ellipse (Clique droit sur le rectangle) et l’angle en haut à gauche de votre document. Réalisé un ovale de telle façon à obtenir une forme comme ceci :
N’hésitez pas à utiliser la transformation de sélection (clique droit sur votre sélection) pour que cette dernière soit bien collez aux deux bords du document. Faites clique droit sur votre sélection, Intervertir et gommez la partie du haut de votre sélection pour avoir le résultat au-dessus. (N’oubliez pas de gommer sur le Calque 2 et 3).
• Gardez la sélection que vous avez et faites clique droit dessus puis Transformation de la sélection => Symétrie axe vertical. Créez un nouveau calque et remplissez au pinceau la partie basse de la sélection de la couleur blanche. Double-cliquez sur le calque 4 et appliquez une Incrustation en dégradé.
(#02601b - #dd0119) Mode de fusion : Couleur plus clair, Opacité : 11%, Angle 0°.
Passez le Calque 4 en mode Saturation avec une opacité de 71%.
•Dupliquez le Calque 4 (CTRL + J), passez le en mode Produit, avec une Opacité de 71%. Double-cliquez dessus et appliquez une incrustation de dégradé :
(#292d30 - #000000) Mode de fusion : Lumière Tamisée, Opacité 55%, Angle 0°.
• Prenez la baguette magique et cliquez (sur le calque 4 Copie) dans la zone non remplie. Dès que vous avez la sélection, intervertissez-la et passez sur le calque 2 et 3. Gommez sur les deux calque puis double cliquez sur le calque 2.
Appliquez une ombre porté : Opacité 100%, Utiliser l’éclairage global désélectionné, Angle 90°, Distance 1px, Grossi 0px, Taille 3px.
• Prenez à nouveau la baguette magique et cliquez (sur le calque 2) sur les deux coins en haut à gauche et en haut à droite puis intervertissez la sélection. Ensuite, faites clique droit sur votre sélection.
• Créez un nouveau calque que vous mettez au dessus du calque 2 et 3, remplissez le de blanc. Sélectionné une partie du blanc et supprimez la pour obtenir ceci :
Passez le calque en mode Produit et Mettez-lui une opacité de 45%.
Double-cliquez dessus et appliquez une incrustation en dégradé du noir au blanc. (Mode de fusion : Incrustation, Angle 90°, Échelle 100%.
Appliquez une ombre porté : Opacité 100%, Utiliser l’éclairage global désélectionné, Angle 90°, Distance 3px, Grossi 0px, Taille 3px.
• Nous arrivons aux dernières étapes maintenant. Passez sur le calque 2 et sélectionnez à nouveau les coins gauches et droits du haut. Passez sur le calque 1 et gommez ce que vous avez sélectionné.
• Gardez la sélection, intervertissez grâce au clique droit et créez notre dernier calque que vous allez place en première place (Tout en haut). A présent, faites clique droit sur la sélection, contour.
Faites ces réglages : 1px, intérieur #095279
Voilà, nous avons nos catégories, simples mais belles non ^^ ? Non T_T ? (Va bouder ailleurs)
Bon ok, j’vais vous aider pour le découpage mais c’est bien parce que je vous aime bien <.<.
• Sélectionnez avec l’outil rectangle la partie du haut qui constitue notre header catégorie jusqu’à la fin du dégradé que nous avons fait. Coupez-là (CTRL+X), créez un nouveau document (CTRL+N) et collez-là (CTRL+V). Enregistrez là en .PNG. Appelez-la, « TopCate ».
• A présent, sélectionnez la partie du milieu jusqu’au début du dégradé du vert au rouge. Réalisez le même procédé que plus haut pour la sauvegarder.
• Enfin, récupérez la partie du bas et sauvegardez la dans un nouveau document avec le même procédé.
Devinez à quoi va-t-on passer *o* ? Non pas encore à l’installation mouahahah, il faut que l’on fasse les titres des catégories, que l’on va faire en image !
Créer des images de catégories
• Pour ceux qui veulent les même polices que moi, téléchargez ces deux polices :
Blue Highway : http://www.dafont.com/fr/blue-highway.font
Exmouth : http://www.dafont.com/fr/exmouth.font
Installez-les dans votre dossier de police et passez sur Photoshop !
• Créez un document de taille : 893*93 (Largeur*Longueur).
Écrivez le nom de votre catégorie en taille 42px avec la police Blue Highway ou avec une autre assez large. (Pour ma part je l’ai écrit avec la couleur #053c5b) Centrez bien le nom puis double-cliquez sur le calque qui a été créé.
Contour = Extérieur, couleur : #022031
Ombre portée = Opacité : 37%, Utiliser l’éclairage global déselectionné, Angle 90°, Distance 2px, Grossi 0px, Taille 5px. Incrustation en dégradé : Normal, Inverser, Angle 90°.
(#031f2f - #053c5b)
• Dupliquez le calque, faites un clique droit dessus et faites « Effacer le style de calque ». A présent, double cliquez sur la duplication et appliquez une incrustation en dégradé.
Incrustation en dégradé : Du Noir au blanc, Superposition, Opacité 69°, Angle 90°.
• Dupliquez le calque à nouveau, faites un clique droit dessus et faites « Effacer le style de calque ».
Maintenant, appliquez une dernière incrustation en dégradé.
Incrustation en dégradé : Du Noir au blanc, Lumière Tamisée, Inverser, Angle 90°.
• Créez une nouvelle type, cette fois-ci on utilise Exmouth (Ou une autre assez légère, mince). Écrivez votre sous-titre de forum et placez-le au centre du titre de la catégorie.
Pour ma part j’ai mis :
Incrustation en couleur : #062b54
Lueur Externe : Superposition, Opacité 4%, Bruit 0%, couleur blanche
Ombre portée : Opacité 75%, Distance 2px, Grossi 1px, Taille 1px.
Réaliser son image new/No new/Sujet
Au départ, je voulais vous laisser le champ libre mais mon but est de vous apprendre tout ce que j'ai fais pour ce thème, y compris les images New/No New/Lock ! Nous allons créer des images de ce type :
Police utilisée : Forte
• On y va ! Ouvrez un document de taille 44*80 (Largeur*Longueur).
• En faisant clique-droit sur l'outil Texte Horizontal, sélectionnez l'outil Texte Vertical.
• Sélectionnez la moitié du document en largeur et la totalité en longueur.
• J'ai pris une police de 33px, il faut qu'elle soit plus grande que la seconde donc n'hésitez pas à la faire assez grande. J'ai utilisé la couleur #053c5b pour le texte. Écrivez le mot "No".
• Double-cliquez sur le calque créée et Appliquez :
Une Ombre Portée = Opacité : 37%, Angle : 90°, Distance : 3px, Grossi : 0px, Taille : 1px.
Une Incrustation en Dégradé = Opacité : 100%, Angle : 0°, Echelle : 100%.
(#053c5b - #061f2d)
Placez le tout sur la moitié gauche du document (On raisonne en Largeur).
• Cliquez à nouveau sur l'outil Texte Vertical. Créer dans la seconde moitié un texte : On écrira "New". J'ai pris une police de 17px (Pratiquement la moitié), il faut qu'elle soit plus petite que la première ! J'ai utilisé la couleur #053c5b pour le texte.
• Double-cliquez sur le calque créée et Appliquez :
Une Ombre Portée = Opacité : 37%, Angle : 90°, Distance : 3px, Grossi : 0px, Taille : 1px.
Une Incrustation en Dégradé = Opacité : 100%, Angle : 0°, Echelle : 100%.
(#373c4f - #8a8c99)
• Déplacez cette typo juste à coté de la première, fusionnez les calques (CTRL + MAJ + E). Enregistrez le document en .PNG :)
• Pour la suite, je vous laisse réaliser la même chose en changeant les dégradés, Il faut plutôt choisir quelque chose de sombre pour Lock et quelque chose qui se démarque pour New !
Et voilà, on a nos images catégories et nos catégories, on va enfin passer à l’installation ;) !
Précédent Suivant