mardi 4 mars 2008

Donner un look Windows Vista à Ubuntu 7.10 en 11 étapes

Salut à tous! Après une longue absence me voilà de nouveau! Ces derniers temps j'aime modifier l'interface d'Ubuntu au maximum pour lui donner le look d'un système Apple Mac OS X 10.5 ou Microsoft Windows Vista. Même s’il reste toujours des petits détaille pour rendre l'apparence d'Ubuntu toujours plus proche de celui d'un autre système, plusieurs personnes m'on demander de leurs écrire un tutoriel pour les aider dans leur recherche du thème Vista le plus réussi.

Allons-y étape par étape :

Premièrement, vous allez créer dans votre home un dossier ou placer tous les fichiers que je vais vous donner.


Deuxièmement, le fond d'écran, nous allons utiliser les fonds d'écran officiel de Vista. Il y a plusieurs packs qui les proposent sur internet, mais je vous en est fait un que j'ai envoyé sur megaupload, vous pouvez le télécharger là : http://www.megaupload.com/fr/?d=NKRT31G7

Le pack est au format 7zip, vous avez besoin d'installer paquet p7zip ou p7zip-full pour pouvoir le décompresser. Cliquez ici pour le télécharger et l'installer.

Ensuite faite un clic droit sur les archives et sélectionnez « Extraire ici », sur votre bureau faites un clic droit et sélectionnez « Changer l'arrière-plan du bureau ». Faite un Glisser-Déposer de tous les fonds d'écran dans la fenêtre des gestions des fonds d'écran et sélectionnez-en un, personnellement j'aime beaucoup celui avec la grande fleur rouge. On peut bien évidemment utiliser notre fond d'écran préféré.


Troisièmement, les effets, Windows Vista à introduit chez Microsoft de nouveaux effets visuels dans l'interface de Windows si l'ordinateur possède les spécifications requises. Ubuntu possède lui aussi des effets semblables. Pour vérifier si vous en avez ou si vous pouvez en avoir, je vous renvoie sur cette page http://doc.ubuntu-fr.org/compiz_fusion et celle-ci http://doc.ubuntu-fr.org/acceleration_graphique.

Si pour une raison ou pour une autre vous n'en avez pas, vous pouvez passer à la quatrième étape.

Pour les chanceux qui ont ces effets, nous allons voir comment les configurer finement pour imiter presque parfaitement ceux de Vista!

On va commencer par installer les paquets minimums à notre projet : compiz-fusion-plugins-main, compiz-fusion-plugins-extra et compizconfig-settings-manager. Une fois fait-on peu lancer le panneau de configuration avancée, il est dans Système --> Préférence --> Advanced Desktop Effects Settings.
Pour la configuration j'ai un tutoriel vidéo en anglais, mais il reste très compréhensible, le voilà :





Pour l'effet de réflexion il n'à pas fonctionner chez moi, mais vous pouvez toujours essayer vous-même, voilà l'image à utiliser : http://svn.beryl-project.org/beryl/trunk/beryl-plugins/images/reflection_default.png, cette partie-là est a faire après la quatrième étape de notre tutoriel.
EDIT: sur Hardy ça fonctionne maintenant. Enjoy!

Vers la 2e minute, il est important d'activer et de désactiver les mêmes plugiciels que dans la vidéo, ensuite on continue à faire la même configuration que lui.
Il faut aussi aller désactiver les bureaux virtuels dans « général » puisque Vista n'en a pas.


Pour la quatrième étape, on va modifier les bordures de fenêtre, ceux qui n'ont pas les effets peuvent utiliser ce thème : http://art.gnome.org/themes/metacity/1337 qui copie les bordures de Vista quand les effets ne sont pas activés. C'est une bonne idée que tout le monde l'installe.

Pour l'installer il suffit d'aller dans Système --> Préférence --> Apparence et de faire un glisser-déposer dans la fenêtre, répondez oui quand il vous demandera si vous voulez l'activé tout de suite.

Par contre, pour ceux qui ont les effets visuels on va devoir utiliser les mêmes bordures que Vista avec les effets visuels! Il nous faut pour commencer par installer emerald. Puis nous pouvons télécharger le thème de bordure de fenêtre : http://www.gnome-look.org/content/show.php/Vista-Linux?content=42875 (2e liens de téléchargement, Vista-Q) on doit ouvrir le fichier télécharger avec le Gestionnaire de thème emerald qui ce trouve dans Système --> Préférence.


Notre bureau commence à ressembler à celui de Vista! Mais nous allons aller beaucoup plus loin ;)! Comme cinquième étape, nous allons modifier les sons! On y pense rarement, mais les sons Ubuntu vont faire tache dans un environnement Vista, comme pour les fonds d'écran vous pouvez les télécharger au format 7zip sur megaupload ici : http://www.megaupload.com/fr/?d=YIDPSRDS on décompresse de la même manière que pour les fonds d'écran, ensuite il faut ouvrir Système --> Préférence --> Sons et on va configurer comme suit :



Pour la sixième étape, on va faire quelque chose d'assez facile : modifier Firefox.

On installe le thème myFireFox disponible là : https://addons.mozilla.org/fr/firefox/addon/4129 et on installe l'extension Personal Menu disponible ici : https://addons.mozilla.org/fr/firefox/addon/3895 qui permet de masquer la barre de menu.



Septième étape, déjà! Assez simple, ici aussi, on télécharge sur megaupload le pack d'icône que j'ai préparée pour vous basé sur le pack linsta, le lien de téléchargement : http://www.megaupload.com/fr/?d=Q4C6ZJJH.
Une fois, télécharger on ouvre la fenêtre Apparence disponible dans Système --> Préférence et on fait un simple glisser-déposer, on valide pour dire qu’on veut que le thème prenne effets immédiatement, si ça ne fonctionne pas il faut cliquer sur le bouton personnaliser et aller le sélectionner manuellement dans le menu.


La huitième étape est presque identique à la précédente, seul le lien de téléchargement change, le voici : http://www.megaupload.com/fr/?d=WM1FPQEC
Par contre cette fois on ne modifie pas les icônes, mais plutôt la couleur, les onglets, les barres de menu, les boutons, et cetera. Ce thème GTK est basé sur le pack linsta mais avec mes propres modifications.


Neuvième étape, maintenant le look d'Ubuntu est vraiment transformé, mais il reste quelques petits détails que nous allons voir ensemble.

Il faut télécharger ce fichier, toujours sur mégaupload : http://www.megaupload.com/fr/?d=SCFJFDE4
On fait un clic droit dessus et on sélectionne « Extraire ici », on ouvre le dossier extrait dedans il y en a un autre qu'on ouvre aussi, ensuite il faut double-cliquer sur le fichier « Click here to install me.sh » dans la fenêtre qui s'ouvre on clique sur le bouton « Lancer dans un terminal » et on suit ce qui apparaît, s’il nous demande notre mot de passe root il faut lui donner. Cela va nous installer un « Menu démarrer ».

Maintenant, on fait un clic droit sur l'un de nos « Tableau de bord » et on sélectionne « Nouveau tableau de bord » on recommence sur le nouveau tableau de bord, mais cette fois-ci on va sélectionner « Ajouter au tableau de bord » et a l'aide du glisser-déposer on va placer les éléments suivant comme suit :

  • « Horloge » dans l'extrémité droite, puis faite un clic droit sur l'horloge et clic sur préférence, dans les préférences décoche toutes les cases et comme type d'horloge on choisie 24 heures.
  • « Contrôleur de volume » juste à gauche de l'horloge.
  • « Zone de notification » juste à gauche du contrôleur de volume.
  • « Vista Menu » tout à gauche du tableau de bord, puis on fait un clic droit dessus et on va dans préférence, dans l'onglet « Menu Theme » de la fenêtre qui apparaît, on sélectionne « Redmond » avec le bouton « Next » et dans la liste à puce « White background ». Dans l'onglet « Icon Theme » et « Menu Button Theme » on sélectionne « Vista Original » et on clique sur validé.
  • « Afficher le bureau » juste à droite de Vista Menu.
  • « Listes des fenêtres » juste à droite d'afficher le bureau.
Maintenant, on peut supprimer les deux panneaux de bords qui sont d'origine sur Ubuntu, un clic droit et sélectionner « Supprimer ce tableau de bord » sur chacun d'eux, ensuite un place bien le notre en bas de l'écran (si ce n'est pas déjà fait) grâce à un simple glisser-déposer.

On a presque fini :), on fait à nouveau un clic droit sur un endroit libre du tableau de bord et on sélectionne « Propriété » on met la taille à 30 pixels et dans l'onglet « Arrière-plan » on sélectionne « Image d'arrière-plan » on va utiliser cette image (je propose un lien de téléchargement parce que l'image ne fait qu'un pixel de largeur et il aurait été difficile de la sauvegarder).


Dixième étape, par défaut Ubuntu ne propose pas d'icône sur le bureau comme Vista, on va les rajouter : faite sur votre clavier la combinaison de touche suivante : Alt+F2, dans la fenêtre qui s'ouvre il faut taper « gconf-editor ».

Le logiciel est séparé en trois partit, dans la partit de gauche on va naviguer dans l'arborescence, apps --> nautilus --> desktop dans la partit en haut à droite on va cocher toutes les cases, voilà c'est fini, on peut réorganiser les icônes comme sur Windows directement sur le bureau.


Onzième et dernière étape : avec Vista Microsoft a ajouté ce qu'il appelle des « Gadgets » on peu facilement en avoir nous aussi sur Ubuntu, mais il faut avoir les effets visuels. Cette page donne toutes les informations pour leurs installations : http://doc.ubuntu-fr.org/screenlets
Il faut mettre en premier le screenlets « sidebar » et en fessant un clic droit dessus on peut aller dans thème et sélectionner le thème « Shadowed » qui correspond a celui utiliser sur Vista, il ne reste plus qu'à mettre les autres screenlets qu'on veut utiliser par dessus.
EDIT: Avec Hardy pour installer screenlets il suffit de cliquer ici.

Voilà, nous avons terminé. Maintenant, votre bureau devrait ressembler à ceci :



Le pack d'icône et le thème GTK risquent d'être améliorés plus tard, mais pour le moment ils sont déjà très réussis, mieux que tous les autres que j'ai pu voir. Pour la bordure blanche derrière le bouton Windows je n'est pas de solution pour le moment si ce n'est d'attendre qu'il sorte de bêta.

J'ai hâte d'avoir vos réactions en commentaire.

9 commentaires:

Ghost of Kendo (GoK) a dit...

Yo zippy !

Hmmm, je comprends que certaines personnes désirent avoir un système qui ressemble à Leopard mais pour Vista, je ne vois pas pourquoi ?
En effet, si on est passé à Linux, c'est pour que ça change un peu, non ?
Le plus incompréhensible pour moi, c'est qu'on donne l'apparence d'IE à Firefox !!!! (on frôle l'hérésie ^^)

à part ça, ton thème est très ressemblant, chapeau là dessus ^^

Anonyme a dit...

Je ne voie pas l'intérêt aussi de vouloir ressembler a quelque chose de déja existant.
Il est plus sage et plus honorable de se faire une identité propre et de se faire son design a soi.
Plutot que de copié les mochetés des autres ;o)

Zippy a dit...

Sur le fond je suis d'accord avec vous deux, mais apparemment la masse aime bien l'interface de Vista. Ce billet a dépassé tous mes scores de visite en 2 jours!

C'est aussi pour montrer un peu les possibilités de personnalisation, ça me permet de faire des démos avec des amis, etc. C'est un genre de « proof of consept » qui n'a pas la vocation d'être utilisé quotidiennement.

Et puis il y avait aussi que j'en avais marre de voir plein de screen de thème fait pour copier Vista et que sa ressemblais pas...

Moi dans la vraie vie j'utilise le thème Ubuntu sans Compiz Fusion (enfin. depuis hier :P)

honda camino a dit...

moi j'avais un pc sous vista et puit je suit passer sous ubuntu et j'etais perdu au debut et la depuis que j'ai installer ce theme je m'y retrouve beaucoup mieux et franchement ces vraiment bien fait
maintenant reste a faire des theme d'autre systeme d'explotation LOL

beek59 a dit...

Est-ce que tu peux refaire cet aricle en mettant a jour les packages et en detaillant un peu plus (genre la videos en anglais). Parce que j'ai bien galléré quand même a suivre ce tuto.

Par avance merci

Anonyme a dit...

Trés bonne idée : dans mon cas, je souhaitais reproduire le thème pour ma session "invité" car la plupart sont des utilisateurs de vista et ras le bol de rester derrière eux pour leur dire :"tu vas là","y clic gauche, y clic droit...". Bref, c'est exactement ce que je cherchais. Seul hic, c'est en ce qui concerne les icônes car ne sont modifiées ni celles des dossiers, ni celles de la barre de lancement (menu démarrer), alors un theme "human" au milieu de "vista", ça fait désordre!! Si quelqu'un a un lien pour modifier les icônes des dossiers automatiquement (je pense que ça vient d'un problème de nom de fichier), je suis preneur.

Ubuntu Hardy Heron
3 sessions (2 utilisateurs avec thème hardy caramel+compiz et les invités sur thème Vista)

Anonyme a dit...

Salut,
le lien vers la windows vista start bar est mort, est ce que tu peux uploader l'image à un autre endroit?

Merci !

Zippy a dit...

Bonjour a tous, le tuto ne fonctionne que pour Ubuntu 7.10 sur hardy et intrepid il y a quelque bug (notamment les icons).

Puisqu'il semble y avoir une demande je vais travailler pour mettre à jour le tuto je ne sais pas quand il sera prêt mais je m'en occupe

Anonyme a dit...

J'avais un laptop de trois ans que je n'utilisais plus, mais une envie d'essayer Unbutu m'a pris, alors je l'ai formater et installer unbutu.. j'ai essayé ensuite de le modifier en apparance visat, windows 7... ou xp.. rien à faire. Quand j'essaye d'installer qqch, rien ne se passe. HELP :(
Merci pour vos réponses.