lundi 6 avril 2009
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 !
-
Créer une illustration web design colorée avec Photoshop
6 avril 2009 19:40
-
Créer une illustration web design colorée avec Photoshop
7 avril 2009 00:47, par WAD
Merci pour ce magnifique tuto, rapide, simple et superbe
Voir en ligne : Bannière WKS
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
7 avril 2009 04:34
Ça sent le réchauffé :
http://www.wks.fr/Utilisation-des-silouhettes-et-des.html
:P
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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.
Voir en ligne : MØG Folio
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
7 avril 2009 16:14
merci pour ce super tuto !
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
9 avril 2009 02:09
Tres bon tuto comme toujours, merci !!!

Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
9 avril 2009 19:05, par Gégéetcat
Super tuto, merci, voici mon essai.

Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
14 avril 2009 11:30, par thomeuxe
superbe tuto !!!!!
voila le mien :
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
14 avril 2009 15:01
super je me suis bien amusé à créer ce tuto pour un forum.
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
15 avril 2009 10:38, par laurya
bon tuto simple a réalisé ! :)
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
15 avril 2009 15:44

Super tutto. Très simple. Bon rendu.
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
22 avril 2009 23:30, par ROMAIN
-
Créer une illustration web design colorée avec Photoshop
29 avril 2009 10:46, par morock
Ecrivez votre message ici..
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
29 avril 2009 18:15, par Vaynce
Merci pour ce tuto ! Il a carément la classe !!
voici mon image :

Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
30 avril 2009 10:48, par Votre pseudonyme
-
Créer une illustration web design colorée avec Photoshop
4 mai 2009 11:49, par Votre pseudonyme
c bien pour une carte de visite
merci pour se tuto
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
12 mai 2009 12:44, par farfadet33

début de fly ayant pour theme une soirée d’anniversaire et le magicien d’oz
Voir en ligne : Trip de Teuf
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
14 mai 2009 09:51, par Votre pseudonyme

Tutto simple avec rendu très intéressant !
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
24 mai 2009 02:34, par lki25
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
29 mai 2009 20:44, par yannouhwz
[img]http://nsa07.casimages.com/img/2009/05/29/090529084418131402.jpg[/img]
Voir en ligne : Titre de votre site Internet
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
2 juin 2009 00:16, par DrWax
Merci à toi d’aider ainsi les débutants (et les autres)

Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
30 juin 2009 14:40, par Pecx
je n’arrive pas a sélectionner les calques . =O
Comment faire svp ?
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
2 juillet 2009 13:04, par Pecx
J’ai poster ma petite contribution
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
19 septembre 2009 16:09, par alain-Somniaque
meme celui la jyarrive pas !!!
Voir en ligne : http://leopard94.jimdo.com
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
21 septembre 2009 22:14, par xloadx
Voici ma contribution, jespère qu’elle vous plaira.
http://www.wks.fr/stockpix/477/4180.jpg
Voir en ligne : Portail Debbog
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
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 à ce message
-
Créer une illustration web design colorée avec Photoshop
11 décembre 2009 00:21, par [Radium]
Merci pour ce tutoriel 

Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
11 janvier 12:11, par Hextazzix
Super tuto merci beaucoup !!!
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
19 janvier 19:52, par anncey
j’adore, ce tutoriel est super bien expliqué et il est très simple !
Répondre à ce message
-
Créer une illustration web design colorée avec Photoshop
13 février 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 à ce message
|