Notepad++ – Or some other text editor that supports syntax highlighting. You can use Windows built-in Notepad but Notepad++ has some great features and it is absolutely free.

Total Commander – download, install it and set it up like in video below. Watch it on youtube directly for better quality.

What features are important that makes TC (Total Commander) ideal for skinning?

First of all much better file manager than Windows built-in explorer will ever be from my point of you. Windows Explorer is  better (In Vista and newer versions) for file previewing, modes of view and such but for skinning purposes I would strongly recommend TC.
- Great archive handling since Aston2 theme formats (a2theme, and a2menu ) are infact zip files with renamed extensions.
- Fast editing by pressing F4 key
- Better workflow
- More control over files
In next tutorial I’ll show you TC in action and how these features come handy in actual skin making process.

Graphics Editor – I suggest Adobe products such as   Photoshop, Illustrator or Fireworks but feel free to use what ever to make your graphics files. I use them all but in the past two years or so I am more focused on Illustrator and Fireworks.

How to start and how the hell do I use these tools?

First thing first choose a theme that has a layout that you like. It will be much easier for us to work with something that has a taskbar style, or menu style that we would like to apply in our own theme. Download it (do not apply it) from website to a location where you want to work from,(for instance e:\theming \new skin\) and follow these steps.

1. Make new folder name it backup  inside e:\theming \new skin\backup and copy the theme to that folder for safe keeping in case we make some mistake.
2. Now rename the theme – give it a name test.a2theme, you can change that when ever you like so don’t worry about that.
3. Drag the theme to TC toolbar for fast launching and testing. Why? – In order to apply theme you can just double-click it or even faster you can drag it to TC toolbar and apply it with just a single click when you make changes, and believe you’ll be making them a lot.
4. Enter the theme by pressing Ctrl+PageDown keys, if you just double click the theme file the theme will just be applied this way you’ll enter inside the theme without unpacking it.
5. Edit basic theme info by pressing F4 button and save it.
And we are ready to truly go.
Watch all this steps in video below, it should all start having sense. Of course this is the beginning, from here we are really ready to make serious theme alterations which will happen  in the next tutorial.

I’ll give you few days to get to know these tools before we continue.
You can use other tools that have similar functions to TC like Directory Opus or even better FreeCommander which is btw free but I don’t use them so I cannot guarantee that all the stuff will work the same way.

What will I present you here is two “anatomy maps” or “cheat sheets” and the way to use them. Easiest way  to make a skin for Aston2 Menu is to find a skin that has the layout that you like, analyze it and make your skin on top of it.

Step1

Go to the skin location (in my case on Vista 64 – C:\Users\krsta A2\AppData\Roaming\Aston2\Skins\Menu\) and copy skin to location where you want to work with it (E:\NewSkin\…or something), I’ll use my Chillounge skin so I’ll copy Chillounge.a2menu. Normaly I would use Total Commander but I’ll write special tutorial on using TC for skinning. Now extract Chillounge.a2menu by using any zip application (I recommend 7-zip ) and unpack it to for instance to E:\NewSkin\Chillounge\ you’ll see this files

You can see a2menu.xml which defines skin layout but that is a bit advanced for now,  DimPal or me will get into explaining that pretty soon but please go on and explore if you wish, index.xml which contains skin  info but we’ll get to that soon and prev.jpg which is skin preview that you see while browsing for skins in Theme Wizard.
And inside Aston folder you’ll find:
Besides XML files (Menu.xml,Panel.xml and Serach.xml) you’ll find skin.png file. That is the one we need!

Step2

Open skin.png file in your favorite graphics editor (PhotoShop,Illustrator, Fireworks….) and place it on  new layer which will be on the bottom of all layers you can even set transparency to 30 -40% but remember that you work on top of it so later when you are done with positioning of your elements you can freely remove that layer or hide it from view.

In order to figure out what goes where I made two “anatomy maps” and they are below (click on them and zoom in to see them full size):

And a bit easier to follow:

OK once you have positioned all where it should go remove or hide the layer you used as a guides. Save your file and export it to png file format. Save it as skin.png.

Step 3

Now to see how your theme works repack it again with your new skin.png file. Open zip packer (7-zip) select all of the files from Chillonge folder (where you unpacked all the files from Chillounge.a2menu) and select all of the files including Aston folder

And add it to archive but remember to pay attention to important details marked on the screenshot below:

And there you go you got yourself a skin.

Final Steps

There are only few things left to do (before you do the packing).

To change the description of the skin and the skin author name that you see displayed in Theme Wizard before you do the packing to a2menu format open file index.xml (any text editor like notepad will do but I recommend Notepad ++) and change the lines you see below and save it again.

And make your own skin preview image 500x350px and save it as prev.jpg. Now you can  pack that all again in to newskin.a2menu.
And oh yeah to apply the new skin you just created just double-click it and it will be applied and copied to skins folder.

That is about it. It is the easiest way to make Aston2 Menu skin but the bad side of this method is that you need to limit yourself to already existing layouts and while designing skins you have to keep that always in your mind. But before we get WYSIWYG skin editor we need to work with what we can. I would also suggest you to use Construction Aston2 Menu skin made by Alexander Zhelonin since it has marked positions for the elements and it can be very helpful also.

Next time I’ll dig in to xml editing a bit more since this method and tutorial does not cover changing fonts and fonts color which is pretty important too. Anyhow I hope you’ll find this useful and it will make your skinning easier.