Créer une illustration web design colorée avec Photoshop

Voici un tutoriel pour Photoshop destiné à la création d’une illustration web designe mutl-colore, technique simple mais efficace, la réalisation de ce tutoriel pour Photoshop ne vous prendra pas plus de 15 minutes chrono !

Je suis actuellement en recherche graphique pour créer une carte de visite ou tout autre support de communication pour mes services de web designer. J’ai essayé donc de chercher ce qui pouvait toucher aujourd’hui les potentiels clients tout en collant aux tendances graphiques actuelles. Dans cette recherche je suis tombé sur une illustration colorée que voici (voir ci-dessous). Ce tutoriel portera donc sur ce sujet, comment créer avec Photoshop une petite illustration simple, design et colorée pour présenter son talent de graphiste ;)

Ce qui est bien avec ce tutoriel c’est qu’il est d’une simplicité déconcertante, pas plus de 6 étapes pour le terminer, il ne vous prendra donc pas plus de 15 minutes chrono !

Et comme il s’agit d’un tutoriel Photoshop Wks.fr, le fichier source est téléchargeable en bas de cette page et totalement gratuit.

Allons, maintenant commençons :

ETAPE 1

J’ouvre mon logiciel Photoshop et je commence par créer un nouveau document sur fond noir. Je sélectionne l’outil des formes et je crée un rectangle sur la gauche de mon document.

Je choisis une couleur bleu-claire pour son remplissage.

ETAPE 2

Normalement, si je regarde la fenêtre des calques, deux calques sont présents, l’arrière plan ainsi qu’un calque forme 1 correspondant au rectangle précédemment créé.

Je clique avec le bouton droit de ma souris sur ce calque et je sélectionne l’option dupliquer ce calque.

Enfin je double clique sur le petit carre à gauche de ce nouveau calque pour modifier sa couleur de remplissage !

ETAPE 3

Je répète la même étape plusieurs fois pour remplir la totalité de mon document.

ETAPE 4

Je charge un brush sur mon Photoshop, j’essaye d’en trouver un vraiment orignal, pour cela je peux visiter les sites :

Ensuite je crée un nouveau calque, et je choisis une forme de pinceau. Avec ce pinceau (et une couleur d’avant plan noir) je crée une forme de façon à cacher les bandes de couleurs en bas à droite.

ETAPE 5

Je crée un nouveau calque, et je crée avec l’outil sélection et le pot de peinture une petite ligne (voir ci-dessous). Pour lui donner les couleurs des bandes j’ajoute simplement un style de calque : menu calque > style de calque > incrustation de dégradé (et pour la configuration du dégradé je sélectionne chacune des couleurs en suivant la correspondance).

ETAPE 6

Enfin j’utilise l’outil texte pour ajouter le nom de mon entreprise, mon slogan etc. J’utilise ici la couleur blanche qui vient contraster avec les couleurs vives de mon illustration. Effet garanti !

ETAPE 7

Pour terminer je vais créer un retour aux couleurs en créant un petit carré de chaque couleur en dessous de mon texte. Pour cela rien de plus simple.

Je duplique chaque rectangle de couleur :

Pour ce faire je sélectionne tous les calques correspondant aux calques des rectangles, je clique droit et sélectionne dupliquer. Mes calques sont toujours sélectionnés, je refais clique droit et fusionner les calques.

Ensuite je vais dans édition > transformation > homothétie et j’entre 20% comme pourcentage.

Mes bandes se retrouve bien rétrécies, il ne me reste plus qu’à les replacer en dessous du texte puis à couper les pixels en trop pour créer des formes en carrés.

Et voila mon illustration déjà terminée. Très simple non ?

Si vous avez réussi à faire ce tutoriel dans son ensemble, merci de penser à nous en publiant votre image pour nous aider à réussir nous aussi ce tutoriel ;)

Encore merci d’avoir lu ce nouveau tutoriel Photoshop publié sur wks.fr !

Partager cet article avec vos amis

Télécharger les fichiers Photoshop

Insrivez vous à la newsletter pour débloquer le lien de téléchargement des fichiers Photoshop. Si vous êtes déjà inscris, cliquez ici.

Votre email servira uniquement à la newsletter de wks (un envoi max / semaine). Elle ne sera jamais vendu ni loué. Vous pouvez vous désabonner à tout moment. En savoir plus

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

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

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

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

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

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publié par FastXXL

publié par Eltia

publié par noofa

publié par Syljay

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 75 commentaires publiés sur cet article
  • Très bon tuto =)

    Répondre
  • WAD

    Merci pour ce magnifique tuto, rapide, simple et superbe :)

    Répondre
  • Ça sent le réchauffé :

    http://www.wks.fr/Utilisation-des-silouhettes-et-des.html

    :P

    Répondre
    • Wonka

      Oui c’est la même technique, mais le résultat est mieux j’espère, non ?

      Répondre
      • Ouais, un peu mieux. Mais la technique reste somme toute la même.

        Répondre
  • Asti

    Hello superbe tuto !! Je voulais juste savoir une petite chose : Les couleurs utilisées pour les bandes, tu les as choisies dans une palette ou a l’oeuil ??

    Merci.

    Asti.

    Répondre
    • Wonka

      Oui car je suis un rebelle je sélectionne les couleurs comme ça :D Non la bonne technique, quand tu vois une image que tu aimes, au niveau ambiance et couleur tu l’enregistres sur ton PC, et quand tu as besoin d’une couleur tu utilises la pipettes de photoshop pour récupérer cette ambiance ! Pour cette réalisation j’ai fait comme ça !

      Répondre
  • MØG

    Jolie création. si tu cherche des inspirations pour ta future carte de visite, voila un site pour voir les tendances actuelles : cardobserver.

    Répondre
    • Wonka

      Merci Mog et oui je cherche quelque chose de vraiment sympa pour créer mes prochaines carte de visite.

      J’aime beaucoup le site que tu m’as passé ! Tiens ca me donne une idée pour un prochain article : Inspiration pour carte de visite, les 50 idées les plus originales :)

      En tout j’aime beaucoup les cartes du genre : http://cardobserver.com/gallery/elemental-architecture je pense que la mienne ressemblera à ca !

      Simple design mais surtout jouant sur les matières !

      Mog est ce que tu as fait tes cartes ? Si oui quel tendance à tu utilisées ?

      Répondre
      • MØG

        Alors voila ma contribution pour ton tuto Inspiration pour carte de visite :

        yearofcreativity et creativebits avec un petit tuto au passage de poongraphics

        J’ai jamais fais de carte de visite mais je me suis posés des questions sur la réalisation de certaines. Pour jouer sur les différents rendu de matière faut voir ça avec l’imprimeur quelles sont les possibilités. Enfin quant tu auras fini, un petit compte-rendu de ton expérience serais top pour les autres :-D

        Voir en ligne : MØG Folio

        Répondre
        • Wonka

          C’est exactement ce que je compte faire Mog, pour le moment je suis en phase de réflexion pour trouver une idée vraiment originale alliant les matières au design.

          A la suite je pense faire un article / tuto du début (réflexion) à la création, au premier contact avec l’imprimeur jusqu’à la réception des dites cartes !

          Bref un article qui devrait en intéresser plus d’un en effet ;)

          Merci pour ton aide Mog !

          Répondre
          • MØG

            Pour ma part,j’attends cette série d’article avec impatience ;-)

            Voir en ligne : MØG Folio

            Répondre
  • nomis43

    Salut, je voudrais pas jouer les boulet qui sait tout mais il y a une faute dans le texte de ta carte. C’est Contactez Moi et pas contacter moi ^^

    Répondre
    • wonka

      Et moi je ne voudrais pas jouer les boulets mais il semble que contacter moi et contactez moi sont deux formulations corrects ;)

      Le match : CONTACTER MOI :

      http://www.google.fr/search ?hl=fr&q=%22contacter+moi%22&meta=

      518 000 résultats

      CONTACTEZ MOI :

      http://www.google.fr/search ?hl=fr&q=%22contactez+moi%22&btnG=Rechercher&meta=

      2 570 000 résultats

      Bon, ok le Z est plus utilisé que le R mais il me semble bien que les deux sont corrects !

      Sinon milles excuses pour cette coquille !

      Répondre
      • Marlb

        Pour avoir été repris sur ma copie de Bac et après explication de mon prof de français,

        On dit + Contactez moi que contacter moi (j’avais fait la même « faute » que toi Wonka :p)

        Car on peut remplacer par Mordez moi mais Mordre moi ne le fait pas !!!

        Mon prof m’as dit que les deux été rentrés dans la langue française, mais que grammaticalement « Contactez moi » est mieux ...

        Sinon Bravo pour la composition j’adore !!!!

        Répondre
        • Wonka

          Merci pour ce cours d’orth :p merci également à ce prof pointilleux !

          Et oui merci quand même de parler un tit peu du graphisme, hihi !

          Répondre
  • merci pour ce super tuto ! :)

    Répondre
  • Girou

    vraiment super tuto ! comme d’habitude bravo wonka !

    voila pour ma part (j’ai trouvé mon nouveau fond d’écran grace a ce tuto ;))

    http://img16.imageshack.us/img16/9307/fonddcranstyle.jpg

    Répondre
  • Wizard

    tres belles couleurs que tu as choisi...c’est sympa tout ca par contre moi j’ai fait un mix de deux tutos ( meme 3 tutos je crois)pour me marrer et ca donne ca

    j’ai adoré le style carbone de ton bouton vraiment du bon bouleau simple et classe et comme je faisais les deux tutos en meme temps (bouton black et illustration wed design colore) j’ai mixé le tout c’est pas forcement le mieux a faire mais bon... je vais finir par devenir DJ...lol @ + et merci pour tout

    Répondre
    • wonka

      Remarque c’est très original donc bravo :) et merci de l’avoir ajouté à la galerie !

      Répondre
  • Boon

    J’adore t’as compo Wonka !!! je vais m’y mettre tout de suite :)

    Superbe ton bouton wizard .... du bon boulot

    Répondre
  • japou

    Magnifique tuto...

    Pour la faute d’orthographe, il suffit d’inverser et tout le monde a raison :

    Contactez-moi ! ou Me contacter !

    Et voilà !

    Répondre
  • Tres bon tuto comme toujours, merci !!!

    Répondre
  • Gégéetcat

    Super tuto, merci, voici mon essai.

    Répondre
  • kom1dune

    Juste pour remettre un (autre) point sur le i au niveau de l’orthographe :

    On dit : « Contactez-moi » et on dit aussi « Me contacter »... Ce n’est pas la même chose. Le 1er est la conjugaison à l’impératif et l’autre est la conjugaison à l’infinitif.

    Ceci dit... le tuto (même si on sent la source d’un ancien tuto WKS ^^) est sympa et la réalisation finale est vraiment très jolie.

    P.S. : Merci MOG pour les sites de cartes, on est toujours en recherche d’inspiration quand on est webdesigner.

    Répondre
  • thomeuxe

    superbe tuto !!!!! voila le mien :

    Répondre
  • super je me suis bien amusé à créer ce tuto pour un forum.

    Répondre
  • laurya

    bon tuto simple a réalisé ! :)

    Répondre
    • ingrid

      bonjour, le tuto est top mais comment font ceux qui ont intégré une photo ?? merci pour votre aide.

      Répondre
      • Subaru192

        En changeant le style de fusion de ta photo (en la mettant en « incrustation » par exemple).

        Répondre
  • Super tutto. Très simple. Bon rendu.

    Répondre
  • moi

    c sympa mais un « graphiste » (si je puis dire)qui se sert de brushe c’est quand meme completement la loose...

    Répondre
    • Wonka

      Pas plus qu’autre chose ! les bruses sont des ressources qu’il peut utiliser pour agrémenter ses productions.

      Ignorer les ressources qui peuvent l’aider à travailler, ca c’est la loose ;)

      Répondre
  • Ananda

    Bonsoir,

    Petit essai, je viens de m’inscrire, j’apprend beaucoup et je m’amuse bien avec tout ces tutos, merci.

    Répondre
  • ROMAIN

    Répondre
  • morock

    Ecrivez votre message ici..

    Répondre
  • Vaynce

    Merci pour ce tuto ! Il a carément la classe !!

    voici mon image :

    Répondre
  • Votre pseudonyme

    Répondre
  • Votre pseudonyme

    c bien pour une carte de visite merci pour se tuto ;)

    Répondre
  • Mavis

    ça c’est sur c’est une super tuto moi j’ai galère pour faire le petit trait mais malheureusement j’ai pas réussi et j’ai fait ça a ma sauce bon je suis pas du tout dans le web design ni quoi que se soit mais j’adore toute les possibilité que photo shop nous offres donc j’ai essayé de faire :) (je trouve que c’est pas mal pour une débutante XD)

    Répondre
  • al

    pour moi, ça n’a pas été 15mn, mais... l’après-midi. j’ai encore appris des choses. MERCI, Wonka.

    Répondre
    • al

      désolé, j’ai oublie de coller ce que j’ai fais.

      Répondre
  • mavis

    euh re moi j’ai toujours pas réussi a faire ce trait lol si quelqu’un pourrais m’aide merci encore :)j’ai publier ce que j’ai essaye de faire mais bon j’arrive toujours pas a faire ce foutu trait XD

    Répondre
    • Wonka

      Oui mais quel trait ? Celui en dessous des barres et à coté gauche du texte ?

      Répondre
      • mavis

        oui suis du bat a gauche mais j’ai tant bien que mal reussi a le faire merci encore :)

        Répondre
  • farfadet33

    début de fly ayant pour theme une soirée d’anniversaire et le magicien d’oz

    Répondre
  • Votre pseudonyme

    Joli tuto bien serviable...wks est une machine de guerre bien rôdée..

    Un viewable transformé ici :

    http://benjamin-grappin.com/

    Répondre
  • Votre pseudonyme

    Tutto simple avec rendu très intéressant !

    Répondre
  • zelator

    Super tuto, tres simple a réaliser pour un bon rendu (faut juste etre patient pour trouver un brush a son gout:p)

    Voici le mien réaliser pour ma copine.

    http://www.wks.fr/stockpix/477/3780.jpg

    Répondre
  • lki25

    Répondre
  • Nathaliiie

    Bonjour, le tuto et le résultat sont excellents, mais je me permets quand même de corriger la faute d’orthographe (qui fait très mauvaise impression surtout sur une carte de visite) - il faudrait écrire « contactez-moi » ou, si tu tiens à avoir l’infinitif, « me contacter ».

    Répondre
  • yannouhwz

    [img]http://nsa07.casimages.com/img/2009/05/29/090529084418131402.jpg[/img]

    Répondre
  • DrWax

    Merci à toi d’aider ainsi les débutants (et les autres)

    Répondre
  • Pouap

    Ecrivez votre message ici...Je n’arrive pas à créer la petite bande de dégradé :(

    Répondre
  • es10

    Bonjour wonka !!! Très bon tuto sauf que moi je bloque à la première étape !!! loool. Je ne comprends pas très bien ce que tu veux dire par « Je clique avec le bouton droit de ma souris sur ce calque et je sélectionne l’option dupliquer ce calque. Enfin je double clique sur le petit carre à gauche de ce nouveau calque pour modifier sa couleur de remplissage ! » Si tu pourrais m’apporter ton aide sa serait génial !! Merci bcp

    Répondre
  • valbmb

    voila mon travail pas très bien reussi mai bon je prend toute critiques http://www.wks.fr/stockpix/477/3901.jpg

    Répondre
  • Pecx

    Salut, moi j’ai un problème lors de la création de la petite ligne en dégradé, comment faire pour sélectionner les couleurs ?

    Je remercie d’avance ceux qui pourront m’aider.

    Cordialement

    Répondre
  • Pecx

    je n’arrive pas a sélectionner les calques . =O Comment faire svp ?

    Répondre
  • Pecx

    J’ai poster ma petite contribution :)

    Répondre
  • darkfooty

    Bonsoir :D

    Excellent tuto ! Bravo et merci beaucoup :)

    Voila ce que j’ai fait : http://sd-1.archive-host.com/membres/images/79035639034574813/concou_skin_v3-600.jpg

    Répondre
  • Clouchette

    Très bon tuto mais idem je ne trouve pas très évident la façon dont à été réaliser la ligne de dégradé ! (je ne vois pas comment créer mon dégradé avec mes couleurs en fait...) mais sinon le rendu est très sympa ^^ Bonne continuation !

    Répondre
  • Votre pseudonyme

    Jai le même problème avec la ligne de dégrader je ne sais pas comment faire pour que cela fite !

    Répondre
  • SeEd

    Merci pour ce tuto et pour ce site, qui m’apportent énormément, je recherche ça depuis fort longtemps, merci Wonka !!!

    Juste une petite note en passant pour ta créa... « ContacteZ-moi pour toute commande » et « non contacteR moi... » ;)

    Bye !

    Répondre
  • Votre pseudonyme

    Petit chenapant, tu as oublié de préciser le petit reflet en dessous des carrés tout en bas à droite :lol : pour les autres on duplique le calque, CTRL + T click droit ensuite symétrie axe horizontal et un baisse ce calque un plus plus bas ensuite on mets un masque de fusion et un cache un peu le bas avec un dégradé noir vers blanc :)

    Répondre
  • alain-Somniaque

    meme celui la jyarrive pas !!!

    Répondre
  • xloadx

    Voici ma contribution, jespère qu’elle vous plaira.

    http://www.wks.fr/stockpix/477/4180.jpg

    Répondre
  • Myosotis

    Moi aussi j’ai essayé, facile et tout joli, il est normal que j’ai eu du mal à m’en empêcher, alors, voilà :

    Répondre
  • [Radium]

    Merci pour ce tutoriel :)

    Répondre
  • Hextazzix

    Super tuto merci beaucoup !!!

    Répondre
  • anncey

    j’adore, ce tutoriel est super bien expliqué et il est très simple !

    Répondre
  • la_luciole34

    Voilà ma création, n’hésitez pas à donner votre avis http://img7.imageshack.us/img7/803/colordesign.jpg

    Répondre
  • webolive

    voilà ma créa : Merci pour le tuto

    Répondre
  • zoar

    merci.

    voila ma prod sur le theme de la degradation.

    Répondre
  • langkif

    Merci pour le tuto et le psd ! Je me suis permis de l’utiliser dans un de mes mailings, et ca en jette !

    Longue vie à ce très bon site !

    Répondre
  • Sb Bgz

    Très très bon tuto !

    Répondre
Ajouter un nouveau commentaire