[Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

dreamer4475 · 04-10-2008 17:29:26

[En Modification]

Bonjour à tous !

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

Vous aurez besoin d'adobe. et là tout le monde me dit "AAAAAAAAAAHHHHH j'ai pas adobe photoshop et puis j'ai
pas envie de payer 700 rien que pour des icones faut pas deconner non plus !!!"
Et là je vous réponds : Pas faux. SAUF qu'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 servi
ça fait un petit peu peur. Mais c'est là que ce tuto vient vous aider.

Finit la parlotte. On y va !

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

_____________________________________________________________________________________________________________________________________

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.

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.

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 a 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é.

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 (a coté de la poubelle).
Et là hop ! Un nouveau calque appelé Calque 1.

Faites glisser 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 !

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

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.

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 :

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 :

CA

PUIS CA

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.

Applications -> Dans le dossier de l'appli remplacer le fichier icon.png par votre image et renommez la ensuite en icon.png aussi.
Web Clips -> /private/var/mobile/webclips/votre webclip

PS : Les icones présentées ici pour les webclips ont été ratées. Le rendu final est meilleur si vous suivez pointilleusement les étapes décrites ici. _____________________________________________________________________________________________________________________________________

Je vous invite à donner votre avis, des commentaires ou encore de partager vos propres icones !!

Dernière modification par dreamer4475 (02-06-2009 23:33:54)

pascalou94210 · 14-10-2008 21:53:54

Simpa le tuto

ValentinF · 22-10-2008 17:59:08

dreamer tu es sous mac?

dreamer4475 · 23-10-2008 18:17:16

Non je suis sous XP personnalisé avec BricoPack Leopard

ValentinF · 23-10-2008 18:24:53

Ohh envoie le lien stp moi j'ai flykite c'est pourris à coté !

rodyrod · 23-10-2008 18:33:31

Inutile de pirater Photoshop pour ça : The Gimp et Paint.NET sont gratuits et largement suffisants.

dreamer4475 · 23-10-2008 22:38:59

valentin-ferti : tiens

rodyrod : Peut etre, je t'avoue que je sais juste utiliser photoshop alors The Gimp et Paint.NET je connais pas trop ^^ c'est pour ca que je fais un tuto avec photoshop qui est pour moi un des meilleurs logiciel de photo malgré son prix

dreamer4475 · 23-10-2008 22:42:02

Valentin : Au passage, j'ai changé toutes mes polices en LucidaMAC

ValentinF · 23-10-2008 22:53:04

bon je l'ai installer et desinstaller car il fait ramer mon ordi par contée je veu bien le dock mais envoi le moi par mail car toutles dock pour rk laucher version mac ils marches pas donc envoi moi le tient : valentin@Apple-news.fr j'ai supprime le logiciel la car il avait aussi plein de bug don voilà merci quand meme

dreamer4475 · 23-10-2008 22:57:50

Ok ok perso moi ça va il a pas de bug. Il rame juste un peu au demarrage et apres c'est nickel. Je peux pas te filer le dock parce que je suis sur un autre pc mais tu peux jeter un coup d'oeil sur ce site : www.crystalxp.net

ValentinF · 23-10-2008 23:00:57

ba demain ?? Ou un autre jour ??

dreamer4475 · 23-10-2008 23:06:25

Ok ok demain je te l'envoie si tu veux. Par MP d'accord ?

ValentinF · 23-10-2008 23:10:55

mp? Non sinon tu me l'envoi par msn ou mail : valentin@apple-news.fr

ValentinF · 24-10-2008 18:57:06

Alors?

out · 24-10-2008 20:51:40

valentin, jette un oeil à ça : http://rocketdock.com/

ValentinF · 24-10-2008 21:05:46

oui mais j'en ai déjà une mais la sienne est vraiment vraiment ressemblante !

ValentinF · 24-10-2008 23:28:11

ET comment tu as changé ta police par défault ?

ValentinF · 25-10-2008 11:04:13

Bon ...

dreamer4475 · 26-10-2008 13:52:32

Oups désole j'ai vtaimentbpas eu le temps en fait ça fait longtemps que j'ai pas eu accès a mon pc. Je pourrais te l'envoyer dimanche prochain. Si tu ne veux pas attendre : c:/program files/rk laucher/léopard truc et la tu as le dock je croîs. Et sinon pour chnger la police : clic droit sur le bureau propriétés affichage et après tu clique sur avance. Ensuite tu changes les polices que tu veux en lucidaMAC

ValentinF · 26-10-2008 15:09:07

Mais quand je télécrharge sa met met erreur ... tu n'as pas le lien ou le dl ?

dreamer4475 · 26-10-2008 16:44:38

Ben cherche bricopack léopard telecharger sur google c'est le seul conseil que je puisse te donner.

ValentinF · 26-10-2008 17:51:35

Mais je peut pas le prendre léopard il fais buguer mon ordi

dreamer4475 · 26-10-2008 20:05:28

Est ce que tu es alle sur crystalxp ???

ValentinF · 26-10-2008 20:07:07

Oui moi je veus jutse ta b ar rk launcher mdr ^^

latino973 · 26-10-2008 21:15:21

Qui aurait un lien tuto pour photophiltre merci !

Forum iPhone, iPad, Apple Watch de iPhon.fr

Annonce

#1 04-10-2008 17:29:26

[Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#2 14-10-2008 21:53:54

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#3 22-10-2008 17:59:08

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#4 23-10-2008 18:17:16

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#5 23-10-2008 18:24:53

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#6 23-10-2008 18:33:31

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#7 23-10-2008 22:38:59

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#8 23-10-2008 22:42:02

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#9 23-10-2008 22:53:04

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#10 23-10-2008 22:57:50

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#11 23-10-2008 23:00:57

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#12 23-10-2008 23:06:25

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#13 23-10-2008 23:10:55

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#14 24-10-2008 18:57:06

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#15 24-10-2008 20:51:40

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#16 24-10-2008 21:05:46

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#17 24-10-2008 23:28:11

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#18 25-10-2008 11:04:13

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#19 26-10-2008 13:52:32

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#20 26-10-2008 15:09:07

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#21 26-10-2008 16:44:38

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#22 26-10-2008 17:51:35

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#23 26-10-2008 20:05:28

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#24 26-10-2008 20:07:07

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

#25 26-10-2008 21:15:21

Re : [Tuto] Créer une icône pour le SpringBoard avec Adobe Photoshop

Pied de page des forums