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 !

Téléchargement des fichiers sources liés à ce tutorial

Veuillez vous connecter pour télécharger les fichiers sources

Article publié par Wonka

Vous aimez cet article? Partagez le !

Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

Questions et commentaires, Il y a 75 messages de forum.

Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

  • 6 avril 2009 19:40

    Très bon tuto =)

    Répondre

  • 7 avril 2009 00:47, par WAD

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

    Répondre

  • 7 avril 2009 04:34

    Ça sent le réchauffé :

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

    :P

    Répondre

    • 7 avril 2009 08:35, par Wonka

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

      Répondre

      • 10 avril 2009 20:31

        Ouais, un peu mieux. Mais la technique reste somme toute la même.

        Répondre

  • 7 avril 2009 07:24, par 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

    • 7 avril 2009 08:37, par 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

  • 7 avril 2009 10:57, par 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

    • 7 avril 2009 11:27, par 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

      • 7 avril 2009 19:14, par 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

        • 8 avril 2009 09:30, par 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

          • 8 avril 2009 18:36, par MØG

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

            Voir en ligne : MØG Folio

            Répondre

  • 7 avril 2009 15:04, par 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

    • 7 avril 2009 15:12, par 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

      • 7 avril 2009 19:46, par 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

        • 8 avril 2009 09:32, par 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

  • 7 avril 2009 16:14

    merci pour ce super tuto ! :)

    Répondre

  • 8 avril 2009 03:54, par 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

  • 8 avril 2009 11:22, par 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

    • 9 avril 2009 12:07, par wonka

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

      Répondre

  • 8 avril 2009 13:44, par Boon

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

    Superbe ton bouton wizard .... du bon boulot

    Répondre

  • 8 avril 2009 23:27, par 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

  • 9 avril 2009 02:09

    Tres bon tuto comme toujours, merci !!!

    Répondre

  • 9 avril 2009 19:05, par Gégéetcat

    Super tuto, merci, voici mon essai.

    Répondre

  • 13 avril 2009 12:20, par 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

  • 14 avril 2009 11:30, par thomeuxe

    superbe tuto !!!!! voila le mien :

    Répondre

  • 14 avril 2009 15:01

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

    Répondre

  • 15 avril 2009 10:38, par laurya

    bon tuto simple a réalisé ! :)

    Répondre

    • 15 avril 2009 17:31, par ingrid

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

      Répondre

      • 17 avril 2009 13:34, par Subaru192

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

        Répondre

  • 15 avril 2009 15:44

    Super tutto. Très simple. Bon rendu.

    Répondre

  • 16 avril 2009 10:45, par moi

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

    Répondre

    • 16 avril 2009 11:17, par 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

  • 16 avril 2009 21:40, par Ananda

    Bonsoir,

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

    Répondre

  • 22 avril 2009 23:30, par ROMAIN

    Répondre

  • 29 avril 2009 10:46, par morock

    Ecrivez votre message ici..

    Répondre

  • 29 avril 2009 18:15, par Vaynce

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

    voici mon image :

    Répondre

  • 30 avril 2009 10:48, par Votre pseudonyme

    Répondre

  • 4 mai 2009 11:49, par Votre pseudonyme

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

    Répondre

  • 8 mai 2009 02:06, par 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

  • 9 mai 2009 00:40, par al

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

    Répondre

    • 9 mai 2009 00:43, par al

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

      Répondre

  • 10 mai 2009 20:19, par 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

    • 11 mai 2009 09:35, par Wonka

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

      Répondre

      • 13 mai 2009 21:37, par mavis

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

        Répondre

  • 12 mai 2009 12:44, par farfadet33

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

    Répondre

  • 13 mai 2009 12:03, par 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

  • 14 mai 2009 09:51, par Votre pseudonyme

    Tutto simple avec rendu très intéressant !

    Répondre

  • 15 mai 2009 10:28, par 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

  • 24 mai 2009 02:34, par lki25

    Répondre

  • 26 mai 2009 17:36, par 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

  • 29 mai 2009 20:44, par yannouhwz

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

    Répondre

  • 2 juin 2009 00:16, par DrWax

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

    Répondre

  • 14 juin 2009 18:54, par Pouap

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

    Répondre

  • 15 juin 2009 20:48, par 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

  • 24 juin 2009 23:13, par 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

  • 30 juin 2009 13:48, par 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

  • 30 juin 2009 14:40, par Pecx

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

    Répondre

  • 2 juillet 2009 13:04, par Pecx

    J’ai poster ma petite contribution :)

    Répondre

  • 27 juillet 2009 23:13, par 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

  • 28 juillet 2009 22:57, par 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

  • 15 août 2009 05:11, par 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

  • 7 septembre 2009 13:36, par 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

  • 12 septembre 2009 15:19, par 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

  • 19 septembre 2009 16:09, par alain-Somniaque

    meme celui la jyarrive pas !!!

    Répondre

  • 21 septembre 2009 22:14, par xloadx

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

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

    Répondre

  • 5 octobre 2009 20:49, par 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

  • 11 décembre 2009 00:21, par [Radium]

    Merci pour ce tutoriel :)

    Répondre

  • 11 janvier 2010 12:11, par Hextazzix

    Super tuto merci beaucoup !!!

    Répondre

  • 19 janvier 2010 19:52, par anncey

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

    Répondre

  • 13 février 2010 00:18, par la_luciole34

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

    Répondre

  • 24 mars 2010 21:42, par webolive

    voilà ma créa : Merci pour le tuto

    Répondre

  • 15 avril 2010 01:11, par zoar

    merci.

    voila ma prod sur le theme de la degradation.

    Répondre

  • 22 septembre 2010 10:33, par 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

  • 2 janvier 2011 19:16, par Sb Bgz

    Très très bon tuto !

    Répondre

Ajouter un nouveau commentaire