PDA

Voir la version complète : Faire une skin pour MoonShell


M@cZér0
02/03/2006, 19h26
[Tuto - Création]
Votre skin
pour MoonShell
Faites le vous même!


Temps : 30 minutes minimum
Difficulté : Intermédiaire

Sommaire :

Introduction
Matériel nécessaire
Couleurs de remplissage
Insertion d'images
Effets sonores
Pour aller plus loin
Liens


1. Introduction

MoonShell, LE lecteur multimédia de la DS, est un homebrew entièrement personnalisable. On peut changer le thème graphique, les sons, animations de démarrages et autres économiseurs d'écrans!

Nous verrons deux solutions pour modifier le thème, je vous montrerai comment colorer les divers éléments en changeant leur couleur de remplissage (en utilisant un codage RGB (http://fr.wikipedia.org/wiki/RGB)), et pour un meilleur rendu, sachez que l'on peut aussi utiliser des images en remplacement.


2. Matériel nécessaire

Pour ne pas se blesser, il faut s'équiper!

Pour pouvoir commencer sur un support, téléchargez le pack de création de skin (http://www.box.net/index.php?rm=box_v2_download_shared_file&file_id=f_44036220) qui contient les .bmp vides, l'outil de création de curseur transparent et l'outil pour faire un aperçu de la skin.

Il nous faudra ensuite des outils pour traiter les images, vous pouvez très bien utiliser Paint pour vos montages, mais dès que vous aurez besoin de quelques effets Paint.NET 3.0 (http://www.getpaint.net/download.html) (prononcez PaintDotNet) pourrait se révéler très utile. C'est un logiciel d'édition graphique gratuit, simple, complet et en Français! Il nécessite cependant l'installation de .NET FrameWork 3.0 (http://www.microsoft.com/downloads/info.aspx?na=90&p=&SrcDisplayLang=fr&SrcCategoryId=&SrcFamilyId=10cc340b-f857-4a14-83f5-25634c3bf043&u=http%3a%2f%2fdownload.microsoft.com%2fdownload%2 f4%2fd%2fa%2f4da3a5fa-ee6a-42b8-8bfa-ea5c4a458a7d%2fdotnetfx3setup.exe).

Un logiciel bien pratique qui vous sera utile si vous travaillez à partir d'image prise sur Internet, Batch Image resizer (http://www.jklnsoft.com/download/batch-image-resizer.exe) vous permettra de redimensionner vos images.

De plus, vous aurez souvent besoin d'un générateur de codes RGB (http://icosaweb.ac-reunion.fr/RsrcPeda/General/Lycee/Couleur/Docs/CodeDesCouleurs/CodeRGB.htm). Ajustez les curseurs jusqu'à obtenir la couleur voulu et récupérez le code RGB (si vous êtes un adepte du navigateur au renard, il vous faudra installer la très utile extension pour FireFox : IE Tab (http://extensions.geckozone.org/IETab), ou bien se résigner à revenir sur Internet Explorer... :oha:). Enfin, une banque de sons (http://www.sounddogs.com) pourrait vous être nécessaire pour la partie sonnore de votre skin (pour capturer des sons, faites un clic droit sur celui-ci et Enregistrer la cible du lien sous...)


3. Couleurs de remplissage

Comme expliqué auparavant, vous pouvez changer la couleur de remplissage des différents éléments. Dans le dossier skin de MoonShell, ouvrez le fichier Skin.ini avec le bloc note et modifiez les codes RGB en vous aidant du générateur de code RGB (http://icosaweb.ac-reunion.fr/RsrcPeda/General/Lycee/Couleur/Docs/CodeDesCouleurs/CodeRGB.htm). Notez que les valeurs à modifier sont en hexadécimal (http://fr.wikipedia.org/wiki/Hexad%C3%A9cimal) (RRGGBB).
Vous pouvez aussi utiliser paint : dans paint, double cliquer sur une couleur de la palette puis cliquer sur "définir les couleurs personnalisées". Choisissez votre couleur et recopier les valeurs de rouge, de vert et de bleu dans la page du générateur de codes dans les champs R, G et B pour obtenir le code hexadécimal à copier dans le skin.ini.

Sachez qu'en présence d'un fichier image de remplissage, l'image est prioritaire à la couleur de remplissage.

Voici à quoi correspondent ces valeurs :

DesktopBG : couleur du fond de l'écran inférieur

TitleA_Bright : couleur des barres de gauche et du haut encadrant la barre de titre de la fenêtre active
TitleA_Dark : couleur des barres du bas et de droite encadrant la barre de titre de la fenêtre active
TitleA_BG : couleur du fond de la barre de titre de fenêtre active
TitleA_Text : couleur de la police de la barre de titre de fenêtre active
TitleA_TextShadow : couleur de l'ombre de la police de la barre de titre de fenêtre active

TitleD_Bright : couleur des barres de gauche et du haut encadrant la barre de titre de la fenêtre inactive
TitleD_Dark : couleur des barres du bas et de droite encadrant la barre de titre de la fenêtre inactive
TitleD_BG : couleur du fond de la barre de titre de fenêtre inactive
TitleD_Text : couleur de la police de la barre de titre de fenêtre active

ScrollBar : couleur de la barre de défilement

FrameBright : couleur des barres de gauche et du haut encadrant la fenêtre de sélection de fichier
FrameDark : couleur des barres du bas et de droite encadrant la fenêtre de sélection de fichier

ClientBG : couleur de fond de la barre d'options de lecture (volume, piste suivante...) et des fenêtres de renseignements ID3Tag...
ClientText : couleur de police de la barre d'options de lecture (volume, piste suivante...) et des fenêtres de renseignements ID3Tag...

FileSelectBG : couleur du fond de la fenêtre de sélection de fichier
FileSelectText : couleur de la police de la fenêtre de sélection de fichier
FileSelectCursor : couleur du curseur de la fenêtre de sélection de fichier
FileSelectPlay : couleur du fichier en cours de lecture de la fenêtre de sélection de fichier

TextViewBG : couleur du fond de la fenêtre de lecture de fichiers texte
TextViewText : couleur de la police de la fenêtre de lecture de fichiers texte

ProgressEnd : couleur de la barre de progression de lecture de fichier audio (durée écoulée)
ProgressLast : couleur de la barre de progression de lecture de fichier audio (durée restante)


4. Insertion d'images

Vous pouvez aussi utiliser des images pour les différents éléments, pour cela, ils doivent répondre à certaines restrictions et sont à copier dans le dossier moonshl\skin.


c_file.bmp : 256x192 pixels au format Bitmap 24 Bits. Correspond à l'image affiché en fond de la fenêtre de sélection de fichier.

c_text.bmp : 256x192 pixels au format Bitmap 24 Bits. Correspond à l'image affiché en fond de la fenêtre de lecture de fichiers texte.

client.bmp : 256x192 pixels au format Bitmap 24 Bits. Correspond à l'image affiché en fond de la barre d'options de lecture (volume, piste suivante...) et des fenêtres de renseignements ID3Tag...

clsbtn.bmp : 14x14 pixels au format Bitmap 24 Bits. Est fixé à la barre de titre de chaque fenêtre de l'écran du bas, et permet de fermer cette fenêtre, à la manière de la célèbre croix rouge de Windows XP. La couleur verte pétard sera remplacer par ce qui est "dessous" : tout ce qui est vert pétard sert à la transparence.

desktop.bmp : 256x192 pixels au format Bitmap 24 Bits. Correspond à l'image affiché en fond de l'écran inférieur.

fbarcur.bmp : 256x16 pixels au format Bitmap 24 Bits. Convertion (par png2bmp32.exe) du fichier fbarcur.png (256x16 pixels au format png) contenant des informations de transparence. Correspond au curseur de sélection de fichier.

fbarplay.bmp : 256x16 pixels au format Bitmap 24 Bits. Convertion (par png2bmp32.exe) du fichier fbarplay.png (256x16 pixels au format png) contenant des informations de transparence. Correspond au curseur de fichier en cours de lecture.

prgbara.bmp : 256x16 pixels au format Bitmap 24 Bits. Correspond la barre de progression de lecture de fichier audio (durée écoulée).

prgbard.bmp : 256x16 pixels au format Bitmap 24 Bits. Correspond la barre de progression de lecture de fichier audio (durée restante).

sb_bg.bmp : 8x8 pixels au format Bitmap 24 Bits. Correspond au fond de la barre de défilement.

sb_body.bmp : 8x8 pixels au format Bitmap 24 Bits. Correspond au motif de la barre de défilement.*

sb_part.bmp : 8x8 pixels au format Bitmap 24 Bits. Correspond aux extrémités de la barre de défilement.**

sysicon.bmp : 16x16 pixels au format Bitmap 24 Bits. Correspond à l'image en heut à gauche de l'écran tactile qui ouvre le menu système.

titlea.bmp : 256x16 pixels au format Bitmap 24 Bits. Correspond à la barre de titre de la fenêtre active.

titled.bmp : 256x16 pixels au format Bitmap 24 Bits. Correspond à la barre de titre de la fenêtre inactive.



* Le fichier sb_body.bmp est copié est mis bout à bout pour former l'ascenseur.
** Le fichier sb_part.bmp est divisé deux (2 fois 8x4 pixels), la partie supérieur est placé en haut de la barre de défilement (ou à gauche pour les barres horizontales) et l'autre moitié est placé à l'autre bout de la barre.

Sachez qu'en présence d'un fichier image de remplissage, l'image est prioritaire à la couleur de remplissage.

Annexe : Barre de progression de lecture

Je vous propose en quelques étapes très simple de faire une barre de progression de fichier avec un petit effet de relief, en version "méthode barbare", cela va de soi... v_v

Trouver une image (sur Google par exemple).
Extraire une bande de 192x16 pixels (vous pouvez aussi prendre des barres verticalement, en faisant une rotation après, ça va de soi!).
Ouvrez-la avec Paint.NET et ouvrez en parallèle le prgbara.bmp du skin WindowsLike de MoonShell.
Observez les lignes plus foncés du prgbara.bmp et sélectionnez les lignes correspondantes sur VOTRE prgbara.bmp puis Calques/Réglages/Luminosités_contrastes et foncés les lignes pour donner une impréssion de relief.
Répétez l'opération en modifiant à chaque fois la luminosité corespondant plus ou moins à celle du skin WindowsLike.
Une fois fini, ouvrez une copie de votre fichier prgbara.bmp Calques/Réglages/Désaturation
Enregistrez ce deuxième fichier sous prgbard.bmp
Si c'est réussi, vous obtiendrez un bel effet de relief sur votre barre de progression de lecture.


5. Effets sonores

Vous pouvez modifier le fichier son qui accompagne le démarrage de MoonShell en préparant le fichier startup.mp3 dans le dossier moonshl\skin.

De plus, suivant vos paramètres (voir le tuto sur l'utilisation de MoonShell), vous avez peu être assigné la fermeture du clapet à l'extinction de la DS. Cette extinction est accompagnée de la lecteur d'un deuxième fichier son : shutdown.mp3, a placer dans le même répertoire.


6. Pour aller plus loin

Pour les plus curieux et autres skinners perfectionnistes sachez que vous pouvez aller encore plus loin dans la personnalisation de MoonShell!

Vous trouverez dans le pack de création avancé (http://www.box.net/index.php?rm=box_download_shared_file&file_id=f_104734445&shared_name=b22lz072o4) de quoi créer de nouvelles horloges et autres animations de démarrage. Ces opération étant plutôt fastidieuses, je laisse le loisir à chacun d'explorer les possibilités de ces outils

Sachez aussi qu'il existe un petit programme qui permet de tester la skin directement sur son PC, il s'agit de Phleon (http://phleon.kloplop321.com/install.msi). Ce logiciel nécessite d'avoir installé le .NET FrameWork 2.0 et supérieur, si vous avez choisis Paint.NET, cet utilitaire devrait déjà être installé.

Enfin, pour la finition, vous pouvez générer un fichier preview.bmp en copiant les deux fichiers scrcap.bmp et scrcap.nds (ces deux fichiers sont dans le pack de création de skins) à la racine de votre carte. Il suffit ensuite de lancer scrcap.nds à partir de MoonShell. Surprise! scrcap.bmp est maintenant une capture d'écran de votre Skin!!


7. Liens

-> Site officiel de MoonLight (http://mdxonline.dyndns.org/archives/nds/)

-> Site officiel de Paint.NET (http://www.getpaint.net/)
-> Site officiel de Batch Image Resizer (http://www.jklnsoft.com/)
-> Site officiel de Phleon (http://phleon.kloplop321.com/?page=main)


http://img443.imageshack.us/img443/623/preview6kg.png

FireRed 1.2 (http://www.box.net/index.php?rm=box_v2_download_shared_file&file_id=f_76543819)


http://img123.imageshack.us/img123/808/preview3et.png

Shell XP 1.3 (http://www.box.net/index.php?rm=box_v2_download_shared_file&file_id=f_76543799)

Bond@007
02/03/2006, 20h28
Merci Monsieur :)

Très chouette, je vais pas tarder à me lancer ;)

M@cZér0
02/03/2006, 20h38
Par contre c'est pas souvent claire!! J'ai souvent eu du mal à décrire ce que c'est!

la barre de progression de lecture de fichier audio (durée écoulée).

ou en core
la barre de titre de la fenêtre active
Ca fait beaucoup pour pas grand chose!

Sinon si quelqu'un pourrait me donner une idée pour stocker mon skin parce que msn group c'est pas simle pour le téléchargement!

TheStick
03/03/2006, 06h27
Merci pour le tuto, je ferai bien une skin un jour :)

Mais pourquoi utiliser un paint-like pour faire des skins? il gère les calques au moins ce truc? y'a des effets?

Je verrais plutot The Gimp ou un autre éditeur plus puissant pour ce genre de manips :)

KilGore
03/03/2006, 16h33
http://www.eecs.wsu.edu/paint.net/

y a tout comme dans les grands logiciels : http://www.eecs.wsu.edu/paint.net/screenshots/pdn25_wow.jpg <- en bas à droite y a les layers

et merci pour le tuto M@cZéro

M@cZér0
08/03/2006, 18h31
au fait c'est clair ce que j'ai écrit ou on comprend rien??

C@illou
08/03/2006, 21h09
Voila mon skin vista inspirat , je tiens à dire que je l'ai r&alisé moi même pour ceux qui ne me croirait pas (non, je ne me vante pas :whst: )
http://img516.imageshack.us/img516/2483/preview0db.png


Ici pour le télécharger, il y a encore quelques petites améliorations à apporter! (http://www.badongo.com/file.php?file=skin+for+moonshell__2006-03-08_Windows..Vista..Like.zip) (attendre 30 secondes puis clickez sur "click here to download :pirate: )

ghe
11/03/2006, 19h46
Voila mon premier Skin, j'espere que vous aprecierais. Si vous avez des notes pour que je l'ameliore n'hesitez pas.

SKIN NARUTO (http://shaff00.free.fr/skin_moon/Skin_Naruto.rar)

http://shaff00.free.fr/skin_moon/preview.bmp

t4ils
30/03/2006, 12h19
des skin sont dispo sur ce site :
http://webpages.charter.net/braineatingalienkyle/Moonshell%20skins.html

supershinobi
30/03/2006, 13h04
voila mon skin hajime no ippo

>>> http://d.turboupload.com/d/469665/ippo_skin_moonshell.rar.html <<<

http://img91.imageshack.us/img91/2735/scrcap4oj.png

t4ils
30/03/2006, 13h31
excellent !
je prends de suite :D

edit : dommage, le blanc au dessus de makounuchi mange les écritures :/

supershinobi
30/03/2006, 22h10
excellent !
je prends de suite :D

edit : dommage, le blanc au dessus de makounuchi mange les écritures :/

merci :) je posterais bientot un skin sur samurai champloo puis un autre sur metroid

simonomis
06/04/2006, 20h02
j'ai réalisé un skin et comme j'ai voulu vous le montrer, j'ai fait cette manip :
Enfin, pour la finition, créer un petit preview.bmp en copiant les deux fichiers scrcap.bmp et scrcap.nds (ces deux fichiers sont dans le dossier "Skin image preview making tool" du dossier Skin de MoonShell) à la racine de votre CF/SD/EXFS. Il suffit ensuite de lancer scrcap.nds à partir de MoonShell. Surprise! scrcap.bmp est maintenant une capture d'écran de votre Skin!!
et la console me dit "scrcap.bmp not found" alors que j'ai bien mis les fichiers nécessaires à la racine.
est-ce qu'il y a quelque chose que j'aurais loupé ???:hum:

ceci dit, je le mets quand meme à dispo puisqu'il fonctionne tres bien chez moi:)
alors c'est un skin firefox avec un peu un aspect windows.
donc voici le fichier nds (http://pyramidsong.free.fr/logiciels/ds/MoonShell.nds) et les sources (http://pyramidsong.free.fr/logiciels/ds/Firefox.rar)
j'espère qu'il vous plaira et quelqu'un m'aidera pour vous donner une preview

a+ SIM

EDIT : j'ai fait des previews avec ce que je pouvais :
http://pyramidsong.free.fr/logiciels/ds/MoonShell/Sources-skin-Firefox/preview.jpghttp://pyramidsong.free.fr/logiciels/ds/MoonShell/Sources-skin-Firefox/preview2.jpg

sedjiro
23/04/2006, 18h20
Bravo :w00t: franchement c'est excellent je vais tout de suite essayer ca :)

simonomis
23/04/2006, 21h19
je vous présente mon nouveau skin sur le theme de la super nintendo
-> ici (http://supercard-fr.info/forum/viewtopic.php?p=2559#2559) B)

snk4ever
28/04/2006, 15h18
J'ai fais un sujet pour présenter ma skin d'une japonaise nommée Yamamoto Azusa.
Si je fais d'autres skins, elles seront là bas aussi.

enjoy !

http://playeradvance.org/forum/showthread.php?p=45491#post45491


Question : est ce qu'on peut changer le Jingle qui se joue au lancement de MoonShell ?
Il y a une option pour l'activer ou non mais je n'ai rien vu pour changer le son.

edit : bon finalement, il y a maintenant 4 skins

toto
05/05/2006, 12h39
Skin OSX que je trouve très sympa :
http://supercard-fr.info/index.php?option=com_content&task=view&id=145&Itemid=83

Question : est ce qu'on peut changer le Jingle qui se joue au lancement de MoonShell ?

Oui puisque le skin OSX présenté plus haut fait un bong comme les Mac au démarrage.

snk4ever
05/05/2006, 13h35
Oui puisque le skin OSX présenté plus haut fait un bong comme les Mac au démarrage.

oui j'ai trouvé entre temps, il y a un fichier startup.mp3
depuis Moonshell me lance un Hoayo ! quand je l'allume ^^
il faudrait que j'upload le mp3 d'ailleurs

guyom59
28/05/2006, 19h40
merci pour ces explications

Zepman
28/05/2006, 23h36
je ne l'avais pas vu ce tuto!
bravo et merci, il est accessible dans la partie tuto/soft de la page d'accueil ^^
http://www.playeradvance.org/article.php?article_id=749

nefast
29/06/2006, 18h32
Peut on faire en sorte que la DS boot directement sur moonshell?

Frogman
09/07/2006, 14h17
Salut et merci pour ce tuto,
je voulais savoir comment vous faites pour visualiser (et donc pouvoir faire un sreenshot de) votre skin ? vous utilisez un émulateur ? si oui lequel ?
De plus le lien pour télécharger le moonshell ne marche pas :( et je voulais savoir moi g un moonshell v 1.1 et je n'avais pas les fichier skin.init et autre :( est-ce que ca peut marcher avec la version 1.1 juste en récupérant les fichier d'un de vos skin et en les modifiant et comment faut-il placer les fichier sur la SD pour que ca marche ?
Merchi

Nico52
18/07/2006, 22h50
Voici mon skin :

http://bkcreation.info/Design_SkinsDivers_SkinMoonShellNuNux.html

Je me doute que nombreux de vous ne vont pas aimer ma barre de progression mais bon, moi jla naime bien :lol:

Frogman
23/07/2006, 19h59
Voila, moi aussi j'ai fais mon propre skin. Tous ceux qui vomissent les MMORPG tournez les yeux s'il vous plait :D
J'ai fais deux arrières plans différents (qu'on ne voit pas très bien d'ailleurs, si vous pouvez me dire comment enlever toutes les fenêtres qui gènent la vue je suis tout ouïe :) .) N'hésitez pas a donner votre avis car je n'arrive pas à me décider. Pour le premier, l'image de base est moins belle mais le fait de la couper en deux rend mieux. Et pour le deuxième l'image est plus belle mais le découpage rend pas super.

link 248
15/08/2006, 22h01
Salut a tous je viens d'arriver sur le Forum !
J'aimerai savoir si quelqu'un a des skins ZELDA ou DRAGON BALL Z pour mon moonshell ?

trex998
21/04/2007, 13h31
Salut, moi j'ai fait un site de skin, il y en a 38: http://moonsk.titi-serveur.net

Kcinnay-67
29/10/2007, 18h50
moi je n'arive pas a faire le preview il me marquer "not support adapter?" et quand j'ai eseiller par les jeux sa ma fait un screen mais pas celui que j'avais quelquin c comment faire

Lesasukedu21
23/12/2007, 17h05
Je suis sur supercard SD, j'ai patcher au préalable avec le dldi correspondant le fichier de generateur de preview, je fais la manip comme vous dites avec moonshell mais voila vient un probleme les fichiers affiché sur la preview sont bon mais l'apparence est toujours la meme qu'importe le skin voila ce que ca donne. help:S

http://img135.imageshack.us/img135/9255/scrcapjk5.png

M@cZér0
19/01/2008, 01h31
Bien sûr... :disgust1: (http://gueux-forum.net/index.php?showtopic=169911&st=0&gopid=1246345&#entry1246345)

archipel
19/01/2008, 08h23
xD les citations sont parties a la trape (juste avant le grand 4)

k3nny.v3nom
04/02/2008, 02h03
merci pour ce tuto même si j'avais déjà fait un skin à l'arrache avec des images (du disque d'installation du M3 DS Simply) remixées en un seul pack

une jolie fleur d'hawaï en rouge avec une barre de chargement Mac sur laquelle j'ai rajouté des crans d'indications pour de pas trop décaler le son quand je veux passer d'un passage à un autre d'un film

Rammstein
11/04/2008, 16h16
Lut!!! moi c'est FlaW! a peine j'ai découvert ce site ke je l'aime deja. bah oui. j'ai la DS avec un max media player et surtout Moonshel; et bien d'autres... alors ce site ma bien plu.

(suis pas un pro du PC alor faut etre cool avec moi)

maintenan, pour allé droit au but, je m'amuse a faire des skin pour moonshel (on s'occupe comme on peut :p ) mais comme suis pas un boss sur mon PC et que ca me ferrai plaisir de les partager, je vous demande de m'apprendre.

Cobain
11/04/2008, 17h02
t'es sur la page du tuto donc t'as plus qu'a lire <_<

Montspy
11/04/2008, 20h54
Voila mon skin (en 6 couleurs) Moonshell Skinny :

(Tous les fichiers sont des archives *.rar)

Skinny - Red (http://montspy-dev-blog.clanfree.net/SkinsMoonShell/Skinny-Red.rar)
Skinny - Pink (http://montspy-dev-blog.clanfree.net/SkinsMoonShell/Skinny-Pink.rar)
Skinny - Orange (http://montspy-dev-blog.clanfree.net/SkinsMoonShell/Skinny-Orange.rar)
Skinny - Grey (http://montspy-dev-blog.clanfree.net/SkinsMoonShell/Skinny-Grey.rar)
Skinny - Green (http://montspy-dev-blog.clanfree.net/SkinsMoonShell/Skinny-Green.rar)
Skinny - Blue (http://montspy-dev-blog.clanfree.net/SkinsMoonShell/Skinny-Blue.rar)

http://montspy-dev-blog.clanfree.net/SkinsMoonShell/PreviewRed.png
Image créée grâce a Phelon

J'éspère que ça vous plaira !

Bye.
Montspy.

M@cZér0
11/04/2008, 21h44
Ca à l'air sympa vue de l'archive mais tu pourrais nous faire une pitite preview au moins sur un modèle?

Montspy
11/04/2008, 21h52
Yep ! Je m'y mets tout de suite ! :)

Edit : J'ai édité mon post au dessus pour mettre une preview scrcap.nds et scrcap.bmp ne fonctionne pas

Rammstein
12/04/2008, 03h44
bijour! j'ai pas trouvé le pack de création avancé si quelqu'un peu mettre un lien pour le telecharger en direct... merci

de plus, je voudrai savoir sil est possible de partager mes création de skin sur le site, le tout gratuit!!?


svp aidez un pauvre gars qui a du mal!!!