AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -31%
Casque sans fil à réduction de bruit ...
Voir le deal
274.01 €

    [Photoshop] Boutons d'interface avec incrustation Lumineuse

    Ayfoth
    Ayfoth
    MasculinAge : 30Messages : 1319

    le Lun 18 Nov 2019 - 9:33



    Bonjour, dans ce tutoriel dans allons voir comment créer des boutons de style laqué avec un élément incrusté lumineux.


    Rendu Final
    [Photoshop] Boutons d'interface avec incrustation Lumineuse Sans_t10

    Etape 1 : Les éléments de base


    1. Création du document
    On commence donc par créer un nouveau document de taille 1024*768 px avec une résolution de 72.

    Je préfère travailler sur grand format, puis de réduire ensuite à la taille souhaitée.


    Pour vous aider vous pouvez mettre un repaire vertical et un horizontal pour avoir un point centré.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse R3O8FDJ[Photoshop] Boutons d'interface avec incrustation Lumineuse BDZbVxw[Photoshop] Boutons d'interface avec incrustation Lumineuse I8cMidv[Photoshop] Boutons d'interface avec incrustation Lumineuse TV8SSOW[Photoshop] Boutons d'interface avec incrustation Lumineuse YeSLf8G



    2. Le fond de la création
    Nous allons utiliser un fond assez clair pour accentuer les effets de contrastes.
    On clique donc sur l'outil de remplissage (Pot de Peinture) et on change la couleur principale en #e0e0e0. Ensuite on créer un nouveau calque de remplissage gris.

    Pour cela c'est simple : Calque > Nouveau Calque de remplissage > Couleur Unie > Gris


    Ensuite on va ajouter une incrustation en dégradé sur le fond, dégradé linéaire, noir vers blanc avec une opacité de 2%.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse YCUTj0k[Photoshop] Boutons d'interface avec incrustation Lumineuse Hd2oWMP



    3. Nos éléments basiques
    A ce moment nous créons nos formes basiques nécessaires à notre création.
    On commence par choisir notre forme pour l'exemple je prends la forme Rectangle arrondie.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse K6XCFBI
    Ensuite je vais changer un peu les paramètres pour dessiner depuis le centre, pour cela me suffit de cliquer sur la petite flèche noire en haut.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse F4cPmg2[Photoshop] Boutons d'interface avec incrustation Lumineuse ZCFl4kC
    Et je dessine mon plus grand rectangle (le contour extérieur autrement dit) en une couleur un peu plus sombre que le fond. Ainsi grâce à notre repère et à notre paramètre on peut directement le centré.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse 1UY7CO7
    Ensuite j'en dessine un autre , qui sera notre centre intermédiaire, en blanc.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse DI8WR8S
    Et pour finir j'en dessine un troisième en gris foncé qui sera notre centre.


    4. Les effets intérieurs
    Pour donner plus de réalisme on va jouer avec les ombres pour donner du relief.
    On va donc allez jouer dans les options de fusion de notre forme blanche. On commence avec une incrustation en dégradé linéaire de couleurs #d4d4d4 vers #f7f7f7.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse BsmhxBA
    On continue avec une ombre interne de couleur noir, avec une opacité de 8%, un angle de -90° et une distance et taille de 8px.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse KgcYFuR
    Et on finit par une ombre portée avec une opacité de 16%, un angle de 90°, une distance de 3px et une taille de 10px.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse GaTozc4[Photoshop] Boutons d'interface avec incrustation Lumineuse Sif2aDq


    5. Les effets en dégradés
    Nous allons maintenant donner un peu de relief.
    Pour commencer on va dans les options de fusion de la plus petite forme. On va se faire une incrustation en dégradé linéaire de couleur #dedede vers #ededed.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse Anze6iF
    Puis on va régler de l'ombre interne blanche en opacité 60%, angle -90°, distance de 4 px et une taille de 5px.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse UdJWU5j
    Puis une ombre portée blanche en opacité 60%, angle -90°, distance de 2px et taille de 5px.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse UXx11nd[Photoshop] Boutons d'interface avec incrustation Lumineuse FlB1jRr
    Et maintenant on s'occupe du relief de la plus grande forme.
    Pour commencer on règle le calque avec Opacité de fond à 0%.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse Kgc6TGh
    Puis on lui met une ombre interne noire d'opacité 5%, avec un angle de 90°, une distance de 5px et une taille de 21px.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse QeKupY2
    Puis on lui ajoute une ombre portée noire d'opacité 7%, avec un angle de -90°, une distance de 3px et une taille de 5px.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse CcsQQrR[Photoshop] Boutons d'interface avec incrustation Lumineuse O1ydTnx


    6. Ajoutons plus d'ombre
    Sur cette partie nous allons accentuer le relief grâce aux ombres.
    Pour commencer on duplique notre forme blanche et on règle son opacité à 23%. On lui enlève tous les styles qui ont été copiés et on lui met une incrustation couleur noire.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse Rzyr2bD
    On place ce calque en dessous du calque d'origine.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse 6SAPyDK
    Et on va le bouger de 50px vers la gauche ou la droite au choix, pour cela une petite astuce on le bouge d'un cran en restant appuyer sur Alt Gauche.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse 14qhDf3
    Ensuite sur ce calque on créer un masque d'ecretage
    [Photoshop] Boutons d'interface avec incrustation Lumineuse W6to93W
    Puis on lui applique un contour progressif de 27px (CTRL Droide + Alt Droite + D)
    [Photoshop] Boutons d'interface avec incrustation Lumineuse O2LR3ef[Photoshop] Boutons d'interface avec incrustation Lumineuse 4bUffKN


    Incrustation Lumineuse

    1. On commence donc par écrire notre texte ou à mettre un brush comme on veut avec une couleur gris foncé. Pour le tuto j'utilise la police bariol.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse BQAy0YV
    On commence par lui attribué une incrustation dégradé Noir-Blanche Linéaire.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse Q2SlMol
    Puis on applique une incrustation de couleur #65b5f0 en opacité 83%.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse YppUs48[Photoshop] Boutons d'interface avec incrustation Lumineuse IwF18mI

    2. Nous allons renforcer l'effet lumineux maintenant.
    On applique donc une lueur interne de couleur #7fc9ff en Densité Couleur -, une opacité de 30%, une source centre, une taille de 10px et un contour Demi-cercle
    [Photoshop] Boutons d'interface avec incrustation Lumineuse 4wXtyQm
    Puis on lui met un Biseautage et Estampage. Taille de 4px, Angle 90°, Elévation 50°, Opacité des modes des tons clairs 70% et opacités des modes tons foncés 20%.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse Cp93CQM[Photoshop] Boutons d'interface avec incrustation Lumineuse 4BPsu7c

    3. Puis on lui donne un peu de volume.
    On lui applique une lueur externe #b5b5b5 avec une opacité de 100%, mode de fusion Normal et taille à 5px.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse I4HHa5i
    Ensuite on ajoute une ombre portée, mode normal avec une couleur blanche avec une distance de 9px et une taille de 5px ainsi qu'un angle de 90°.
    [Photoshop] Boutons d'interface avec incrustation Lumineuse A1pO1oB


    Et voilà c'est fini. Plus qu'à redimensionner selon vos besoins.

    [Photoshop] Boutons d'interface avec incrustation Lumineuse Sans_t10




    [Photoshop] Boutons d'interface avec incrustation Lumineuse Oyl7
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5680

    le Mar 24 Déc 2019 - 12:38

    Ca me semble tout bon, merci du tuto Ayfoth !




      La date/heure actuelle est Sam 28 Mar 2020 - 13:03