Magazine High tech

Tutoriel : Créer une icône avec Photoshop !

Publié le 07 août 2010 par Applethom

Bonjour à tous !

Voici un petit tutoriel qui vous aidera à créer VOTRE PROPRE ICONE pour iPhone !

Vous aurez besoin d’adobe, mais attention pas besoin de debourser 700 euros !

il vous suffit de télcharger la version d’évaluation (étendue bien sur)
et la vous n’avez plus qu’à chercher sur internet : il y a pleins de videos pour transformer en version complète.
SAUF que c’est illégal et que je ne vous donnerai aucun lien pour une quelconque video illégale.
A vous de choisir.

Bref une fois que vous aurez installé Adobe Photoshop (j’utilise CS3 mais les versions antérieures fonctionneront)
faudrait peut etre l’ouvrir non ?

Alors maintenant que vous avez ouvert Adobe Photoshop je pense que pour ceux qui ne s’en sont jamais servis
ça fait un petit peut peur. Mais c’est là que ce tutoriel vient vous aider.

Fini la parlotte. On y va !

PS : Ce tuto fonctionne aussi bien pour Mac que pour PC.

Dans PhotoShop , créez un nouveau fichier en appuyant sur ctrl+n (cmd+n pour les macs users) et verifiez que vous avez bien les mêmes options que sur l’image ci dessous.

http://img172.imageshack.us/img172/1219/image1mei.png

  • Ensuite pour eviter de s’abimer les yeux on va zoomer un petit peu. Pour ça, agrandissez la fenetre du fichier (avec le coin vous voyez ?)
  • et appyez sur Z pour avoir l’outil Loupe. Cliquez 4 fois sur l’image et c’est parfait.
  • Maintenant on va mettre en place la forme de l’icone.

C’est pas dur : sélectionnez l’outil Rectangle arrondi et place la croix de façon à ce qu’on
ne voit que le coin adjacent . Késako ? Regardez bien l’image.
Vérifiez bien que les cotés (de la forme et des contours) forment bien une seule ligne.

http://img172.imageshack.us/img172/1654/image2qan.png

Pour les nouveaux : si vous ne voyez pas l’outil Rectangle arrondi c’est normal. Faites un clic droit sur l’emplacement ou il devrait etre et selectionnez celui que vous cherchez.

Bon ça y est on l’a fait on à notre icone … vide. C’est pas encore ça ^^

Je sais pas si vous avez remarqué mais Adobe a rempli l’icone alors qu’on ne lui a pas demandé.

http://img172.imageshack.us/img172/2407/image3n.png

Donc on va supprimer ce truc parce qu’il est genant.
Pour ça on va créer un Calque, c’est a dire une couche de l’image.
Dans la petite fenetre en bas a droite (oui celle avec des onglets calques, couleurs, composition des couches)
on va cliquer sur l’onglet Calques. Quoi vous l’avez pas ?! Bon, cliquez sur l’onglet Fenetre (celui la par contre vous l’avez !) et cliquez sur Calques.
Alors maintenant vous allez cliquer sur le petit bouton qui est montré sur l’image (à coté de la poubelle).
Et là hop ! Un nouveau calque appelé Calque 1.

http://img172.imageshack.us/img172/298/image4k.png

Faites glissez la forme rectangulaire arrondie qu’on a faite tout a l’heure sur le nouveau calque.
Ensuite vous pouvez supprimer le truc Forme 1 et tout redevient vide !

http://img245.imageshack.us/img245/8894/image6r.png

http://img172.imageshack.us/img172/6746/image5s.png

Maintenant on va mettre de la couleur !
Vous voyez à gauche. Il y a deux carrés de couleur (généralement blanc et noir sauf si vous avez fait joujou avant 

smile
)
Cliquez sur le premier et choisissez une premiere couleur. Ensuite cliquez sur l’autre et choisissez une autre couleur (pour que ça soit joli faut prendre une couleur plus claire 
wink
).
Ensuite, on va faire un joli petit dégradé. Vous allez utiliser l’outil dégradé (bah oui logique !).
En haut vers la gauche il ya un dégradé. Cliquez dessus et choisissez celui appelé Premier Plan – Arriere Plan.
Normalement vous devez avoir un croix a la place de la souris ou toute autre chose.
Placez cette croix sur un des bords de l’icône et faite le glisser dans la partie où vous voulez obtenir le dégradé.

http://img172.imageshack.us/img172/2824/image7u.png

  • Maintenant c’est à vous de vous lacher pour personnaliser l’icone : y placer des images, du texte, des motifs…

Un peu de tout en fait.

  • Allez je vous donne une ou deux petites idées. Il y a un onglet filtre tout en haut. Essayez les filtres un a un.

Tous vous permettre de modifier l’image : des vagues, des rayures…
Ah oui! et aussi si vous voulez faire un peu comme les images de l’iTunes Store ou de l’App Store (les rayures qui convergent en fait)
il faut utiliser les deux filtres qui sont dans Deformation :

  • Onde : Générateurs 1 ; Longueur d’onde : Min=1 et Max=15; Amplitude : Min=52 Max=784; Echelle : 100% x2

Coordonnées polaires.
Si vous trouvez un moyen d’améliorer ça postez le sur le Topic.

  • Ici nous allons « imiter » l’icône de Photoshop pour en faire une icône iPhone.

http://img172.imageshack.us/img172/53/image8c.png

Voilà maintenant on va passer a la touche finale :

  • le reflet lumineux en haut de l’image.

Pour ça c’est tout bête : Créez un nouveau calque,cliquez sur l’outil de Sélection en haut à gauche du tableau d’outil et prenez
la forme d’ellipse. Sélectionner le partie à éclairer un peu (faites sortie la souris de l’image puis cliquez et séléctionnez pour que ça fasse une bonne selection).

Ensuite on va réutiliser notre vieil ami : Dégradé !
Sauf qu’on va choisir le dégradé Premier Plan-Transparent. Ensuite on va faire une trait de haut en bas comme ici :

http://img172.imageshack.us/img172/8776/image12o.png

http://img149.imageshack.us/img149/7053/image14scw.png

Finissez en dupliquant la forme de l’icône (oui celle qu’on a fait en toute pemière !) sur les autres calques :
Cliquez sur la forme en restant appuyer dessus, appuyez en même temps sur ALT et faites glisser sur chaque calque restant.

Vous obtiendrez :

http://img149.imageshack.us/img149/4339/image13x.png

PUIS :

http://img135.imageshack.us/img135/7793/image1gdj.png

TADAM ! C’est fini (sauf si vous voulez changez quelquechose bien sur) !

Enregistrez le nouvel icône en appuyant sur Ctrl+S (Cmd+S), donnez lui un nom et enregistrez le AU FORMAT .PNG !!!

Ensuite vous n’avez plus qu’à l’installer via SSH.


Retour à La Une de Logo Paperblog

A propos de l’auteur


Applethom 1109 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazines