PARTIE 1 : Les matériels nécessaires

Pour la customisation, on aura besoin :

- un iPhone (bien sûr) jailbreaké || Jailbreaké ?
- le SSH et un logiciel de SSH comme WinSCP || SSH ?
- Winterboard || (téléchargeable sur Cydia)
- De la patience ||Comment en avoir ?

PARTIE 2 : Avant de commencer...

Afin de faciliter l'organisation des dossiers pour la customisation, je vous conseille de créer un dossier portant le nom de votre thème. Ici, pour l'exemple, j'opterai pour "LeTheme" comme nom du thème qu'on va créer.
Dans le dossier LeTheme, il n'y a rien du tout pour le moment On rajoutera des fichiers au fur et à mesure.

Toujours pour la facilité, créez ce dossier sur le bureau de votre ordinateur

PARTIE 3 : Customisation du LockScreen

Avant tout, le Lockscreen, c'est l'écran où il y a le slider "Déverrouiller". Ce mot anglais peut se traduire littéralement par "Ecran verrouillé".



On peut changer : (les chiffres correspondent aux chiffres sur l'image)

1) Le fond noir derrière l'heure et la date ~ (320*96 ou 1*96 si transparent) UILCDBackground.png dans le dossier LeTheme/UIImages/

2) Le fond d'écran ~ (320*480) LockBackground.png ou LockBackground.jpg dans le dossier LeTheme/

3) Le fond noir du "Déverrouiller" ~ (320*96 ou 1*96 si transparent) bottombarbkgndlock.png dans le dossier LeTheme/Bundles/com.apple.TelephonyUI/

4) La couleur défilant dans "Déverrouiller" ~ (80*32) bottombarlocktextmask.png dans le dossier LeTheme/Bundles/com.apple.TelephonyUI/

5) L'image pour "slider" ~ (71*47) bottombarknobgray.png dans le dossier LeTheme/Bundles/com.apple.TelephonyUI/

Vous pouvez aussi télécharger des lockscreens, disponibles sur Cydia et Google
Ou encore, vous pouvez suivre le tuto réalisé par Romain29. Il vous expliquera aussi comment supprimer les deux fonds noirs sur le lockscreen.

PARTIE 4 : Customisation du SpringBoard

Le SpringBoard (SB), c'est le bureau où il y a les applications. Ce mot anglais peut se traduire littéralement par "Tremplin" (en gros, un bureau )

On peut changer : (les chiffres correspondent aux chiffres sur l'image)

1) Le fond d'écran ~ (320*480) Wallpaper.png OU PageX.png pour avoir une image par page. Remplacez X par le numéro de la page (par exemple, page 1 : Page1.png) dans le dossier LeTheme/

2) La "barre" (le Dock en anglais) ~ (320*91) Dock.png dans le dossier LeTheme/

3) Les icônes des applications ~ (60*60) NomDeLApplication.png dans le dossier LeTheme/Icons/

Par exemple, pour l'icône Contacts, le nom de l'image est donc : Contacts.png !
/!\ Respectez la casse des noms des icônes : recopiez exactement le même nom sur le bureau (SB) - majuscules, minuscules, espace, ...

Pour les applications avec des accents comme Dis-moi où, je vous conseille d'utiliser RENAME, trouvable sur Cydia avec la source http://cy.sosiphone.com pour pouvoir renommer vos applications (ici, je l'ai renommé en DisMoiOu)

4) Les points des pages (en anglais, "dots") ~ UIPageIndicatorCurrent.png (10*10) pour la page actuelle (ici, point blanc) ET UIPageIndicator.png (10*10) pour les autres pages (ici, points gris) dans le dossier LeTheme/UIImages/

Pour la loupe Recherche, c'est SBSearchPageIndicator.png (10*10) pour la Recherche non utilisée (ici, grisée). SBSearchPageIndicatorCurrent.png (10*10) pour la Recherche utilisée (en blanc, pas dans l'exemple) dans le dossier LeTheme/UIImages/

5) La bulle de notification ~ (29*31) SBBadgeBG.png dans le dossier LeTheme/Bundles/com.apple.springboard/  >>> Voir les icônes disponibles sur le forum

On peut également modifier la police, la taille et la couleurs de textes sur le springboard grâce à un fichier important : info.plist
Pour cette partie, je laisse Lycans vous l'expliquer dans son tuto

PARTIE 5 : Customisation de l'application SMS

On peut changer : (les chiffres correspondent aux chiffres sur l'image)

1) Le fond d'écran ~ SMSBackground.png dans le dossier LeTheme/

2) La bulle des SMS envoyés ~ Balloon_1.png dans le dossier LeTheme/Bundles/com.apple.MobileSMS

Il faut absoluement mettre les deux bulles ! Si vous ne mettez que Balloon_1 ou Balloon_2, ça ne marchera pas... Je ne sais pas pourquoi, c'est comme ça Merci de votre compréhension

>>> Voir les icônes disponibles sur le forum

3) La bulle des SMS reçus ~ Balloon_2.png dans le dossier LeTheme/Bundles/com.apple.MobileSMS

4) je l'ai sauté, excusez-moi

5) Le bouton ENVOYER ~ SendButton.png pour le bouton non appuyé. SendButtonPressed.png pour le bouton appuyé dans le dossier LeTheme/Bundles/com.apple.MobileSMS

6) Le champ de saisie de texte ~ MessageEntryBG.png dans le dossier LeTheme/Bundles/com.apple.MobileSMS

7) L'icône Ajouter une Photo ~ BalloonInputField.png pour le fond de l'icône. PhotoButton.png pour le logo Photo dans le dossier LeTheme/Bundles/com.apple.MobileSMS

Pour modifier ce qu'il y a d'encadré sur ce screen (les couleurs) :

- Encadré en rouge : MessageEntryBG 8x40
- Encadré en vert : input-field-cover

Y'a aussi pour le chargement d'envoie :
- progressfill.png (rouge)
- progressbkgnd.png (gris foncé)


Merci Palou

PARTIE 6 : Customisation de l'application Téléphone

Pour customiser la fonction Téléphone, rendez-vous au tuto bien réalisé par le maître Obi-Wan, ici.

PARTIE 7 : Customisation de l'application iPod

Pour customiser la fonction Téléphone, rendez-vous au tuto bien réalisé par le maître Obi-Wan (oui encore ), ici.

PARTIE 8 : Customisation des sons SMS et Système

Pour customiser les sons SMS, rendez-vous au tuto par le jeune Ma£hias, ici.

Pour customiser les sons Système, rendez-vous au tuto par le jeune Obi-Wan, ici.

PARTIE 9 : Customisation des pages de chargement

Les pages de chargement sont des fonds d'écran montrant le chargement de l'application en cours.

Créez un dossier Folders dans LeTheme : LeTheme/Folders/

Dans Folders, créez un dossier pour chaque application dans lequel vous voudriez insérer une page de chargement : NomDeLApplication.app (Par exemple, pour l'AppStore, créez donc un dossier AppStore.app dans LeTheme/Folders/)

Dedans, vous y mettez l'image de chargement, nommé Default.png

Voici la liste pour les applications spécifiques :

Téléphone : MobilePhone.app
SMS : MobileSMS.app
.
.
. (pour les autres, à venir, merci de votre compréhension )

PARTIE 10 : Customisation du statusbar et ses icônes

Le statusbar (en français, "Barre de statut") est la petite barre situé au haut de l'écran. Il indique l'heure, les icônes (opérateur, réseau, batterie, ...)

Pour changer la couleur de la barre de statut, créez simplement un fond de couleur et ce fond ira dans LeTheme/Bundles/com.apple.springboard/

¤ Pour le statusbar dans le Lockscreen, nommez le fond en FST_BG.png
--> le fond s'appliquera aussi au statutsbar pour le verrouillage par code (PIN)

¤ Pour le statusbar dans le Lockscreen avec erreur de code, nommez le fond en Error_BG.png
--> le fond s'appliquera aussi dans le lockscreen en cas d'une erreur omise avec le code PIN.

¤ Pour le statusbar pour les applications au fond foncé (deuxième barre dans l'exemple en haut), nommez le fond en FSO_BG.png

¤ Pour le statusbar pour les applications au fond clair (première barre dans l'exemple en haut), nommez le fond en Default_BG.png

___________________________________________

Passons aux petites icônes de la batterie dans le statusbar


1) Le contour de la batterie pour fond noir ~ FSO_BatteryBG.png dans le dossier LeTheme/Bundles/com.apple.springboard/

2) L'icône batterie chargée ~ FSO_BatteryCharged.png dans le dossier LeTheme/Bundles/com.apple.springboard/

3) L'icône batterie en cours de charge ~ FSO_BatteryCharging.png dans le dossier LeTheme/Bundles/com.apple.springboard/

4) La couleur pour indiquer le niveau de charge (supérieur à 20%) ~ FSO_BatteryInsides.png dans le dossier LeTheme/Bundles/com.apple.springboard/

5) La couleur pour indiquer le niveau faible de charge (égal et inférieur à 20%) ~ FSO_BatteryLowBG.png dans le dossier LeTheme/Bundles/com.apple.springboard/

6) Le contour de la batterie pour fond gris ~ Default_BatteryBG.png dans le dossier LeTheme/Bundles/com.apple.springboard/

7) L'icône batterie chargée ~ Default_BatteryCharged.png dans le dossier LeTheme/Bundles/com.apple.springboard/

8) L'icône batterie en cours de charge ~ Default_BatteryCharging.png dans le dossier LeTheme/Bundles/com.apple.springboard/

9) La couleur pour indiquer le niveau de charge (supérieur à 20%) ~ Default_BatteryInsides.png dans le dossier LeTheme/Bundles/com.apple.springboard/

10) La couleur pour indiquer le niveau faible de charge (égal et inférieur à 20%) ~ Default_BatteryLowBG.png dans le dossier LeTheme/Bundles/com.apple.springboard/

___________________________________________

L'icône indiquant la puissance du Wi-Fi pour le fond noir du statusbar : FSO_X_AirPort.png (remplacez X par le nombre de barres de puissance de 0 à 3 dans le dossier LeTheme/Bundles/com.apple.springboard/

Pour le fond grisé du statusbar, remplacez FSO par Default

___________________________________________

L'icône indiquant la puissance du réseau de l'opérateur pour le fond noir du statusbar : remplacez X par le nombre de barres de puissance (de 0 à 5) : FSO_X_Bars.png dans le dossier LeTheme/Bundles/com.apple.springboard/

Pour le fond grisé du statusbar, remplacez FSO par Default

___________________________________________

Passons aux autres petites icônes comme l'Edge, 3G, ...



Ces icônes sont pour le statutsbar noir

1) Mode Avion ~ FSO_Airplane.png

2) Horloge d'Alarme ~ FSO_AlarmClock.png

3) Bluetooth non activé ~ FSO_Bluetooth.png

4) Bluetooth activé ~ FSO_BluetoothActive.png

5) GSM ~ FSO_EDGE_ALT_ON.png

6) Edge ~ FSO_EDGE_ON.png

7) GPRS ~ FSO_GPRS_ON.png

8) Cadenas verrouillé pour lockscreen verrouillé ~ FSO_LockIcon.png

9) "Play" iPod ~ FSO_Play.png

10) "Plus" iPod ~ FSO_Plus.png

11) Appel manqué (?) ~ FSO_TTY.png

12) 3G ~ FSO_UMTS_ON.png

13) VPN activé ~ FSO_VPN.png

- Toutes ces icônes sont à mettre dans le dossier LeTheme/Bundles/com.apple.springboard/
- Pour le fond grisé du statusbar, remplacez FSO par Default

Pour ceux qui se demandent comment j'ai rajouté la date dans la statusbar (voir exemple), il faut avoir SBSettings. Une fois dedans, sélectionnez "More" >> "Extras & Options" >> Mettre à I "Statusbar Date"

PARTIE 11 : Fichiers des icônes originales de l'iPhone à télécharger

Les images originales pour l'application Téléphone (clavier, icônes, ...) >>> Ici

Les images originales pour le springboard (petites icônes, réseau, edge, ...) >>> Ici

Les images originales pour le lockscreen (répondre, bouton slider, barres noires, ...) >>> Ici

INFORMATION

Le tutoriel peut très bien être incomplet et être modifié à tout moment. Vous pouvez aussi contribuer à ce tutoriel en ajoutant des informations ou des astuces ou encore le corriger ! En effet, il se peut que je me sois trompé (l'erreur est humaine, non ? )

Je suis ouvert aux critiques si ces dernières pourraient améliorer le tutoriel

Pour des questions ou des problèmes, faites - s'il vous plaît - d'abord une recherche avant de poster un topic.

En espérant que ce tutoriel vous aidera au moins un peu, je vous souhaite un excellent séjour sur le FiP


Mise à jour le 8 Janvier 2010 :

- Rajout d'un tuto pour customiser les petites icônes dans le menu Réglages

Et bien sa bosse dur mon Ludo !

Pas pour rien, j'espère

J'espère surtout que c'est lisible et clair

Hé bé, sacré tuto...

C'es tout simplement ce que j'appelle une "tuerie" !!

Excellent boulot !! Ouah chapeau

Merci !

excellent travail Ludotti.

Je pense qu'on pourrais le déplacer dans la catégorie tutoriel, et qu'il pourrais le finir si jamais il n'est pas finit ou le compléter depuis la catégorie tutoriel non ?

édite: oups trop tard.

Merci à tout le monde ça fait plaisir de voir que mon travail est apprécié

Il ne manque plus que voir si les nouveaux membres vont s'en servir

C'est une évidence Ludotti ne t'inquiète pas

Perso, moi qui débute dans le custom depuis presque 2 semaines, ce tuto est excellent.
C'est simple et clair, y'a toutes les infos qu'il faut à chaque fois, parce que j'avoue que sur certains autres tuto j'ai mis plusieurs jours à comprendre comment faire certaine manip

Merci en tout cas, je vais m'en servir pour affiner mon thème

@ palou : j'espère que tu ne parles pas de mes tutos