This is a work in progress and intended primarily for beginners. Most tech-savvy people can already figure this out on their own. I'm not including specific images that would generally not be edited such as the check boxes, however, at a later time I may feel like placing them on here. This is mostly a work in progress, and it's certainly not as good as I want it to be (I'm having one of those pessimist moments again) but I guess I'll figure out a way to improve it later. I know the format is extremely compressed but the point of that is to get where you want to be right away and to lessen loading times. I thought that the whole 4 step process thing might look nice. There are tiny FAQ's on the bottom of the steps, so that I can avoid making a big FAQ section later. Make sure to post if you have problems or suggestions or if you have something nice to say about it. Please keep your criticism civilized. I spent 6 hours on this and it would be nice to get some nice comments.
These are the basic files required for making your skin, and some of the ones that will be invaluable.
- Moonlight's Moonshell 2 SkinTools
Compiles the images into a Moonshell 2 compatible skn file.
- Jurassicplayer's Skin Preview Tool
Allows you to preview a skin without having to go to your DS.
- Kaze no Fish's Skin Unpacker
Unpacks an skn file to obtain the images used to make it.
All of these can be downloaded in a zip file here uploaded for your convenience.
Download
Once that's done, open your file explorer and proceed to the skin making folder right away and take your language pick of the default folders already provided, or just copy the files to a new folder.
This section is intended for the tools that you can use to edit the images themselves. Here's a couple of the most popular (and free) ones. Of course, you can also use expensive software like Photoshop or PaintShop Pro, but it's probably going to be just as useful as a typical freeware editor is for this task. The names are clickable by the way, they direct to the download link.
- GIMP
The complete and advanced free editing package, GIMP is doesn't have as many features as its expensive rival, Photoshop, however to make a skin, this is perfect.
- PAINT.NET
A fantastic alternative to the Microsoft included Paint, this is intended to be simple yet have many more features than Paint.
- Paint
You'll find that you use this a lot for skin editing, especially when handling BMP files. In case for some reason you don't have it, I managed to find a download.
- Photoscape
A well designed and easy to use editor, it has a very extensive feature set and may even rival GIMP.
- Pixia
Pixia is an editing tool that originated from Japan. It has a very intuitive and well aligned interface and makes it quick to use.
Here are a few more resources that could be useful in your endeavor. If anyone has something to add here, please post it. It would be useful.
- Fotosizer
I found this incredibly useful. Not only can it convert an image from what format to another, it can do it to multiple images and resize them. It's interface is simple and very intuitive.
- Moonshell FAQ
You may find the index of skins useful to unpack. It's outdated (you can blame me for that) but it still works, it's just missing a bunch of skins.
- Janouis' Skin Index
Another great selection of skins to unpack. All of his skins are of top quality.
Icon used for all folders.
Icon used for image and graphics files.
Icon used for NDS file homebrew and games.
Icon used for skin files compatible with Moonshell..
Icon used for audio format files and playlists..
Icon used for text files..
Icon used for files that cannot be opened by Moonshell..
Icon used for to go back to the previous folder.
Icon used for DPG video files.

FL_BG_Top.bmp
The background of your top screen when overlapped by icons.

FL_BG_TopMsg.bmp
The background of your top screen when not overlapped by icons and displays the controls.

FL_BG_Bottom.bmp
The background of your bottom screen.

Setup_BG_Top.bmp
The background of the top screen during the setup when launched.

Setup_BG_Bottom.bmp
The background of the bottom screen during the setup when launched.

SCD_BG.bmp
The background of the top screen when in the text viewer and set to the appropriate option. Matched with a digital-looking font.

SCE_BG.bmp
The background of the top screen when in the text viewer and set to the appropriate option. Matched with an animated looking pink font.

SCN_BG.bmp
The background of the top screen when in the text viewer and set to the appropriate option. Matched with a clean and simplistic font. This is set by default.

MemoEdit_BGTop.png
The background of the top screen of the memo pad before writing.

MemoEdit_BGBottom.png
The background of the bottom screen of the memo pad before writing.

mp_bg.bmp
The background of the bottom screen of the media player.

Launch_BGTop.bmp
The background of the top screen when in the launch menu.

Custom_BG.png
The background used for the settings menus.

Launch_Tab0_Launch.png
The background of the launch tab when the accessories menu is active.

Launch_Tab1_NDS.png
The background of the launch tab when the application menu is active.

SysMenu_BG.png
The background of the system menu screen.
- mp_mode-allrep.pngButton that represents the media player mode "All Repeat".
- mp_mode_random.pngButton that represents the media player mode "Random".
- mp_mode_repeat.pngButton that represents the media player mode "Repeat".
- mp_pause.pngButton that allows you to play the currently paused media.
- mp_play.pngButton that allows you to pause the currently played media.
- mp_next.pnButton that allows you to go to the next media file in the folder.
- mp_prev.pngButton that allows you to go to the previous media file in the folder.
- mp_stop.pngButton that allows you to stop the current media that's open.
- MP3Cnt_p2_play.pngButton that allows you to play a paused audio file.
- MP3Cnt_p2_pause.pngButton that allows you to pause a playing audio file.
- MP3Cnt_p1_prev.pngButton that allows you to go to the previous audio file in the playlist or folder.
- MP3Cnt_p3_next.pngButton that allows you to go to the next audio file in the playlist or folder.
- MP3Cnt_p2_stop.pngButton that allows you to stop a currently opened audio file.
- MP3Cnt_p4_allrep.pngButton that represents the MP3 player mode "All Repeat".
- MP3Cnt_p4_repeat.pngButton that represents the MP3 player mode "Repeat".
- MP3Cnt_p4_shuffle.pngButton that represents the MP3 player mode "Shuffle".
- mp_backlight.pngButton that represents the backlight adjustment function.
- SB_DownBtn_Normal.png, SB_DownBtn_Press.png, SB_UpBtn_Normal.png, SB_UpBtn_Press.png The scroll bar icons for down, down when pressed, up, and up when pressed respectively.
- SB_Grip_Normal.png, SB_Grip_Press.png, SB_GripBG_Normal.png, SB_GripBG_Press.png, GripBottom_Normal.png, GripBottom_Press.png, GripTop_Normal.png, GripTop_Press.pngThe images that comprise of the scroll bar, each of the 4 has a version when pressed and when unpressed. They are the the base grip, the BG grip that adds to it, the bottom part of the grip and the top part of the grip.
- mp_volbar_on.png + mp_volbar_off.pngThe volume bar when it is active and when it is inactive, respectively.
- mp_seekbar_on.bmp + mp_seekbar_off.bmpThe seekbar of the media player when active and when inactive, respectively.
- mp_seekbargrip.pngThe grip of the seekbar.
- MP3Cnt_p0.pngA sign used as a label for the MP3 Player.
This is the part with no rules. Just go crazy to your heart's content. However, here are a few guidelines and recommendations.
- When making your background, try to make sure it's quality is good. If you're resizing it from something else, try not to make it look like you just squeezed the image in, make it appear natural at the given resolution.
- The icon set must be uniform, either in color or in style. Different looking and out of place icons make it seem tacky.
- Make your icons descriptive of the file. The only case where this does not apply is when using characters as icons. If that's the case, it can be whoever you want.
- Remember to make the backgrounds for the text viewer top fit with the time and calendar. More on that later.
- Remember to have a uniform theme. If all your backgrounds look like they aren't related with one another, it will be tacky.
- Your scroll bar can be custom, however if you don't know how to do that than you can just add a gradient layer or color adjustment to change the color.
- Your media player icons shouldn't be mixed up. I'm actually still not sure about the icons myself actually.
- Remember that the fonts are also editable. (I just didn't place them) Edit them to your heart's content.
That's all for this section! Happy Editing!
There is one more file that you need to take note of. That's the colortbl.ini file. This holds all the color settings that can be edited.
This one doesn't really require much in-depth with the exception of this. When editing the file, remember how to switch colors. The weird code things after each setting like ffffff, stands for the color that they represent. For example, this particular code "ffffff" is the color for white. If you can see it, then you get it now. Since we don't want to look at a long ass chart for all the color combinations in the world, we're going to turn to a simple HTML color picker like this. WEBSITE
A tip for customizing your colors. You HAVE to make it readable against whatever color background, and you also HAVE to make it look good against the background. Here's a demonstration:
HelpTop_Text=000000
HelpBody_Text=000000
DeleteFileDialog_Title_Text=ffffff
DeleteFileDialog_Body_Text=000000
FolderNameText=000000
FileNameText=000000
SelectText=f0f0f8
PopupBG=404040
PopupFrame=f8f8f8
PopupText=f8f8f8
ID3TagText=ffffff
ID3TagProgressBarAdd=000000
FileNameText=000000
You see that? Well, 00000 stands for black. What if our background was completely black? Then the text wouldn't be readable. Here's how to change that. Remember the white code earlier? That would be a perfect one to place since the text would contrast nicely and be perfectly readable. Let's change it.
FileNameText=ffffff
Now for the moment we've all been waiting for, here's how to actually MAKE your skin!
It's actually the easiest part of this entire process. Go outside of your skin folder for a while. That's it. Breathe the fresh, non-Moonshell pictures. Then, double click the BAT file that corresponds to your skin folder, like "makeskin_def_932(JPN).bat" for the Japanese folder, or "makeskin_default_forGlobalLanguages.bat" for the default English folder. For a custom folder, edit one of the existing ones, and look for a line called "MakeSkin.exe default.skn default" or something like that. Replace the default.skn with what you want to name your skin, and default with your folder's name.
Double Click.
It works.
You jump up and down with glee.
If it doesn't work, recheck if your BMP files are saved properly (has to be 24 bit I believe) and if they are sized properly. Also, check if the format is right. (I've had it quite a few times when I accidentally saved something as JPG) THEN let it work and rejoice with glee.
For the final segment, let's test out your fabulous skin. First, test it out with the skin preview tool included in the package. If that works, proceed to test it on your Moonshell. If that works again, remember to snapshot with by holding the start button for a few seconds. Then post it on GBAtemp and gloat with pride on your epic skin.
Edited by KingdomBlade, 03 May 2011 - 04:31 PM.

















