Initial skinning setup, and creating first box and border----from TeediuS

里挖耳朵

This tutorial will go through starting to make a skin. It's not going to be monkey proof, and you need to know photoshop a bit, as i'll be giving rough descriptions and expect you to know what to do....but to create a decent skin, you need to know it anyway to get all looking decent.

Right firstly, grab the templates package from here it'll save you buckets of time creating all sliced files from scratch.

BTW the panels.psd included in the templates is based on XML changes done in Skye Bloo and Irn Bru Too, so if you don't use those changes, you'll need to create your own panels.psd slices otherwise it'll look weird in CM when infobar and menubar were designed as single panel, but appear seperated in CM.



Extract the templates package to a templates directory, ie X:\Templates


In your CM Skins Directory, duplicate a current skin, ie copy and paste Ter skin folder.

Rename the copied folder to be what your skin name will be, no spaces (use _ instead), ie my_skin.

within that folder, rename the xml file to be the same as the folder name, ie my_skin.xml

Open that XML file with notepad.

        <string id="name" value="Skye Bloo"/>
        <string id="auth" value="G. Thomson"/>
        <string id="desc" value="See 'Game Options\Credits\Skin by TeediuS' for more information"/>
        <double id="vers" value="1.0"/>


Modify the sections with the XML similar to these. These fields will appear in CM preferences panel; filling in your skin description. (You can have spaces here, but don't make it too long). Fill in the auth(or) name, ie YOU . Put in a description for the skin, and finally leave the vers number (incidentaly, the vers(ion) number section here is not what is used, it's the <properties version="1.00"> field that is picked up in CM

里挖耳朵

So that's you started to create your own skin. Load up CM, goto preferences and you should be able to select your own skin. Ofcourse, you've not really changed anything, so it'll look the exact same as whatever skin you've copied over, except for the preferences screen.



Now in explorer, easiest thing to do is goto your skins\graphics directory. do a search on that folder and all sub folders for png files, and then delete them (there is no use keeping graphic files in your skin that are exact same as in the other.) This way you keep the full graphics folder structure, but start creating your own files. (Any files, XML or PNG which does not exist within your skin will be used from the <flags id="prnt" value="ter"/> field in your root XML file, which defines the skin's parent (who would of thought Ter'd be a parent to so many children - Noooooooo


Now open Boxes.psd file from your templates directory.

You should see 9 layers, of which 4 are visible. The ones hidden can be deleted to clean things up.

Rename Layer 1 to be Border Outline

Rename Layer 2 copy to be Dialog Fill

Rename Layer 1 copy 2 to be Dialog Outline

Rename Layer 2 copy 2 to be Plain Fill

You should see a lot of blue squares and rectangles, and be able to make out the shape of three boxes, border, dialog and plain. To check which graphic each square creates, select the slice tool, right-click a section and select edit slice options. This will bring up a dialogue box which contains the graphics name. If it lists no_image, then it's just a space box. Spacers are used as fillers to be able to have the general shape of the complete graphic file being modified, as well as being buffers between graphics so that shadows from one don't overlap to another.


Once you figure out what sections relate to what, and have a clear visual indicator to what should be going where, you can start modifying your graphics to be as you want.

里挖耳朵

I'll go through example steps to creating your own border, and fill for one of the boxes.



In the Border Outline layer, duplicate it (to keep the original to refer to). In your layer that has been duplicated, select all and delete. Also rename to reflect the use of that layer, which will be easier to fix things up when you get to 20 layers in a file !

Using the Rounded Rectangle tool, modify the radius paramater to be 5 pixels

Create a rounded rectangle, taking up the entire square that creates the dialog box. (ie from far left up to but not includng slice 6 (which is a no image box).

Now you should have a round rectangle that had the same style as the previous border. We'll go and change some colours etc then make it a border

Goto the layer blending options. Within color overlay, pick a nice new colour. Under Bevel, make it look a nice edge you like etc etc Easiest way is to make Opacity and fill 100% so you can see what you're doing, and then go back and modify these to correct levels before outputting the file

Now you've got a fully filled box, that hopefully looks the way you want. Now to change it to a border only;

Rightclick in the shape section on the layers tab, and choose rasterize vector mask(or \rasterize\vector mask from the layer menu)

Rightclick in the shape section on the layers tab again (it should be black with white now), and select 'Set Selection to layer Mask'

Choose Select\Modify\Border and enter a border width. I usually set to about 1 or 2, but can be anything up to 10 in that template, and anything at all if you create larger edge slices. (You can change it from being a 10 pixel border slice on the template provided.....to being 25 if you create your own template/modify the slices etc for example, but that means bigger graphics files being output.) Set it to 2 for now

Select inverse, and delete. You should now have your nice new border remaining

You can repeat, putting a second border with different style ontop. Whatever your border looks like in there, should be what it appears like in CM, so make it look the way you want, ensuring that you stay within the 10 pixels edge on that template. (Otherwise the edges of the borders are chopped off, and it looks noticable)

里挖耳朵

Now we'll create a background to that border box. In the template, it's blank as i rely on the plain_middle_middle for my box backgrounds, but you can have different border and plain insides, which will look likE a box within a box in CM.



Create a new layer, put it below your border outline, name it Borderbox file, or something applicable.

With the rectangle tool, create a selection of the square making up the border section.

Fill that layer with plain white

Edit the layer blending properties. Add a colour overlay, pick a colour to suit. Add extra bevel etc to suit.

It's not good to put gradients in these boxes as it means the middle_middle has only a small component of the complete gradient, which means it repeats the small bit of gradient it's got....looks weird in CM. (You can use gradients as long as it's blended in/out within the 10 pixel border, or bigger border edges. and it's perfectly up/down)
That's it;

Now modify opactity and fill on each of your layers to suit - it's best for low settings for the borders, especially the fills otherwise the background pics will be blocked out. Do not have 100% and 100% as there needs to be some transparency (even 1%) otherwise some graphics will look corrupted within CM.



Once it looks like you want (sometimes it's hard to see what it'll be like with light transparency, so get used to change something, reload CM or switching skin back and forth to see effect);



follow this section of ter's slicing tutorial to have the correct save paramters. Choose to save the files to your skin directory\graphics\boxes. (Check via explorer that they are there, and in png format, not within an additional images directory, and not html)

里挖耳朵

Load up CM, select your skin and see what it looks like. if it was still loaded, switch from your skin to another and back again. if all was correct, be amazed at your work, and think 'this is easier than i thought'



Repeat for the other boxes, and then the remaining templates and fine-tune.
To give you an idea, some sections, even with things as simple as the expand/contract icon for the collapsable boxes, the icons were moved and tweaked about 20 times, and reloaded to get perfect!!
It's a lot of work, don't think it's a complete breeze, but once you know what you're doing, you can rattle through it. The whole of Skye Bloo took about 35 hours from start to finish, but that was including building these slices. So be prepared to spend a bit of time.


Once you've got something decent together, upload for all. No offence, but please don't upload sh&icirc;t, you might be over the moon at managing to create ANYTHING, but doesnt mean that we want skinning sites crammed with crap  (Bit of a plug - check sortitoutsi and frenchtouch as they are the best skin hosting sites for ideas, see what looks good etc) Go through beta release in forums, some people will hopefully try it out, tell you what works, what doesnt etc etc This isn't uni, so plagiarise  See how things are pieced together, see how stuff works, make it better etc.



BTW Most noticable initial changes are by doing the Panels & Boxes templates (see note at top about panels.psd file) , as they take up most of the screen. Do them first, get some quick wins and see results.

lveverer

晕

shanghai85

倒死我了！

里挖耳朵

如何？