Icône Mac OS

Icône Mac OS

Tutoriel publié en juillet 2009 par Galdon dans la catégorie Photoshop

Dans ce tutoriel 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

Commençons par créer un nouveau document de 400px*400px.

Étape 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 ce tracé) :

dupliquer tracé

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

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 tracé :

fond du tracé

Dans la fenêtre qui apparaît, sélectionnez Blanc (dans Remplir avec) et cliquez sur OK :

fond blanc tracé

Cette manipulation a pour effet de peindre en blanc le calque feuille uniquement 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

Étape 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

Allez donc jeter un oeil sur cette page : sticker web 2.0.

14 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°600 par Bo-Duke
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!
commentaire n°948 par demande d'explication
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.
commentaire n°1397 par JZ developpeur php
JZ developpeur php mardi 6 juillet 2010, 13:50
Excellent le plis de la feuille, je garde le lien du tuto au chaud, merci.
commentaire n°1613 par tdb
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
commentaire n°1700 par Hesa
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
commentaire n°2004 par kebrakas
kebrakas mercredi 16 novembre 2011, 21:08
Tres bien mais j'ai pas compris quel format d'enregistrement vous utilisez ???
commentaire n°2041 par maxv
maxv mardi 20 décembre 2011, 19:10
Créer l'icone, c'est pas un problème techniquement... après on enregistre sous quel format pour que ça devienne une icone?
commentaire n°2069 par Alexum primum
Alexum primum mardi 3 janvier 2012, 22:24
Salut pouvez vous me préciser su quel logitiel vous faite sa ???
Merci
commentaire n°2071 par Galdon
Galdon mercredi 4 janvier 2012, 14:52
@Alexum primum : microsoft paint ^^.
commentaire n°3112 par Ug' Le Geek
Ug' Le Geek mercredi 22 juillet 2015, 13:53
Bonjour. Quel est la police utilisé sur cet icone?
commentaire n°3274 par Galdon
Galdon lundi 21 mars 2016, 23:22
C'est du Arial Black.
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré