Francis Chouquet Graphiste Lettering

Tutoriel Photoshop: Effet texte façon site web d’Apple

0

Je suis tombé hier dessus chez Veerle. C’est un très bon petit tutoriel, tout simple mais avec un rendu plutôt top. Alors, comme c’est en anglais et rapidement expliqué, je me suis dit que ça pourrait intéresser plusieurs d’entre vous de l’avoir en français. Donc, je m’y suis collé ! 😉 En fait, je l’ai légèrement modifié et je l’ai complété en vous offrant la version rollover du même bouton.

J’adore vraiment ces styles que je trouve tellement plus propre et pro que les glossy qui sont plutôt sur la pente descendante…. Enfin bon, commençons donc ce tutoriel:

Style texte sombre sur fond clair

1. Tout d’abord, ouvrez Photoshop, et créez un nouveau document de 400 pixels par 150 pixels.

2. Ensuite, on va placer les repères sur la grille pour avoir un texte inscrit dans une sorte de bouton, qui va faire 300 pixels de largeur et 50 de hauteur:

Reperes Photoshop-1

3. Maintenant, on va créer un rectangle qui va venir envelopper les repères que l’on a placé. La couleur de fond importe peu puisqu’on va lui ajouter un dégradé. Ici, la couleur est noire:

Rectangle-Noir

4. Vous allez ensuite ouvrir les styles de calque de Photoshop pour ce calque-ci, qui doit s’appeler « Forme 1 » si vous ne l’avez pas renommé. Pour cela, cliquez sur l’icône des styles de calque en bas de la fenêtre « calques », et choisissez, « options de fusion ».

Options-Fusion

Là. on va créer un dégradé pour notre rectangle, notre bouton. Donc, cliquez sur « incrustation en dégradé » et ouvrez la fenêtre même de la ligne « dégradé », pour pouvoir modifier les couleurs. On est donc là dans l’éditeur de dégradé et vous allez cliquer sur les petits pots de couleur, de chaque côté, sous la « palette », pour choisir les bonnes couleurs. Pour celle de gauche, vous allez remplacer le noir par le gris #999999 et le blanc de droite par le gris clair #cccccc. Vous devriez avoir le degradé suivant:

Degrade-Palette Degrade

5. Maintenant qu’on a notre fond, on va réaliser le morceau de texte qui donne toute la dimension à l’ensemble. Vous allez donc créer un nouveau calque, bien entendu, par-dessus celui du rectangle, et vous allez utiliser l’outil « Texte ». On va utiliser Myriad Pro comme police et #383838 comme couleur. Ecrivez un bout de texte dans le rectangle, avec le contenu que vous souhaitez. Vous devriez avoir le résultat suivant:

Bouton-Photoshop

6. Retournez dans les styles du calque, et cette fois-ci, vous allez choisir l’option « Ombre portée ». Le mode de fusion choisi est « normal », la couleur « blanc », l’opacité « 50% », l’angle « 90° », la distance « 1px », grossi « 0% » et la taille « 0px »:

Ombre-Portee

Validez le tout et l’affaire est jouée ! Retirez les repères de l’affichage ( Affichage > Extras ) et si vous avez bien tout suivi, vous devriez avoir le résultat suivant, avec votre texte:

Apple-Photoshop

Style texte clair sur fond sombre

Pour faire cet autre style, vous reprenez les points précédents avec les modifications suivantes:

1. Les couleurs du dégradé seront ici plus sombres. On prendra un #666666 pour le bas et un gris #999999 pour le haut.

2. Cette fois-ci la police sera blanche.

3. Pour l’ombre portée, vous allez devoir faire quelques modifications. Ici, on veut que l’effet de profondeur soit noir, pour contraster avec le blanc du texte, donc on choisira la couleur noir pour l’ombre portée. Ensuite, on va modifier l’angle pour aller sur du -90° pour donner l’effet de profondeur. Validez le tout et normalement, ce coup-ci, vous devriez avoir ça:

Apple-Photoshop-Sombre

C’est plutôt sympa non ? Et très propre je trouve. C’est vraiment le genre de tutoriel très simple qui peut vous faire aimer Photoshop. Réussir à avoir un bel effet, facilement et rapidement.

Voilà, en tout cas, j’espère que ça vous aura plu ! Et d’ailleurs, en passant, ça vous intéresse les tutoriels pour Photoshop ? Vous aimeriez en avoir plus souvent ? Je veux dire en dehors des tutos déjà prévus pour la réalisation de votre blog WordPress bien sûr ! Votre avis m’intéresse !

19 Commentaires

  • super bueno !
    merci Fran6…je sens qu’il va falloir que je me bloque une soirée pour faire du photoshop !
    à bientôt !

  • Simple et efficace ! J’adore 😉

  • Etant une buse en design, je suis fan de ce genre de tutoriel 🙂 Pour moi, c’est clair, fais en autant que tu le souhaite 🙂

  • Entièrement d’accord avec Matthieu M. des tutos en design je dis MERCI !!!

  • Une fois de plus, un très bon tuto ! Simple, Calir, Efficace ! Je serais vraiment ravi d’en voir plus souvent !

  • Merci pour les compliments. Je vais me remettre sérieusement à Photoshop dans les prochains mois donc vous risquez d’avoir de plus en plus de tutos de ce genre et peut-être faire comme j’ai fait jusqu’à présent pour WordPress… si j’ai le temps… 😉

  • Euh….je comprends pourquoi mon texte semble étiré alors que ce n’est que du 12 pt et il dépasse de la surface….help please tx

  • De quel texte parles-tu ? Je ne vois rien sur mon navigateur…

  • En fait, je parles du texte dans photshop. Lorsque je mets mon texte d’exemples c’est bcp trop grand et même en réduisant la police ça ne ressemble pas.

  • En fait, je voudrais simplement savoir la taille de Myriad Pro permettant d’obtenir l’effet.
    Merci

  • C’est vrai que je ne l’ai pas mentionné… C’est du 14 pixels ! 😉

  • Sympa ce tuto, merci 😉

    Sinon pour les polices utilisées sur les images de l’Apple Store, c’est du Myriad Pro également?

  • mimipunk > Visiblement oui, ce serait du Myriad Pro…

  • Depuis le temps que je comparais les polices! Merci 😉

  • Je dis: OUI OUI et OUI !
    Les tutoriels/tutoriaux sont vraiment utiles ! on a toujours quelque chose à en apprendre ! 😉

  • lea

    tuto très clair, très accessible, ne sautant aucune étape. Idéal pour un débutant comme moi. Bravo et merci !

    Et je me permets une petite question supplémentaire: comment créerais-tu un effet / une brosse de type « aluminium brossé » sur ton calque gris dégradé… afin d’obtenir un effet proche de celui réalasé sur le player last.fm (ex en haut à droite: http://www.last.fm/music/Daft+Punk/_/Make+Love)?

    d’avance merci !

  • Si ça vous intéresse, voilà une liste de 60 tutoriels Photoshop pour le texte :

    http://www.tunibox.com/tutorie.....texte.html

  • Hadrien

    Pour la police, Apple utilise Lucida grande dans Mac OS X. Elle n’existe pas sur Windows mais doit pouvoir se trouver sans peine…
    Je ne sais pas par contre s’ils l’utilisent pour le site, la différence entre Myriad pro et Lucida grande n’étant pas évidente.

Success, your comment is awaiting moderation.