Créer un logo pour votre site internet avec Photoshop

Avec ce tutoriel Photoshop vous apprendrez à réaliser un logo bleu / noir à utiliser pour votre site Internet.

Je vais vous expliquer comment créer un logo pour votre site Web.

Photoshop - 238 ko
Fichier PSD tutorial 76
Cliquez pour téléchargez le fichier que nous avons utilisé dans ce tutorial.

ETAPE 1

Ouvrir un nouveau document : dans notre exemple nous utilisons une zone de travail de 400 sur 200 pixels, nous remplissons ensuite l’arrière plan de noir. Nous créons ensuite notre premier texte, ici nous utilisons la police Impact.

ETAPE 2

Nous allons remplir notre texte avec deux couleurs.

ETAPE 3

Vous allez maintenant ajoutez un contour blanc de 4 pixels (Calque > style de calque > contour).

ETAPE 4

Ajoutez par dessous le calque un rectangle arrondi blanc.

ETAPE 5

Ajoutez votre slogan avec l’outil texte, utilisez la même couleur que dans le titre.

ETAPE 6

Vous pouvez bien évidemment agrémenter votre logo d’un petit reflet style Web 2.0.

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 26 commentaires publiés sur cet article
  • Tchiorem26

    je trouve bete k’il ne soit pas plus précis, je debute justement pour crée des banniere, et je n’arrive pas a crée le debordement blanc qui ce trouve sur vos photos, et le rectangle non plus.

    si possible contacter moi Par Mail. j’ai photoshop cs2

    Répondre
    • Wonka

      Pour la bordure je suis desolé mais je peux rien ajouter, tout est dit dans le tutorial.

      Il faut utiliser le style de calque, et cela sur le calque texte, ajout d’une bordure de 4 pixels (stroke).

      Pour le rectangle utilises simplement l’outil rectangle dans la barre des outils sur la gauche de ton ecran.

      Bonne chance !

      Répondre
  • Je suis débutant en matière de graphisme, j’ai photoshop cs2 et je remercie du fond du coeur l’auteur du tutorial, j’ai réussi à créer enfin un bau logo avant c’était nul les logos que je faisait était nul par rapport à ceui que je viens de créer grace au tutorial.

    Répondre
    • Wonka

      Je suis content que mon tutorial t’ai aidé ;)

      Répondre
  • Mercccccccccccccccciiiiiiiiiiiiiiiiiiiiiiiiiiiiiii tout est excellent très beau simple un grand merci à vous merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci

    Répondre
    • Wonka

      Vive le spam :) mais c’est gentil quand même :p

      Répondre
  • Merci pour ce tuto, vraiment pas mal ...

    Mais comment fait-tu pour passer de l’étape 5 a la 6 ?

    Répondre
    • Wonka

      Il faut ajouter un dégradé sur le texte en séparent évidemment le style gris et le style bleu, puis ajouter le reflet grâce à l’outil ellipse. J’ajoute une ellipse par dessus je resupere la selection de mon texte, j’inverse ma selection et je supprime la partie de mon ellipse qui sert pas. Puis je passe le reglet en opacité 80% voir moins.

      Répondre
      • maroof

        D’ailleurs le . du .com dans l’étape 6 est bouffé par le contour du calque du desus !

        Répondre
        • Wonka

          Ah oui je n’avais même pas remarqué ! Mais bon ce n’est pas très dure à corriger !

          Répondre
      • machin

        comment supprime tu la partie de l’ellipse quine sert pas ?

        Répondre
  • LP

    Ce tuto est super sauf qu’il manque un truc essentiel pour les vraiment debutant comme moi ^^ xD :: : Mettre le chemin vers ou il faut aller pour faire ce que vous dites : ex : "Ouvrir un nouveau document, dans notre exemple nous utilisons une zone de travail de 400 sur 200 pixels, nous remplissons ensuite l’arrière plan de noir. Nous créons ensuite notre premier texte, ici nous utilisons la police Impact. " ??

    Répondre
    • stefou89

      c’est vrai que plus de précisions serai mieux, je débute également et c’est vrai que l’effet rendu cartonne, mais la pratique tendu. juskà l’étape 3 ca va, mais aprés le rectangle arrondi jtrouve pas. jvais chercher d’autres tutoriaux sur le net pour ca mais bon, il est vrai que si tout était clair et précis, ces tutoriaux serait vraiment parfait.

      Répondre
      • Pierre

        Pour le rectangle arrondi tu as un outil juste en dessous de ton outil texte, tu laisse ton clic gauche enfoncé dessus et tu verra apparaitre d’autre outils, dons le rectangle arrondi.

        Répondre
  • MØG

    Le logo est simple à faire pour un rendu élégant, mais je comprends que le peu d’explication, rebute les débutants.

    Répondre
  • DjPxo

    voila ma petite réalisation vous en pensez quoi ?

    Répondre
    • Wonka

      Pas trop mal ! Cependant le bas est peu trop coupé et le texte en bas à gauche me semble peu lisible !

      Répondre
  • calimeroooo

    nul ce tutoriel, qui pour moi n’en est pas un. Juste t’expose ton travail qui est pas mal d’ailleur.

    Répondre
    • Lucas

      J’adore ta critique sèche qui expose par la suite un compliment... x)

      C’est vrai que pour le coup, tu es sympa de nous partager un tuto mais on voit que tu n’as vraiment pas pris la peine de détailler tes étapes.

      Sinon, merci pour le net.

      Répondre
  • Guidz06

    Réponse à Caliméroooo et Lucas :

    Si vous avez mieux et plus détaillé à proposer, allez-y, lancez votre site web, qu’il soit aussi agréable et facile d’accès que celui du Sieur Wonka, et faites-nous rêver avec vos tutoriels ! Si vous n’arrivez pas a créer un bête texte avec un contour blanc et un encore plus bête rectangle arrondi avec, alors que faites-vous sur photoshop ? Il n’est certes pas donné à tout le monde de maîtriser PS mais quand on est autodidacte il faut assumer et faire preuve d’initiative ! Sur ces bonnes paroles, merci à Wonka pour ses tutoriels !

    Répondre
  • olivier

    pourrai tu bien expliker de letape 5 a 6 sinon le reste est parfai

    Répondre
    • Romain

      Bonjour, Pour le reflet de l’étape 6, il faut que tu fasse un calque ovale sur lequel tu dois appliquer un masque de fusion. Ensuite, avec l’outil dégradé (les couleurs par défaut doivent être le noir et le blanc) tu appliques un dégradé. Tu obtiens l’effet de réflexion.

      Voir en ligne : Designmylogo.org

      Répondre
  • Votre pseudonymedana

    bonjour, je suis aussi debutante mais je m’en sort pas mal.. mais comme j’ai la version en anglais .. je n’arrive pas a ecrire sur mon rectangle.. comment faire ??

    Répondre
  • kevin

    Pour créer un effet dit web 2.0 il faut tout d’abord :

    1- récupérez la sélection du texte (ici photoblog.com) pour récupérer une sélection :

    menu/sélection/récupérer la selection (attention à bien être sur le bon calque !)

    2- Ensuite créez un nouveau calque, sélectionnez l’outil dégradé, dans votre palette des couleurs sélectionnez la couleur blanche dans le menu dégradé en haut, sélectionnez bien le style de dégradé couleur/transparent

    3- tirez votre dégradé de haut en bas

    4- desélectionnez (ctrl+d sur windows ou cmd+d sur mac ou menu/selection/desélectionner

    5- prenez l’outil de selection elliptique

    6- faite une selection

    7- faite supprimer

    réduisez l’opacité ou essayez différents mode d’incrustation, le resultat peux être parfois étonnant.

    Répondre
  • Testing BOX

    salut : )

    Un grand merci pour ton aide, c’est vraiment sympa de partager tes compétences avec les novices comme moi !!

    Merciiii

    Répondre
  • Dessine moi un logo

    Beaucoup de talent, bravo à vous ! je vous joint un site de création de logo http://www.dessine-moi-un-logo.com

    Répondre
Ajouter un nouveau commentaire