[TUTO] Personnalisation du home avec LauncherPro

Bonjour à tous,
Suite aux demandes de certaine personnes du forum je vous propose donc une traduction d'un tuto pour faire un home avec des onglets pour faciliter la navigation entre les pages.

Comme je l'ai dit plus haut, tout vient de ce site.


Pour commencer il nous faut ces fichiers, ils contiennent toutes les images plus les .psd pour ceux qui voudraient personnaliser tout sa.
- Fichier de l'auteur (Nom en anglais)
- Fichier modifiés (Nom en français)

L'application principale requise pour ce tutoriel est LauncherPro. Plusieurs options présentées dans ce tuto ne sont disponibles que dans la version Plus (Payante).
L'upgrade vers cette version coute 2.99 USD. A vous de voir, personnellement je ne regrette pas mon achat ;-)

Commençons :
Téléchargez sur le market l'application ‘Wallpaper Set and Save’ et configurez votre fond d'écran. Il devrait être dans "\sd\Scrolling 2.0\Wallpapers". Pour qu'ils apparaissent dans Wallpaper Set and Save il faut les placer dans "\sd\wallpapers".

Etape 1.
Extraire les fichiers de "Scrolling 2.0.rar" sur votre carte sd, vous pouvez supprimer le dossier "PSDs" et le fichier "screenshots.png", il ne seront pas utiles. Si vous souhaitez personnaliser les psd vous pouvez trouver des fichier ici.
Déplacez le dossier "lpshortcuts" de "Scrolling 2.0" vers la racine de votre sd.

Note : Les fond d'écran inclus ne sont valables que pour une résolution de 480*800. Pour des fond d'écran alternatif vous pouvez en trouver ici.

Etape 2.
Configurer LaucherPro avec ces options : (En anglais, l'app est dans cette langue)

Homescreen Settings

Number of screens = 6

Default Screen = 1

Number of Columns = 5

Number of Rows = 5

Auto-fit Items = Coché

Appearance Settings

Dock Background – Custom – set included dock

Hide Notification bar = Coché

Hide icon labels = Coché

Disable wallpaper scrolling = Dé-Coché

Etape 3.
Pour ajouter des raccourcis sur la page 1 (Celle avec les onglets sur le côté gauche) :

Pressez longuement sur une zone vide > Shortcuts > LauncherPro Shortcuts > Screen 6 > Supprimez le texte en dessous de l'icône > Touchez l'icône et changez là pour "blank.png" qui doit se trouver dans "Scrolling 2.0" > Le raccoucis (invisible normalement) devrait se trouver an haut à gauche, environ au dessus de "Options" > Touchez le texte "Options" sur la barre gauche, vous devriez vous retrouvez sur la page 6.

Répétez cette opération pour les pages 5 à 2.

Note : Si vous obtenez une page vide après avoir sélectionné LauncherPro Shortcuts, vérifiez que vous avez bien les fichiers en *.lps dans le dossier "lpshortcuts", "download" ou "downloads" sur votre sd.

Etape 4.
Modifiez le dock du bas, pressez longuement les icônes, et choisir "Change shortcut".

Voici ma configuration :

Position 1 – Raccourcis vers la page 1, swipe pour la barre de notification, "blank.png"
Position 2 - Numérotation appel, swipe pour le popup 'Missed Calls', "dial.png"
Position 3 - Messages, swipe pour contacts, "sms.png"
Position 4 - Navigateur, swipe pour favoris 'Google.fr', "web.png"
Position 5 - App Drawer, swipe pour le popup applications récentes, "app.png"

C'est une proposition basique, si vous voulez plus d'icônes c'est ici.

Bannières et icônes.

Les icônes sont un mix entre ceci et ceci.

Les bannière pour chaque page ont été ajoutées avec Desktop VisualizeR et liées à un Label de Folder Organizer. Les bannières ont une taille de '3*1' et les icônes sont 'Small'.
Assurez vous d'avoir supprimé le texte en dessous des icônes avant de les ajouter.

Widget.
A vous de voir quels widgets s'intègrent bien dans votre home.
De nombreux posts sont consacrés aux widgets sur le forum.


Vous voilà avec un home personnalisé à souhait, mais vous voulez y mettre votre touche personnelle (Changer le texte de gauche, changer le fond d'écran, etc...)

Je vais donc vous expliquer comment ajouter quelques modifications à votre fond d'écran.

Commencement :
Pour modifier les images nous allons utiliser un logiciel de retouche d'images gratuites Gimp.
Téléchargez le et lancez le.

Changer l'image de fond :
Ouvrons le fond d'écran en .psd, File>Open>"Dossier Scrolling 2.0\PSDs\P_Wallpaper Template2.0.psd".
Nous voilà donc avec le fond d'écran modifiable, sur la droite vous avez les calques. Les calques sont comme des dossiers avec une image.
Celui qui nous intéresse se nomme "Calque 1", on peut le supprimer (clique droit, "Delete Layer").

Allons maintenant chercher une image pour le remplacer, le format est de 960x800, vous pouvez trouver une image au bon format, ou bien partir d'un wallpaper de pc et le redimensionner. Je vais présenter ici la deuxième option, la première reste sur le même principe.

On va prendre par exemple cette image. Sur l'image "Clique droit, Enregistrer l'image sous..., Bureau par exemple".

Revenons sur Gimp, pour importe l'image, "File>Open as Layer>Allez chercher l'image précédemment enregistré".
Si de n'est pas déjà fait, placer l'image entre les claques "Background" et "Guides 5x5 with bar on".
On va maintenant la redimensionner un peut, "Ctrl + Molette souris" pour dé zoomer et apercevoir le cadre en pointillées jaunes de notre image de fond.
Dans la toolbox sélectionner la "Croix directionelle" et cochez "Move the active layer" (ceci éviteras de déplacer les guides).

Avec un simple cliquer-déplacer vous pouvez bouger votre image sur le plan de travail.

Pour ceux qui veulent redimensionner l'image, il faut utiliser l'outil "Mise à l'échelle" (cf screenshot plus bas), vérifiez que "Keep aspect" en bas de la toolbox est bien cochée. Pour redimensionner l'image sans perdre les proportions il faut cliquer dans un endroit vide et déplacer le souris (il ne faut surtout pas cliquer sur l'image). Un fenêtre "Scale" doit apparaitre, pour valider cliquez sur le bouton "Scale".


Enregistrons maintenant notre beau travail, "File>Save as>Cliquez sur le '+' de "Select File Type">"PNG image, .png">Cliquez sur "Save". Si un message apparait avec un bouton "Export" cliquez le. Pour la qualité du PNG à vous de voir, personnellement je laisse les parametre par défauts.

Si vous n'avez pas changer l'emplacement de sauvegarde, il devrait se trouver dans le dossier "PSDs" de "Scrolling 2.0".
Voici mon résultat final.

Bonne chance pour ce tuto.

Si vous avez des questions n'hésitez pas.

Et postez vos réalisations ici.

Dernière édition par Wøødy le Sam 22 Jan 2011 - 14:11, édité 2 fois

Très bon tutoriel cela va en aider plus d'un

Super taf merci

BRAVO !!

bonjour , merci pour ce tuto , mais est ce normal qu'il n'y ai pas d'étape 3 ? ou c'est une simple faute de frappe ? enfin je vais tester quand meme pour me faire ma propre idée

Merci =)
En effet, c'est une faute de frappe. Bien vu

Merci pour ce tuto très bien fait

Merci j'ai enfin réussi à faire un bureau beau et fonctionnel, grâce soit rendu à woody

Super wØØdy,

Merci je ferai un essai après avoir nettoyé ma voiture car après voyage a la ferme chez mes beau parents et mes 2 loustic qui mangent leurs biscuits comme des petits cochons le C4 Grand Picasso à besoin d'un toilettage complet.

salut
super boulot
comment puis je faire pour mettre un fond d'écran perso en gardant les raccourcis bien sur?

Ça à l'air super sympa , mais je suis allergique à l'anglais.

Peut-on mettre en français ?

Sa me fait plaisir que cette traduction vous soit utile =)

@DEDO : Pour choisir ton fond d'écran tu doit modifier le fichier "P_Wallpaper Template2.0.psd" avec Photoshop (il se trouve dans le dossier "PSDs").
Le fond d'écran est à placer dans le dossier "Place Background Here" dans les calques de Photoshop.
C'est là le point noir, tout le monde n'a pas Photoshop :s
J'essaierais de proposer une version pour Gimp si j'ai le temps cette semaine.

@Oudjat : Il y a en effet une version française, il faut choisir le pack "Fichier modifiés (Nom en français)" au début du tuto ;-)

Merci pour le tuto

Bon sang!!! Grace à Woody je vais enfin arriver à avoir un Home digne de ce nom!
J'ai Paint Shop Pro donc ça va le faire.
Par contre, une question Woody: une fois le thème installé et personnalisé, tu penses que je peux le sauvegarder avec mon LauncherPro Plus? (je change de Rom comme de chemise)

oui ça marche gill je viens de tester en changeant de rom

Merci Woody pour l'info complémentaire.
Je vais peut-être m'y essayer à l'occasion.

Merci pour la traduction, c'est bien plus pratique lol.
Mis en place à 90% du premier coup

@ toute

Personne pour faire une petite vidéo? J'ai envie d'écrire une news là dessus après mes examens

@ Gill : Comme le dit DEDO sa marche avec les backup de LaucherPro Plus.
Cependant moi j'ai eu un souci de widget, il ne ce sont pas sauvegardés.

Concernant la compatibilité des .psd avec Gimp, sa fonctionne parfaitement.
J'ajouterais au tuto une partie pour pouvoir changer le fond d'écran et le texte.

@ Zepiii : Une vidéo de quoi ? Du rendu final ?

Zepiii a écrit:

Personne pour faire une petite vidéo? J'ai envie d'écrire une news là dessus après mes examens

http://htc-touch-hd.1fr1.net/t34184p210-discussion-vos-bureaux-du-desire-hd#478246

j'aimerai savoir comment agrandir les bannières dans les pages?

Pour agrandir les bannières il te suffis juste de changer la taille du widget "Desktop Visualizer", dans le tuto c'est un 3*1 mais tu peux prendre plus grand
Ensuite si tu veux qu'il prenne toute la largeur (5*1) il faut le redimensionner avec LaucherPro Plus, et avoir une taille d'image proportionnée (480*136 il me semble).

DEDO a écrit:

oui ça marche gill je viens de tester en changeant de rom

Wøødy a écrit:

@ Gill : Comme le dit DEDO sa marche avec les backup de LaucherPro Plus.
Cependant moi j'ai eu un souci de widget, il ne ce sont pas sauvegardés.

Merci Woody et DEDO.
Pas grave si les widgets ne sont pas sauvegardés, le principal c'est que la structure soit sauvée.

Merci beaucoup pour le tuto, je m’intéressais justement a ce type d'interface!

J'ai un probleme quand je lance Launcher PRo apres l'installation

j'ai pas l'activité fede