How to Make a skin

User Pages

Created by titen96titen96 on 13 Mar 2010 22:40
Updated by titen96titen96 on 07 Jun 2010 21:24

| edit page | upload files |

If you need help making a skin or dont want to use a rom manager or the skin tester to make one download the file below:

How To Make a Skin.zip 9.08 kB

Here's the guide from the text file taken from Team Cyclops Forum:

Creating Skins for CycloDS Evolution
====================================

The CycloDS Evolution user interface is composed of several screens:

- The main menu
- The game list
- The cheat code list
- The settings screen

Each of the screens is drawn using a combination of bitmaps and software
widgets which use colours specified within the skin. Skins for CycloDS 
Evolution are broken into 2 parts - the bitmap files and an XML file to 
specify which bitmap files to use and which colours to use for various
parts of the user interface. 

------------
Bitmap Files
------------

Skins are made up of 5 bitmap files:

- Top screen bitmap, drawn on the top screen of the NDS for all screens
- Bottom screen bitmap, drawn on the bottom screen of the NDS for all
  screens.
- Menu icon bitmap, used to draw the icons in the main menu. The icons
  are drawn over the top of the bototm screen bitmap.
- Scrollbar bitmap, used to draw the scrollbar for the game list and
  cheat code list. Drawn over the top of the bottom screen bitmap.
- Cheat code icons, used to display icons (folder open/close, code
  selected/de-selected and radio on/off) in the cheat code screen.
  Drawn over the top of the bottom bitmap.

All bitmaps must be standard windows format 24-bit .BMP files. You may
specify a transparent colour for each of the bitmaps; if specified then
any pixel in the bitmap which colour matches the specified transparent
colour will not be shown. 

The top screen bitmap must be 256x192. It is essentially static and is
simply drawn on the top screen with nothing else drawn over it.

The bottom screen bitmap must also be 256x192. The software assumes
that the bottom screen bitmap has 2 bars, each 16 pixels high, at the top
and bottom of the bitmap. These bars are used to draw status information
such as the time, the software version, the working directory etc. This
is illustrated, along with the position of the main menu icons in the file
"bottom_with_icons.bmp". Please note however that this bitmap has the main 
menu icons drawn ONLY to illustrate their position; the bottom bitmap
for any skin should NOT include the main menu icons. The bitmap also 
includes X,Y co-ordinates to show where the bars should be located and to
show where the icons will eventually be drawn by software.

The icon bitmap must be 128x192. It is divided into 6 squares, each 64x64
in size. These squares make up the 3 icons (Games, Media, Settings) with
2 states for each icon - selected and de-selected. This is illustrated in
the file "menu-icons.bmp". In this example the transparent colour is 
megenta (#FF00FF), so any pixels of that colour will not be shown when the
menu icons are drawn over the top of the bottom bitmap.

The scrollbar bitmap must be 8x64. It is divided into 2 parts - a 8x48
scrollbar part and a 8x16 fill part. When the scrollbar is drawn, 
first the 8x16 fill part is repeated to fill the scroll area on the
right hand side of the screen. Then the 8x48 scrollbar part is drawn
over the top in the correct position. This is illustrated in the file
"scrollbar.bmp". The scrollbar is at the top, from y=0 -> y=47. The
scroll fill then follows, from y=48 -> y=63. In the example, some pixels
around the edge of the scrollbar are drawn as magenta to make these
pixels transparent and give the scrollbar a rounding effect.

The cheat code icon bitmap must be 32x48. It is divided into 6 squares,
each 16x16 in size. These squares make up 3 icons with 2 states for
each icon (folder closed/open, code off/on, radio off/on). This is
illustrated in cheat-icons.bmp. Once again in this example the
transparent colour is set to magenta.

IMPORTANT NOTE: Be careful when using the transparent colour
to make sure that any opaque pixel is NOT blended into the background.
If this happens then (assuming the transparent colour is magenta) you
will have pixels blended with the magenta background which will not be
made transparent and will result in your icons etc having an ugly
magenta outline.

--------
XML File
--------

Each skin has an XML file which must be named "skin.xml". This file specifies
colours for the software widgets and the filenames of each of the 5 bitmap
files which make up the skin. The file "example-skin.xml" contains an example
XLM file; each part of this example file is described below:

****

<top-bitmap file="top.bmp"/>
<bottom-bitmap file="bottom.bmp"/>
<menu-icon-bitmap file="menu-icons.bmp" transparent-colour="FF00FF"/>
<cheat-icon-bitmap file="cheat-icons.bmp" transparent-colour="FF00FF"/>
<scrollbar-bitmap file="scrollbar.bmp" transparent-colour="FF00FF"/>

****

The lines above specify the filename for each of the 5 bitmaps, along
with the transparent colour.

****
<window-fill colour="FFFFFF"/>
<button-fill colour="b2dfe3"/>
<window-border colour="00A9CC"/>
<text-list colour="000000"/>
<text-window colour="000000"/>
<text-status colour="FFFFFF"/>
<selection colour="98d4d9" transparency="7"/>
****

The lines above specify the colours used for the software widgets:

window-fill:   This is the colour used to fill the dialog box windows
window-border: This is the colour used as a border for dialog box windows
               and for the outline of buttons.
button-fill:   This is the colour used to fill the selected button for the
               button dialog boxes (such as the cheat code prompt).
text-list:     This is the colour used to draw text for the game list and 
               cheat code list. This text is drawn over the middle area of 
           the bottom screen bitmap.
text-window:   This is the colour used to draw text for dialog box windows.
               This text is drawn over the "window-fill" colour.
text-status:   This is the colour used to draw text for the status info such
               as the current working directory, time etc. It is drawn over
           the top and bottom "bars" in the bottom screen bitmap (ie: the
           first and last 16 vertical pixels).
selection:     The colour specified is used to draw the selection bar over the
               selected item in the game list, cheat code list or settings menu.
           The transparency value is used for blending the selection bar
           into the background. The range of this value is from 0-15; the
           higher the value the more transparent the selection bar will be.

Replies to How to Make a skin

rating: +1+x

To post a message, you must first become a member.

15 Mar 2010 13:29

I think this is a good idea for a page.

How about a full-blown tutorial though? ;-) Would be great to have a tutorial, where you allow people to download that in the first step, then go through step-by-step (with screenshots) on how to edit those images and create a unique skin.

Play Minecraft? Join s.mcleiger.com today!
Minecraft Server Website

NDS lite (Jet Black) FW v5 | CycloDS Evo (Black) HW 1.1 | Transcend 8GB µSDHC Class 6 | EzFlash V 3in1+ (Black)
Nintendo 3DS: Message me if you want to exchange FC. Lost your game save files? You might want to try one of these.

Cannot edit (old post)

15 Mar 2010 17:24

I did make a fairly detailed post about making skins (I think it concentrated on the config.xml) on TC; if I find that I could copy it over.

ShopTemp.gif

Cannot edit (old post)

15 Mar 2010 19:49

you mean a post like this?

http://www.teamcyclops.com/forum/showthread.php?t=701

or this?:

http://www.teamcyclops.com/forum/showthread.php?t=8665

and this is where i found the file

http://www.teamcyclops.com/forum/showthread.php?t=122

"At first, this completely shocked me. Then I found a neat picture of a bunny and posted it at the top of the article. Hello there, bunny!"

Cannot edit (old post)

17 Mar 2010 12:45

You just copied that from the file? Hmm.

I'm going to make an "official" Revolution guide and stick it in the FAQ, then post a bunch of links to alternative guides. So if you want to post a copy of yours here Proto I can link to that, otherwise I'll just link straight to the copy on the TC forums instead with no need to copy it. It's up to you.

Play Minecraft? Join s.mcleiger.com today!
Minecraft Server Website

NDS lite (Jet Black) FW v5 | CycloDS Evo (Black) HW 1.1 | Transcend 8GB µSDHC Class 6 | EzFlash V 3in1+ (Black)
Nintendo 3DS: Message me if you want to exchange FC. Lost your game save files? You might want to try one of these.

Cannot edit (old post)

17 Mar 2010 15:15

Don't worry about it, the posts that titen96 linked to have the details I mentioned too, I think.

OT: I finally replaced my DS :D I have some catching up to do in terms both of updating and putting new cheats and new Moonshell on.

ShopTemp.gif

Cannot edit (old post)

17 Mar 2010 21:38

nice guide. now i know how to make a skin properly. :)

I own: Gameboy Advance SP (Cobalt) | NDS lite (Jet Black) | CycloDS Evolution (Black) 2.1
Creator of: Mario And Luigi Entertainment | Fingerz - me, myself and I
Proud member of: CycloDS Revolution | Pokémon HG/SS | Saves

Cannot edit (old post)

25 Apr 2011 13:27

I have a question. What's a transparent color and how make it?


Included page "signature:anonymous" does not exist (create it now)

Edit

26 Apr 2011 03:04

A transparent colour is a part of the image that won't be shown on the CycloDS GUI. So whatever is behind the image (e.g. the background) will be shown instead.

You can use any colour you want, as long as you specify it in the skin.xml file.

Does that help ?

This might be useful as well: http://www.google.com.au/search?q=define%3Atransparent


Play Minecraft? Join s.mcleiger.com today!
Minecraft Server Website

NDS lite (Jet Black) FW v5 | CycloDS Evo (Black) HW 1.1 | Transcend 8GB µSDHC Class 6 | EzFlash V 3in1+ (Black)
Nintendo 3DS: Message me if you want to exchange FC. Lost your game save files? You might want to try one of these.

Edit

26 Apr 2011 14:00

Thaks for the definition. But in Photoshop, how?
I try create a traparent layer with color, when I test my skin, I see the color background.


Included page "signature:anonymous" does not exist (create it now)

Edit

26 Apr 2011 14:06

I mean the color outline.


Included page "signature:anonymous" does not exist (create it now)

Edit

29 Apr 2011 04:06

Hmm, Photoshop I'm not sure about as I don't have that program - too expensive for me. If it would help, I can explain how to do it in Paint.NET, which also supports layers.

If you could post a screenshot showing your image open in Photoshop that might help me to understand what the issue is.

But… it sounds like you are simply using the wrong colour according to your skin.xml file. Check what transparent colour you have set for menu-items (or whatever part of the skin you are editing), and make sure that the 6-figure HEX value for the colour matches exactly to the colour you are using in Photoshop for transparency.

Does that help?


Play Minecraft? Join s.mcleiger.com today!
Minecraft Server Website

NDS lite (Jet Black) FW v5 | CycloDS Evo (Black) HW 1.1 | Transcend 8GB µSDHC Class 6 | EzFlash V 3in1+ (Black)
Nintendo 3DS: Message me if you want to exchange FC. Lost your game save files? You might want to try one of these.

Edit

29 Apr 2011 15:28

Thanks, I will try Paint.net. For skin.xlm, I use SkinTester for my skin as software. I can test my skin for the color and I can see the problem in my picture.


Included page "signature:anonymous" does not exist (create it now)

Edit

29 Apr 2011 15:51

It's works, thank you very much. I like Paint.net. By the way, I use Photoshop only at school. My software on my computer is GIMP. It's easy and free, but Paint.net is very fun.


Included page "signature:anonymous" does not exist (create it now)

Edit

29 Apr 2011 19:36

Got it working… awesome!

I use Paint.NET all the time on Windows, it's a great program.

I have a Mac as well now but don't really like GIMP so I'll probably try to get Paint.NET working on here instead, using Mono or a virtual machine.


Play Minecraft? Join s.mcleiger.com today!
Minecraft Server Website

NDS lite (Jet Black) FW v5 | CycloDS Evo (Black) HW 1.1 | Transcend 8GB µSDHC Class 6 | EzFlash V 3in1+ (Black)
Nintendo 3DS: Message me if you want to exchange FC. Lost your game save files? You might want to try one of these.

Edit

03 Sep 2011 06:50

Does someone know where to get a micro sd card?

reeper.jpeg

Included page "signature:anonymous" does not exist (create it now)

Edit

06 Sep 2011 23:04

Any tech store at your local shopping centre, or search online for one. :)


Play Minecraft? Join s.mcleiger.com today!
Minecraft Server Website

NDS lite (Jet Black) FW v5 | CycloDS Evo (Black) HW 1.1 | Transcend 8GB µSDHC Class 6 | EzFlash V 3in1+ (Black)
Nintendo 3DS: Message me if you want to exchange FC. Lost your game save files? You might want to try one of these.

Edit

Add a new comment

This work (images and text) is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 Australia License. CSS theme & forum code is licensed under standard copyright (c) 2010.