Accueil > Tutoriels pour les webdesigners > Photoshop > En faisant des effets graphiques > Créer une illustration web design colorée avec Photoshop

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

lundi 6 avril 2009, par Wonka

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.

JPEG - 19.8 ko

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 !

JPEG - 21.1 ko

ETAPE 3

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

JPEG - 38.2 ko

ETAPE 4

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

- http://gfxfever.com/
- http://qbrushes.com/

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.

JPEG - 51.1 ko

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).

JPEG - 52.2 ko

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 !

JPEG - 61.3 ko

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.

JPEG - 63.5 ko

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 !

Messages

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?