Juillet 2009

Icône Mac OS


Auteur : Galdon
Catégorie : Photoshop
Hey !

Aujourd'hui on va apprendre à créer une sorte d'icône comme celle qui représente les documents texte sous Mac OS X :

icone mac os

Icône Mac OS

Commencons par créer un nouveau document de 400px*400px.

 

Etape 1 : la feuille de papier

Allez dans le panneau des tracés, et créez un nouveau tracé que vous renommerez aussi feuille (c'est important de donner des noms explicites à tous les éléments du document, sinon après c'est le bazar)..

Sélectionnez l'outil plume, et dessinez une forme comme celle-ci :

tracé feuille de papier

Maintenant nous allons dupliquer ce tracé (clic droit sur le tracé dans le panneau des tracés, puis dupliquer) :

dupliquer tracé

Renommez le nouveau tracé "coin". Maintenant, vous allez sélectionner ce tracé coin, et vouz allez supprimer les sommets supérieur gauche et inférieur droit, puis déplacer le sommet inférieur gauche en suivant la flèche bleu :

deplacement sommet

 

Vous obtenez quelque chose comme ceci :

coin feuille

Maintenant, nous avons 2 tracés (feuille et coin) qui vont nous servir à créer le fond de l'icône.

Création du fond de la feuille

Allez dans le panneau Calques et créez un nouveau calque et renommez-le feuille. Assurez-vous que votre calque feuille soit sélectionné, et retournez dans le panneau des tracés.

Faitez un clic droit sur le tracé feuille et choisissez Fond du contour :

fond du tracé

Dans la fenêtre qui apparaît, sélectionnez Blanc et cliquez sur OK :

fond blanc tracé

 

Cette manipulation a pour effet de peindre en blanc le calque feuille SEULEMENT dans la zone délimitée par le tracé feuille. C'est comme si on se servait du tracé comme pochoir, et c'est très pratique parce que ça évite de dessiner la feuille à la main avec l'outil forme par exemple.

Voici le résultat que vous obtenez (prenez soin de n'avoir sélectionné aucun tracé dans le panneau des tracés, sinon il va apparaître dans le document et nous gêner) :

feuille blanche

 

Ça manque un peu de style tout de même, alors on va appliquer une légère ombre portée, et une incrustation en dégradéau calque feuille. Pour cela, clic droit sur le calque feuille, puis Options de fusion.

Voici pour l'ombre portée :

ombre portée

Voilà pour le dégradé :

dégradé

Et la rampe (gris -> blanc) :

rampe dégradé

 

Voilà, on en a fini avec le fond de notre feuille de papier, vous avez quelque chose dans ce style maintenant :

fond feuille document icone

Le petit coin

Maintenant je suis sur que vous devinez ce qu'on va faire...

Non ?

Bon je vous aide, on va faire pareil, mais pour le coin. Comme les manipulations sont très similaires à celles qu'on vient de faire pour le fond de la feuille, je vais abréger.

Donc vous créez un nouveau calque que vous nommerez coin, ensuite vous remplissez ce calque en blanc gràce au tracé coin.

Là vous obtenez ça :

coin blanc

C'est un peu fade, alors on va appliquer une incrustation en dégradé. J'ai utilisé la même rampe que pour la feuille, par contre j'ai changé l'angle pour que le dégradé soit en diagonale :

coin dégradé

Le détail qui tue

La rupture entre la feuille et le coin aspect un peu moche, le coin ne ressort pas assez par rapport au fond. Pour contraster le tout, on va créer un nouveau calque qu'on renomme Ombre et qu'on place entre les calques coin et feuille, en sandwich entre les deux :

calques

Ensuite on va peindre sur ce calque Ombre avec l'outil forme, prenez un pinceau très léger et diminuez le flux et l'opacité. Voici la brosse que j'ai utilisée :

brosse ombre

 

Et voici le résultat de cette première étape :

feuille document icone

Etape 2 : Typo

La seconde étape consiste à créer une petite barre horizontale avec du texte.

Donc créez un nouveau calque (nom : rectangle), dessinez un rectangle avec l'outil sélection, et remplissez la sélection en noir avec l'outil pot de peinture :

rectangle noir

Allez dans les options de fusion du calque rectangle, et appliquez-lui un dégradé gris assez foncé :

rampe noir

Ensuite nous allons créer un petit effet 3D sur ce rectangle.

Pour ça, dupliquez le calque rectangle, renommez la copie contour et glissez le calque contour en dessous du calque rectangle.

Sélectionnez le calque contour et appuyez sur Ctrl+T pour faire une transformation manuelle sur ce calque. Agrandissez un peu le calque pour qu'il forme un contour pour le calque rectangle :

contour

Appuyez sur entrée pour valider la transformation et allez dans les options de fusion du calque contour.

Vous allez foncer un peu le dégradé, pour qu'il ne soit pas identique à celui du calque rectangle, et vous allez aussi ajouter une légère ombre portée ainsi qu'un petit biseautage et estampage.

Je vous laisse ajuster les paramètres cette fois-ci, je suis à court de screenshot. Voici le résultat que vous devez obtenir (à peu près, ajustez selon vos goûts) :

résultat rectangle

 

Et maintenant la dernière étape : prenez l'outil texte et écrivez dans le rectangle qu'on vient de créer, et c'est fini !

Vous pouvez ajouter une petite illustration en dessous du texte, comme je l'ai fait dans mon exemple tout au début du tuto. Vous trouverez plein d'illustrations de ce genre sur le net, à commencer par Stockmotion !

icone mac os
pas compris ?
kissifrott - dimanche 26 juillet 2009, 11:32
intéressant tuto qui permet de découvrir et travailler quelques outils
cependant pour la création du coin, quand je suis tes instructions, ça ne donne pas du tout ce que tu montres
j'obtiens un résultat satisfaisant en tchaoupinant les tangentes mais c'est plus long ...
c'est pas important mais, bon, j'aime bien comprendre
pour l'ombre, je trouve difficile d'obtenir un résultat propre mais c'est surement dû à mon manque de doigté et d'application...
Galdon - dimanche 26 juillet 2009, 12:30 - site
L'ombre c'est ce qui demande le plus de "savoir-faire" en effet.
kissifrott - dimanche 26 juillet 2009, 17:41
En fait, mon ombre que je trouvais crado en plein écran est tout à fait acceptable quand je mets l'image au format d'une icone web.L'effet est même assez bluffant...
Juste pour conseiller aux novices qui passent par ce tuto de faire l'exercice en le personnalisant. Le résultat donne un sentiment un peu puéril de satisfaction. (faut pas se la péter non plus, mais c'est encourageant...)
Merci à toi Galdon
Bo-Duke - dimanche 16 août 2009, 14:59
Super tuto! Moi qui n'utilisez jamais l'outil plume! O_o

Franchement ça fais de super icônes pour mon bureau!
demande d'explication - lundi 14 décembre 2009, 16:47
salu c'est jacob je n'arrive pas à placer le calque ombre entre les deux autres c'est à dire coin et feuille.
JZ developpeur php - mardi 6 juillet 2010, 13:50 - site
Excellent le plis de la feuille, je garde le lien du tuto au chaud, merci.
tdb - vendredi 10 décembre 2010, 11:34
Ouaip, dsl pour le débutant que je suis mais je suis resté bloqué à " sélectionner les conis inférierus et les supprimer, flêche blueue...Il manque quel outils excatement faut prendre en fait. Il faudrait la manipe complète. Merci
Hesa - samedi 5 février 2011, 19:23
Hey dessiner avec la plume c'est pas facile tu pourait donner le fichier psd ? si tu le met averti moi par email
kebrakas - mercredi 16 novembre 2011, 21:08
Tres bien mais j'ai pas compris quel format d'enregistrement vous utilisez ???
maxv - mardi 20 décembre 2011, 19:10 - site
Créer l'icone, c'est pas un problème techniquement... après on enregistre sous quel format pour que ça devienne une icone?
Alexum primum - mardi 3 janvier 2012, 22:24
Salut pouvez vous me préciser su quel logitiel vous faite sa ???
Merci
Galdon - mercredi 4 janvier 2012, 14:52 - site
@Alexum primum : microsoft paint ^^.
Laisser un commentaire
Pseudo
Adresse Mail
Site web
(facultatif)
Commentaire
Facebook Twitter RSS Email
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré