Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
tutoriel:creer_un_theme_usplash [Le 20/05/2008, 18:44] 90.4.173.159, 213.95.41.13 |
— (Version actuelle) | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | {{tag>Edgy Feisty Gutsy personnalisation usplash}} | ||
| - | |||
| - | ====== Créer/Modifier un Thème Usplash ====== | ||
| - | Pour Dapper et Breezy suivez ce lien [[:tutoriel/creer_un_theme_usplash_dapper_breezy]] | ||
| - | |||
| - | |||
| - | =====Introduction===== | ||
| - | L'objectif de ce tutoriel est de vous apprendre à changer votre thème usplash, c'est à dire son apparence (fond, couleur du texte, barre de progression), et de vous montrer comment créer un nouveau thème. | ||
| - | |||
| - | ^Alors si vous voulez fabriquer de jolis thèmes comme ceux-ci, suivez ce guide!^ | ||
| - | |{{:usplash-fond.jpg|}}| | ||
| - | |||
| - | |||
| - | === Pré-requis === | ||
| - | Un thème usplash consiste en une simple librairie (.so //Shared Object//), écrite en C (des images peuvent être transformées en code source C) et compilée à l'aide de gcc. Les fonctions de dessin sont définies dans la libusplash. | ||
| - | Il vous faut [[:tutoriel:comment_installer_un_paquet|installer le paquet]] [[apt://build-essential|build-essential]] | ||
| - | |||
| - | La source d'un thème usplash contient donc : | ||
| - | |||
| - | * Une ou plusieurs images de fond selon le nombre résolutions que vous voulez supporter (Il en faut une par résolution). | ||
| - | * Des images représentant la barre de progression | ||
| - | * Un fichier ''votre-nom-theme.c'' écrit en C décrivant le comportement de votre usplash. Si vous n'avez jamais programmé en C ou ne connaissez pas les fonctions d'usplash, je vous encourage à lire le tutoriel présent plus bas. | ||
| - | * Un makefile. Comme précédemment, voir plus bas. | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ====Création d'un thème de démarrage==== | ||
| - | |||
| - | |||
| - | Tous d'abord, nous allons récupérer les sources d'un fichier .deb d'un thème usplash : [[http://archive.ubuntu.com/ubuntu/pool/main/u/usplash-theme-ubuntu/usplash-theme-ubuntu_0.17.tar.gz]] | ||
| - | \\ | ||
| - | \\ | ||
| - | \\ | ||
| - | ^Télécharger usplash-theme-ubuntu_0.17.tar.gz^ | ||
| - | |{{:targz.png|}}| | ||
| - | \\ | ||
| - | \\ | ||
| - | \\ | ||
| - | ^Et décompresser sur votre bureau, dans le dossier vous allez avoir ceci :^ | ||
| - | |{{:tutoriel/dossier1.png|}}| | ||
| - | |||
| - | |||
| - | Modifiez les images avec [[:Gimp]] pour qu'elles soient comme vous en avez envie, pensez juste à recolorier les images throbber pour qu'elles aillent avec votre thème. | ||
| - | \\ | ||
| - | <note>Moi je procède comme cela; Je crée une image au format le plus haut : 1024*768, je la convertis en 256 couleurs et je l'enregistre sur l'image « usplash_1024_768.png » etc ... en changeant la résolution de mon image à chaque fois.</note> | ||
| - | \\ | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ==== Créer les images de fond et la barre de progression ==== | ||
| - | Afin de créer votre usplash il vous faut des connaissances basiques d'édition d'images grâce à **The Gimp** ou tout autre logiciel de retouche d'image et de la patience ;-)... | ||
| - | Les images sont des PNG en 8 couleurs indexées. | ||
| - | \\ | ||
| - | \\ | ||
| - | <note>Vous devez créer une image par résolution supportée par votre thème. Vous pouvez utiliser des résolutions 4:3 (800x600,1024x768) ou 16:9 (1024x756).</note> | ||
| - | \\ | ||
| - | \\ | ||
| - | <note important>Refaire la partie du tutoriel lié à gimp, les photos ne sont plus valide sur le serveur</note> | ||
| - | == 1. Création de votre image de fond == | ||
| - | Ici, à titre d'exemple, nous créerons 2 images de résolution différente: | ||
| - | * 1024*768 px : [nom_de_l_usplash]_1024_768 | ||
| - | * 800*600 px : [nom_de_l_usplash]_800_600 | ||
| - | |||
| - | Vous pouvez utiliser une image de plus grande résolution et la redimensionner/rogner à celle voulue à l'aide de [[:GIMP]], | ||
| - | [[:Krita]], Kde Image Menu... | ||
| - | \\ | ||
| - | \\ | ||
| - | <note>Attention, cependant, le nombre de couleurs des images est limité à 256 (8bit) et doivent être impérativement être au format PNG (Portable Network Graphics).</note> | ||
| - | \\ | ||
| - | Pour convertir une image 24 bit en image 8bit en couleurs indexées, sous GIMP, il faut faire : Image -> Mode -> Couleurs indexées. Dans la boite de dialogue, Choisissez "Générer une palette optimale" et paramétrez à 255 le nombre de couleurs maximal. Vous pouvez également choisir le tramage : Floyd-Steinberg donne de bons résultats dans la plupart des cas. | ||
| - | |||
| - | Ces images seront appelées respectivement [nom_de_l_usplash]_1024_768, [nom_de_l_usplash]_1024_576, [nom_de_l_usplash]_1024_576_cropped, [nom_de_l_usplash]_800_600 et seront sauvegardées en Mode Indexé et au format PNG. | ||
| - | \\ | ||
| - | <note>Afin de rendre ce que je viens de dire plus simple je vais vous faire un exemple en image...</note> | ||
| - | \\ | ||
| - | \\ | ||
| - | __a. [nom_de_l_usplash]_1024_768.png__\\ | ||
| - | Ouvrez votre image usplash au format 1024*768 pixels.\\ | ||
| - | {{applications:personnalisation:step_1_1024_768_.png}}\\ | ||
| - | L'ombre noire ici servira d'emplacement à notre barre de chargement lors du démarrage pensez à prévoir l'emplacement de celle-ci de manière précise à l'avance comme dans notre cas...\\ | ||
| - | \\ | ||
| - | Convertissez votre image en Mode Indexé comme sur la capture suivante:\\ | ||
| - | {{applications:personnalisation:step_2_1024_768_.png}}\\ | ||
| - | Une boite de dialogue s'ouvre, mettez les réglages suivants afin d'obtenir les meilleurs rendus possibles...:\\ | ||
| - | {{:applications:personnalisation:step_3_1024_768_.png}}\\ | ||
| - | \\ | ||
| - | Il ne vous reste plus qu'à enregistrer votre image dans le dossier de votre thème si vous en avez créé un, pour cela cliquez sur fichier, enregistrer sous, dans le nom mettez: [nom_de_l_usplash]_1024_768, la destination le dossier du thème, et le format PNG, ne touchez pas aux réglages d'exportation lors de l'enregistrement, cela est inutile... | ||
| - | |||
| - | __b. [nom_de_l_usplash]_1024_576.png__\\ | ||
| - | Il existe deux solutions pour créer cette image, soit en refaire une totalement différente soit redimensionner votre image 1024*768 grâce à cette manière:\\ | ||
| - | {{applications:personnalisation:step_1_1024_576_.png}}\\ | ||
| - | Une boîte de dialogue apparaît : mettez les paramètres suivants (pensez à bien cliquer sur le verrou) et afin de centrer l'image cliquez simplement sur centrer:\\ | ||
| - | {{applications:personnalisation:step_3_1024_576_.png}}\\ | ||
| - | \\ | ||
| - | Repassez ensuite aux étapes de l'image 1024*768 si votre image de départ n'est pas en Mode couleurs indexées et sauvegardez toujours dans votre fichier thème en PNG et n'oubliez pas de changer le nom par [nom_de_l_usplash]_1024_576 si vous êtes parti de votre image 1024*768. | ||
| - | |||
| - | __c. [nom_de_l_usplash]_1024_576_cropped.png__\\ | ||
| - | De même que pour l'image au format 1024*576 il existe deux méthodes : créer une autre image ou repartir de [nom_de_l_usplash]_1024_576.png et de redimensionner grâce à la méthode dite plus haut en modifiant dans la boîte de dialoge 1024 par 768 et refaire les étapes de l'image de résolution 1024*768 pour mettre en Mode indexé si ce n'est déjà fait puis sauvegarder toujours en PNG, vérifiez bien que le nom est [nom_de_l_usplash]_1024_576_cropped si vous avez utilisé la seconde méthode... | ||
| - | |||
| - | __d. [nom_de_l_usplash]_800_600.png__\\ | ||
| - | Enfin, la dernière image, toujours deux méthodes comme auparavant, recréer une image au format 800*600 et repartir de l'image 1024*768 que vous redimensionnez grâce à la méthode du **b.** et mettez en mode indexé puis sauvegardez grâce à la méthode **a.**, toujours en PNG et n'oubliez pas encore une fois de vérifier le nom qui doit être [nom_de_l_usplash]_800_600. | ||
| - | |||
| - | |||
| - | Vos images d'usplash sont donc toutes normalement créées à partir de maintenant nous pouvons donc passer à la création de la barre de chargement... ! | ||
| - | |||
| - | == 2. Création ou réglage de la barre de défilement == | ||
| - | |||
| - | Comme précédemment, il suffit de modifier les images existantes. Ici les fichiers concernés sont : | ||
| - | __ | ||
| - | throbber_back.png | ||
| - | throbber_fore.png | ||
| - | throbber_back_16.png | ||
| - | throbber_fore_16.png__ | ||
| - | |||
| - | **Position et taille de la barre** | ||
| - | |||
| - | Pour modifier cela, il faut ouvrir le fichier (initialement) nommé "__usplash-theme-ubuntu.c__". | ||
| - | |||
| - | Le fichier contient différentes sections correspondant aux différentes résolution utilisables. | ||
| - | |||
| - | Exemple pour 1280x1024 : | ||
| - | |||
| - | <code>struct usplash_theme usplash_theme_1280_1024 = { ...</code> | ||
| - | |||
| - | Repérez alors cette section, on ne peut plus claire : | ||
| - | |||
| - | <code>/* Progress bar position and size in pixels */ | ||
| - | .progressbar_x = 352, | ||
| - | .progressbar_y = 500, | ||
| - | .progressbar_width = 320, | ||
| - | .progressbar_height = 18,</code> | ||
| - | |||
| - | ...du moins si vous alignez 3 mots dans la langue de Shakespeare ;-) | ||
| - | |||
| - | <note help>x et y sont les positions horizontales et verticales ; width = largeur ; height = hauteur</note> | ||
| - | |||
| - | <note tip>Remarque : Dans ces mêmes sections vous pouvez aussi modifier la position et la taille de la boîte dans laquelle défile le texte (quand le démarrage est sans "quiet")</note> | ||
| - | |||
| - | |||
| - | === Problèmes === | ||
| - | |||
| - | Sous Edgy, avec un noyau 64 bit, il se peut que votre splash soit en noir et blanc, et ne fonctionne pas. Une solution à été postée [[http://theglu.tuxfamily.org/index.php/post/2006/12/13/Amd64-Faire-fonctionner-le-splash|ici]] | ||
| - | |||
| - | |||
| - | |||
| - | ====Création du fichier .deb qui permet de faire son installation==== | ||
| - | |||
| - | Alors voilà c'est parti ! | ||
| - | |||
| - | Dans cette exemple, nous allons créer un fond d'écran appeler ubuntu-theme-ogres ( Pour les Ogres de barbacks, groupe dont je suis fan !) | ||
| - | |||
| - | ^A partir de cette image^ | ||
| - | |{{tutoriel:ogre.jpeg|}}| | ||
| - | \\ | ||
| - | * Il faut bien savoir qu'il vous faudra modifier certains fichiers et répertoires: | ||
| - | **usplash-theme-ubuntu.c, Makefile, postinst, rules** | ||
| - | \\ | ||
| - | \\ | ||
| - | Et remplacer le texte : « usplash-theme-ubuntu » par « usplash-theme-ogres ». | ||
| - | \\ | ||
| - | <note warning>Conditions particulières pour le fichier Makefile: tous les « usplash-theme-ubuntu » ne sont pas à modifier! | ||
| - | Exemple de Makefile dans le cas ou le nom de usplash serait "furiux": | ||
| - | |||
| - | '' | ||
| - | CC=gcc | ||
| - | CFLAGS=-g -Wall -fPIC | ||
| - | LDFLAGS= | ||
| - | INCLUDES= | ||
| - | |||
| - | COMPILE = $(CC) $(INCLUDES) $(CFLAGS) | ||
| - | LINK = $(CC) $(CFLAGS) $(LDFLAGS) | ||
| - | |||
| - | INSTALL = /usr/bin/install -c | ||
| - | INSTALL_DATA = $(INSTALL) -m 644 | ||
| - | INSTALL_PROGRAM = $(INSTALL) -m 755 | ||
| - | |||
| - | usplash-theme-ubuntu.so: throbber_back.png.c.o throbber_back_16.png.c.o | ||
| - | |||
| - | throbber_fore.png.c.o throbber_fore_16.png.c.o \ | ||
| - | |||
| - | usplash_1024_768.png.c.o usplash_1365_768_scaled.png.c.o | ||
| - | |||
| - | usplash_800_600.png.c.o \ | ||
| - | usplash_640_400.png.c.o usplash_640_480.png.c.o usplash-theme-furiux.c.o | ||
| - | |||
| - | $(COMPILE) -shared -o $@ $^ | ||
| - | %.png.c: %.png | ||
| - | pngtousplash $< > $@ | ||
| - | %.bdf.c: %.bdf | ||
| - | bdftousplash $< > $@ | ||
| - | %.c.o: %.c | ||
| - | $(COMPILE) -o $@ -c $< | ||
| - | install: | ||
| - | $(INSTALL) -d $(DESTDIR)/usr/lib/usplash | ||
| - | |||
| - | $(INSTALL_PROGRAM) usplash-theme-ubuntu.so $(DESTDIR)/usr/lib/usplash/usplash- | ||
| - | |||
| - | theme-furiux.so | ||
| - | clean: | ||
| - | rm -f *.png.c *.bdf.c *.c.o *.so | ||
| - | '' | ||
| - | |||
| - | Si vous ne respectez pas cette règle vous ne pourez rien faire... </note> | ||
| - | |||
| - | <note tip>Nommez votre répertoire "usplash-theme-nom_de_votre_theme</note> | ||
| - | \\ | ||
| - | * La dernière chose à faire pour pouvoir ensuite créer tranquillement votre point deb, c'est de renommer deux fichiers, postinst et postrm. | ||
| - | \\ | ||
| - | <note tip>Ceux-ci ce trouve dans le répertoire debian de votre dossier usplash-theme-ogres</note> | ||
| - | \\ | ||
| - | * Il faut les renommer postinstall-pak pour le premier et postremove-pak pour le deuxième. | ||
| - | * Ensuite faîte un copier coller et les mettre dans votre répertoire usplash-theme-ogres. (ne les laisser pas dans le répertoire ou ils étaient) Checkinstall en aura besoin plus tard ! | ||
| - | \\ | ||
| - | <note tip>Pour faire cela, il faut sélectionner les fichiers, faire un clic droit dessus et sélectionner « ouvrir avec éditeur de texte »</note> | ||
| - | \\ | ||
| - | \\ | ||
| - | ^Editeur de texte^ | ||
| - | |{{:editeurdetexte.png?711x308|}}| | ||
| - | \\ | ||
| - | Une fois que vous avez remplacé tous les textes par votre nom de usplash à vous, vous pouvez passer à l'étape suivante.\\ | ||
| - | [[:tutoriel:comment_installer_un_paquet|Installer le paquet]] : [[apt://libusplash-dev|libusplash-dev]] [[apt://debhelper|debhelper]] | ||
| - | - Lancer un terminal -> | ||
| - | - Vous y voici ! Pour plus d'infos sur le terminal, | ||
| - | suivez le lien suivant : http://doc.ubuntu-fr.org/terminal | ||
| - | \\ | ||
| - | \\ | ||
| - | ^Voiçi le terminal^ | ||
| - | |{{:menuterminal.png|}}| | ||
| - | \\ | ||
| - | |||
| - | -Ensuite pour aller sur le bureau, dans le terminal taper la commande suivante : | ||
| - | <code>cd Desktop </code> | ||
| - | Ensuite | ||
| - | |||
| - | <code>cd usplash-theme ubuntu-0.16/ </code> | ||
| - | ( **cd** veut dire Change Directory ) | ||
| - | \\ | ||
| - | ^L'écran du terminal^ | ||
| - | |{{:ecranterminal.png|}}| | ||
| - | \\ | ||
| - | |||
| - | - Puis taper | ||
| - | <code> sudo make </code> | ||
| - | |||
| - | |||
| - | Ensuite il vous faut [[:tutoriel:comment_installer_un_paquet|installer le paquet]] [[apt://checkinstall|Checkinstall]], qui permet de construire un paquet debian « .deb » | ||
| - | |||
| - | - Puis taper | ||
| - | |||
| - | <code> sudo checkinstall </code> | ||
| - | (Entrer votre mot de passe) | ||
| - | - Ensuite : | ||
| - | |||
| - | |||
| - | Comme dans l'image suivante changer le « name » mais laisser : la « source location » | ||
| - | |||
| - | Changer aussi la "version", c'est très important ! Si votre "release" est 1 votre "version" est 1.1 par exemple. Bien faire cela sinon vous aurez une erreur. | ||
| - | \\ | ||
| - | ^Ecran terminal Checkinstall^ | ||
| - | |{{:checkinstall2.png?393x469|}}| | ||
| - | \\ | ||
| - | A la fin vous vous retrouver avec un .deb dans votre répertoire, deb que vous pouvez partager avec d'autre. Pour vous, il est déjà installer | ||
| - | |||
| - | |||
| - | |||
| - | Voici un usplash fait par mes soins avec cette technique : | ||
| - | [[http://jerome.stix.free.fr/usplash-theme-ogres_0.16-1_i386.deb|Paquet_usplash-theme-ogres]] | ||
| - | \\ | ||
| - | <note tip>Comme je vous l'indique, j'ai fait un usplash avec une image des ogres de barbacks et c'est en .deb</note> | ||
| - | \\ | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | \\ | ||
| - | ^Et voici l'image utiliser pour le boot :^ | ||
| - | |{{tutoriel:ogre.jpeg|}}| | ||
| - | \\ | ||
| - | |||
| - | |||
| - | ^Et une photo de mon écran au boot!!!^ | ||
| - | |{{tutoriel:ogre-boot.jpeg|}}| | ||
| - | |||
| - | |||
| - | ====Sélectionner votre nouveau thème==== | ||
| - | |||
| - | Une fois l'usplash installé vous pouvez en changer en installant : | ||
| - | **"usplash switcher" ** : http://www.getdeb.net/app.php?name=usplash-switcher | ||
| - | |||
| - | |||
| - | Avec Hardy Heron, utilisez Startup-manager (disponible dans les dépôts) pour changer de thème car il n'existe pas de usplash-switcher pour cette version d'ubuntu. | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== Changer de résolution ===== | ||
| - | |||
| - | Soit vous installez l'utilitaire suivant : [[:tutoriel:comment_installer_un_paquet|installez le paquet]] startupmanager | ||
| - | |||
| - | FIXME Impossible de trouver le paquet startupmanager (Ubuntu 7.04) | ||
| - | \\ | ||
| - | ^Cela ressemble à ça et c'est super bien^ | ||
| - | |{{tutoriel:startupmanager.jpg|}}| | ||
| - | \\ | ||
| - | Soit vous utilisez cette méthode et c'est super bien aussi ! : | ||
| - | [[:tutoriel:comment_editer_un_fichier|Editez le fichier]] **/etc/usplash.conf** | ||
| - | |||
| - | vous modifier en fonction de la résolution de votre écran, ex : | ||
| - | <code># Usplash configuration file | ||
| - | xres=1680 | ||
| - | yres=1050</code> | ||
| - | et vous sauvegardez puis : | ||
| - | <code>sudo update-initramfs -u</code> | ||
| - | Il vous suffit de redémarrer pour admirer le résultat !! | ||
| - | |||
| - | //Contributeurs : jeepy, thedamocles, xabilon, U-topic, VinsS, adam0509, pseudomino, Furious-therapy// | ||