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

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 !
Article écrit par : Wonka
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 !
WonkaStudio

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
La galerie des membres

Url de l'image : http://www.wks.fr/stockpix/463/3579.jpg Url de l'image : http://www.wks.fr/stockpix/463/3581.jpg Url de l'image : http://www.wks.fr/stockpix/463/3583.jpg Url de l'image : http://www.wks.fr/stockpix/463/3584.jpg Url de l'image : http://www.wks.fr/stockpix/463/3585.jpg Url de l'image : http://www.wks.fr/stockpix/463/3590.jpg Url de l'image : http://www.wks.fr/stockpix/463/3591.jpg Url de l'image : http://www.wks.fr/stockpix/463/3598.jpg Url de l'image : http://www.wks.fr/stockpix/463/3599.jpg Url de l'image : http://www.wks.fr/stockpix/463/3605.jpg Url de l'image : http://www.wks.fr/stockpix/463/3608.jpg Url de l'image : http://www.wks.fr/stockpix/463/3610.jpg Url de l'image : http://www.wks.fr/stockpix/463/3619.jpg Url de l'image : http://www.wks.fr/stockpix/463/3628.jpg Url de l'image : http://www.wks.fr/stockpix/463/3653.jpg Url de l'image : http://www.wks.fr/stockpix/463/3663.jpg Url de l'image : http://www.wks.fr/stockpix/463/3680.jpg Url de l'image : http://www.wks.fr/stockpix/463/3701.jpg Url de l'image : http://www.wks.fr/stockpix/463/3703.jpg Url de l'image : http://www.wks.fr/stockpix/463/3707.jpg Url de l'image : http://www.wks.fr/stockpix/463/3710.jpg Url de l'image : http://www.wks.fr/stockpix/463/3749.jpg Url de l'image : http://www.wks.fr/stockpix/463/3754.jpg Url de l'image : http://www.wks.fr/stockpix/463/3763.jpg Url de l'image : http://www.wks.fr/stockpix/463/3764.jpg Url de l'image : http://www.wks.fr/stockpix/463/3767.jpg Url de l'image : http://www.wks.fr/stockpix/463/3776.jpg Url de l'image : http://www.wks.fr/stockpix/463/3779.jpg Url de l'image : http://www.wks.fr/stockpix/463/3780.jpg Url de l'image : http://www.wks.fr/stockpix/463/3789.jpg Url de l'image : http://www.wks.fr/stockpix/463/3790.jpg Url de l'image : http://www.wks.fr/stockpix/463/3791.jpg Url de l'image : http://www.wks.fr/stockpix/463/3799.jpg Url de l'image : http://www.wks.fr/stockpix/463/3807.jpg Url de l'image : http://www.wks.fr/stockpix/463/3847.jpg Url de l'image : http://www.wks.fr/stockpix/463/3861.jpg Url de l'image : http://www.wks.fr/stockpix/463/3897.jpg Url de l'image : http://www.wks.fr/stockpix/463/3901.jpg Url de l'image : http://www.wks.fr/stockpix/463/3915.jpg Url de l'image : http://www.wks.fr/stockpix/463/3916.jpg Url de l'image : http://www.wks.fr/stockpix/463/3924.jpg Url de l'image : http://www.wks.fr/stockpix/463/3952.jpg Url de l'image : http://www.wks.fr/stockpix/463/3991.jpg Url de l'image : http://www.wks.fr/stockpix/463/4027.jpg Url de l'image : http://www.wks.fr/stockpix/463/4055.jpg Url de l'image : http://www.wks.fr/stockpix/463/4068.jpg Url de l'image : http://www.wks.fr/stockpix/463/4069.jpg Url de l'image : http://www.wks.fr/stockpix/463/4094.jpg Url de l'image : http://www.wks.fr/stockpix/463/4096.jpg Url de l'image : http://www.wks.fr/stockpix/463/4113.jpg Url de l'image : http://www.wks.fr/stockpix/463/4155.jpg Url de l'image : http://www.wks.fr/stockpix/463/4180.jpg Url de l'image : http://www.wks.fr/stockpix/463/4209.jpg Url de l'image : http://www.wks.fr/stockpix/463/4214.jpg Url de l'image : http://www.wks.fr/stockpix/463/4227.jpg Url de l'image : http://www.wks.fr/stockpix/463/4233.jpg Url de l'image : http://www.wks.fr/stockpix/463/4253.jpg Url de l'image : http://www.wks.fr/stockpix/463/4262.jpg Url de l'image : http://www.wks.fr/stockpix/463/4264.jpg Url de l'image : http://www.wks.fr/stockpix/463/4265.jpg Url de l'image : http://www.wks.fr/stockpix/463/4282.jpg Url de l'image : http://www.wks.fr/stockpix/463/4316.jpg Url de l'image : http://www.wks.fr/stockpix/463/4322.jpg Url de l'image : http://www.wks.fr/stockpix/463/4352.jpg Url de l'image : http://www.wks.fr/stockpix/463/4389.jpg Url de l'image : http://www.wks.fr/stockpix/463/4400.jpg Url de l'image : http://www.wks.fr/stockpix/463/4407.jpg Url de l'image : http://www.wks.fr/stockpix/463/4426.jpg Url de l'image : http://www.wks.fr/stockpix/463/4442.jpg Url de l'image : http://www.wks.fr/stockpix/463/4453.jpg Url de l'image : http://www.wks.fr/stockpix/463/4474.jpg Url de l'image : http://www.wks.fr/stockpix/463/4476.jpg Url de l'image : http://www.wks.fr/stockpix/463/4503.jpg Url de l'image : http://www.wks.fr/stockpix/463/4526.jpg Url de l'image : http://www.wks.fr/stockpix/463/4536.jpg Url de l'image : http://www.wks.fr/stockpix/463/4569.jpg Url de l'image : http://www.wks.fr/stockpix/463/4576.jpg Url de l'image : http://www.wks.fr/stockpix/463/4577.jpg Url de l'image : http://www.wks.fr/stockpix/463/4677.jpg Url de l'image : http://www.wks.fr/stockpix/463/4678.jpg Url de l'image : http://www.wks.fr/stockpix/463/4702.jpg Url de l'image : http://www.wks.fr/stockpix/463/4707.jpg Url de l'image : http://www.wks.fr/stockpix/463/4713.jpg Url de l'image : http://www.wks.fr/stockpix/463/4714.jpg Url de l'image : http://www.wks.fr/stockpix/463/4752.jpg Url de l'image : http://www.wks.fr/stockpix/463/4786.jpg Url de l'image : http://www.wks.fr/stockpix/463/4809.jpg Url de l'image : http://www.wks.fr/stockpix/463/4873.jpg

Ajouter votre image dans la galerie
Si vous avez réussis ce tutorial vous avez la possibilité de poster votre dessin dans la galerie, vous pourrez ensuite le publier dans les commentaires (que vous trouverez en bas de page).
Attention votre fichier devra être en format JPG, et son poid inférieur a 200ko !

Vos commentaires ( 73 messages dans le forum)
Ajouter un commentaire à cet page

modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Ajouter un commentaire

Continuer la lecture sur wks.fr

Copyright

Les articles et images d'illustrations sont propriété de l'auteur et du réseau Grafik Network & Wks.fr.

Toute copie, reproduction ou diffusion sans autorisation sont interdites. Les images ainsi que les textes sont protégés par le droit français d'auteur ainsi que par un Copyright.