Football Manager 2015 Skinning Guide Part 4: Editing the Skin Graphics

Graphics format

Now you have located the default graphics you need to understand how they work.

The first thing to understand is that the format of the skin graphics in FM15 has changed from previous versions, and whilst it may look more complicated at first it actually makes things easier long term.

The easiest way to explain how the graphics work is to show you in an example, so what I want you to do is to browse to the following location within your Working Folder:

\skins\fm-widgets\graphics\boxes\subsection\standard

Then if you haven't already load up FM15, make sure the My First Skin (Dark) Skin is loaded (or whatever skin it is you are creating if you gave it a different name) and browse to the Overview -> Attributes screen for one of your players.

Inside the standard folder you will notice several png files and an xml file, skin graphics consist of three items, two of which you can see here;

Png graphic

This controls the basic layout of the graphic, in this folder you can see we have a png file called paper which is a pinkish colour with round edges, it is pink because the file has some transparency but we will explain the reason for the actual colour in bit. This graphic controls among other things the shape of the box that surrounds the player attributes panel on the player profile screen that you should be on in the game – note how the attributes box in game has rounded corners and has some transparency to it.

There is also a png file with the @2x bit in it, these files are used when you use one of the zoomed in modes and are to ensure that the skin still looks sharp when zoomed, and in basic terms you just create this with double the dimensions of your normal graphic.

Xml file

The next file we are interested in is the xml file, the xml file will take the same name as the base graphic (in this case paper) and this controls the settings of the graphic, however for basic skinning you shouldn't really need to edit these files, you'll mainly use them as a reference to see how the colours are controlled, but I'll explain in detail what each of these settings do in the next section of this guide.

Colour Settings

You'll notice that whilst the actual paper png file is pink, in game the box appears dark grey, this is because as alluded to in the previous guide graphic colours are now controlled by the same code that colours the text rather than by the actual graphics. I'll cover this in more detail later but it basically makes recolouring your skins a whole lot easier than in the past as you no longer need to manually colour and recolour loads of png files (the other advantage is that all the default graphics are now located in one place rather than several like in the past).

Changing the appearance of the graphics

Now I am going to run you through some basic examples of how to edit the skin graphics, we will again use the subsection box graphics as an example.

First you need to copy some of the existing contents of the standard box over to your my_first_skin however when copying files over they need to keep the same file structure so to copy over the contents of the standard folder you will also need to create the same file structure as found in the default files.

So browse to your my_first_skin folder and inside it create a new folder called graphics, then inside that folder create a new folder called boxes, then inside that create a new one called subsection and then inside that create a new folder called standard. Finally from the Working folder copy over the paper xml file (we don't need the other ones for this example) to your newly created standard subfolder, so inside your my_first_skin folder you should have something that looks like this:

Now what I want you to do is to open your preferred image editing program and create a square image, of 400x400 pixels.

Now make the right hand side of the image red (RGB: 255, 0, 0), the left had side blue (RGB: 0, 0, 255) now cut a triangle out of the bottom left corner and a curved bit from the top right hand corner leaving the cut areas transparent. Now add a green (RGB: 0, 255, 0) trim around the edges of the coloured bits so you are left with a shape that looks like this (the exact shape doesn't really matter, and you can save and use my example if you want to save some time):

Now save the image as a png file (make sure the transparency/opacity option is set if available) call it paper and save it into the above location.

Now reload your skin in FM and the attributes part of the player profile screen should now look a bit like this:

You'll notice that the in game image doesn't quite look the same as the image you created (colour is different and shape is slightly wrong) this is because the graphic is also controlled by the paper xml file that is also located in the folder.

Now open the paper xml file and you'll see various bits of code, most of this code is commented to explain what it does but I'll give you a quick explanation and some examples below.

Image Borders

<record id="image_borders" left="10" right="10" top="35" bottom="5"/>

This determines how far inset from the sides the content of the box appears, so for example if you adjust the left value to 50 and then reload the skin you'll see the margin on the left has increased, however note that the title hasn't shifted over as this line doesn't affect the title, which is why you'll notice that the top value is set to 35 and not 5 like the bottom, if you set the top value to 5 and reload your skin you'll see the attribute tables have shifted upwards and now cover the title text.

Title Inset

<integer id="title_top_inset" value="8"/>

<integer id="title_bottom_inset" value="0"/>

<integer id="title_left_inset" value="10"/>

<integer id="title_right_inset" value="10"/>

These bits of code determine the position of the title text for the box, and act in the same way as the image_borders code.

The other option is the title properties one but this just controls the font used for the title text, you can change the value to point to a different font if want, for full details on how to change the font settings check the previous parts of the guide.

Though for the most part you shouldn't really need to mess around with either of these settings as the default settings will be fine most of the time, the only reason to really adjust them is if you want to free up some extra space or you have a fancy pattern that you need to fit the text around, though bear in mind if you increase these values too much content might start disappearing if it cannot fit in as there is only so much space available (also be aware that the box and panel sizes change depending on your resolution, so if you are making a skin for the community keep in mind that your fancy design might not work well at a smaller resolution – a good thing to do when skinning is to test your skin at both the resolution you play in and shrunk down to the smallest supported resolution of 1024x768 to ensure the greatest user base for your skin.)

Image Slices

<record id="image_slices" left="8" right="8" top="8" bottom="8"/>

The next bit of code is new for FM15 and determines how the graphic is split up so it can be resized to fit in the space assigned, in the past you had to manually slice up your graphic files; however this is now done in code for FM15 which makes things a whole lot easier.

Unless you are radically altering the shape of the graphics you shouldn't really need to worry about messing around with these settings.

Though in this example I have purposely made a shape that is misaligned in the bottom left corner using the default values.

In basic terms what the game does is split each graphic up into pieces (either 3, 6 or 9 pieces depending on how many directions the image needs to stretch) so the game can dynamically size the skin graphics in the game without either the skinner having to create multiple individual graphics of fixed sizes to fit each situation or leave the game with fixed sized content.

In this example the image is sliced at 8 pixels in every corner which gives you something like this (with the black dotted line roughly representing where the image is split):

Which gives nine pieces for this graphic – the top left and bottom right corners are solid green, whilst the top right and bottom left corners are both transparent, these pieces will be fixed 8x8 images in game.

Next we have the top and bottom slices, these will have a height of 8 pixels, but their width will be resized to fit whatever the width of the panel is in game, however it will keep the same dimensions, so the percentage of the width that is transparent compared to the solid colour (outside of the corners) should be the same no matter the width of the box. (You can test this in game by changing your resolution and you'll notice the attribute panel box resizes but the transparent part is kept in proportion with the solid part no matter the size of the panel).

A similar thing happens with the left and right side pieces, but these will be a fixed 8 pixels in width whilst stretching vertically to fill the space, again keeping the transparent section in portion no matter the height of the box.

Finally you have the middle section that is resized both vertically and horizontally to fill up the rest of the space.

In this example due to the way the slices are drawn the border in the bottom left diagonal doesn't line up with the bottom, so we will need to adjust the slicing to get them to fit.

If you have to adjust the slicing values to fit a shape in it is best to adjust the slicing so the shape is within a static part (Ideally in a corner).

In this example we can either adjust the bottom slicing or the left slicing. In this example the diagonal piece takes up about 120x120 pixels – you can get the value by either trial and error or by creating a copy of your image (so you don't accidentally overwrite your actual image) and then cropping the bit you want to get its size.

So to get the corner to line up perfectly and keep the same shape you want to set both the left and bottom slicing to the same values of about 120 pixels, this then changes the left bottom corner piece from a 8x8 pixel transparent square in a 120x120 pixel which includes the diagonal border bit and as this is now a static piece it fits in with both the left and bottom sides:

However note that the middle of the panel is no longer split half black half grey, this is because when we changed the left slicing we changed the middle piece from being half black, half grey to more like 2/3 grey and 1/3 black. You can even this back out by just increasing the right slicing to 120 making the middle piece again half black and grey.

Another thing to consider is when creating actual graphics for your skin you don't need to make them this big, if you noticed the default graphic is only 32x32 pixels. The less complicated your pattern the smaller you can make your graphic.

Changing the Graphic Colours

You'll notice despite making our graphic out of red, green and blue colours the game has recoloured our graphic to black and grey, this is because the other new skinning feature for FM15 is that the skin graphic colours are now controlled by code in the xml files rather than by the actual graphics, which again is a bit complicated at first but in the long term will be a great time saver, as it now means recolouring a skin is just a case of changing some values in an xml file instead of you having to manually recolour or even recreate hundreds of png files.

The first thing to know is that when creating new graphics (or modifying existing ones) is that you only want to use three colours in the graphic; Red (255, 0, 0), Green (0,255,0) and Blue (0,0,255). The normal convention is to use Red as the main colour of a graphic whilst using Blue and Green for highlights such as a border, pattern or shadow effect. Though the game doesn't care what order you put the colours in or how you use them as they are defined by yourself later anyway, it's just easier to keep to the same system used by default as it means you don't need to keep on looking back at the actual graphics when you are recolouring it later in the code.

So still using the same example as before I want you to look in the 'paper.xml' file and near the bottom you will see the following lines of code:

<colour id="red_replacement" name="box_background"/>

<colour id="green_replacement" name="box_shadow"/>

<colour id="blue_replacement" name="box_border"/>

These lines tell the game what Colour Name Variable to assign to the Red, Green and Blue bits of your graphic, so in this example the Red colour is assigned to the box_background Colour Variable.

However there is nothing in this file to tell us or the game what colour the box_background colour actually this. This is because like with the text settings the actual colour is determined by the settings set by the xml files in the settings file and these values are edited in exactly the same way as the text colours are.

If you look in the my_first_skin\settings\my_first_skin settings file you will see we don't have any of the three above Colour Names declared in this file, which means the colours are being set by either the settings for our parent skin or by the default colour settings.

As a simple exercise I want you to locate the three above colour names (box_background, box_shadow and box_border).

Hopefully you should have found those three variables near the top of the fm dark-widgets settings xml file which look like this:

<!-- Standard Box - titled box, subsection box, bordered box, tabbed box etc-->

<colour name="box_background" red="49" green="52" blue="63"/> <!-- Box background colour - red_replacement -->

<colour name="box_border" red="30" green="30" blue="30"/> <!-- Box border- blue_replacement -->

<colour name="box_shadow" red="0" green="0" blue="0"/> <!-- Box shadow colour - green_replacement -->

You'll notice that with these lines are some comments that tell you what colours they replace by default which should help you out at the start, though note in our case the graphic we designed used the green colour as the border not the blue, so adjusting the box_border value wouldn't in this case change the green border of our graphic but the blue half of our graphic – the names of the Colour Variables aren't important, the important bit is what colours they replace.

There are several methods to actually change the colours.

The simplest method is to just change the RGB values of the Colour Names the replacement colours are set to.

To adjust the colour you need to change the values for each component. Valid values range from 0 to 255, where 255,255,255 is white, 0,0,0 is black, 255,0,0 is red, 0,255,0 is green etc…

Next you need to know the RGB value of the colour you want, the easiest way to get this is from an image editing program. (Or you can use trial and error to get close to what you want, one thing I would suggest is avoid setting values to 255 as they can be a bit bright, using 248 or 240 tends to give a softer colour that looks better).

So load up paint.net, and in the Colors panel at the bottom left click the more button to expand the panel and it will now show the RGB value of the selected colour and as you change the colour on the colour wheel you'll see the RGB values change. Alternatively there is a colour picker included within the game – just go to Preferences -> Interface -> Skin Colours, then click on one of the existing colours and a colour selector pops up where you can select a colour and get its RGB value.

So what you now need to do is to copy the box colour codes from the 'fm dark-widgets settings.xml' file into the 'my_first_skin settings.xml' file.

Now I want you to adjust the RGB values of each item, the values aren't important but these are the ones I have used as an example:

<colour name="box_background" red="50" green="150" blue="150"/>

<colour name="box_border" red="150" green="50" blue="50"/>

<colour name="box_shadow" red="248" green="200" blue="0"/>

Which gives me something that looks like this in game:

So with a simple change of the RGB values above I have managed to make the blue part of our actual graphic appear red whilst making the red part appear blue and the green appear yellow, if I am not happy with these colours or the shade changing them is now just a matter of tweaking the RGB values until I am happy, which is a whole lot easier than previous games where you'd have to actually adjust the colour of your graphic until you are happy.

However one problem you'll have noticed is that when we recoloured this box it also recoloured the rest of the boxes on this screen even though they actually use a different graphic, this is because as you may have noticed from the comments in the file these three Colour Variables control the colours of most of the boxes in the game.

In a normal situation this is exactly what you want to happen, by just changing those three lines of code you have recoloured most of your skins graphics, however you'll notice that the other boxes are a different shade of blue and have no yellow or red in them, this is because they are still using the default graphic file which if you remember was just a slightly transparent red image, as their base image has no blue or green in it there is nothing for the game to recolour, if you wanted these images to change you'd need to actually change the base graphic that makes up these boxes as we did above for the subsection box.

As this is a guide what we want to do next is assign the subsection box graphic to its own unique colours.

To do this what you need to do is go back to the 'paper.xml' file and locate these three lines again;

<colour id="red_replacement" name="box_background"/>

<colour id="green_replacement" name="box_shadow"/>

<colour id="blue_replacement" name="box_border"/>

And what we are going to do is change the name they are assigned to.

There are a couple of ways to do this the simplest one is to simply assign them to a different pre-existing Colour Name, and to make matters easier the Colour Name doesn't need to be declared in your skins settings file the game will still read the values from your parent skin or from the default files (if you want to use a colour not from your parent skin you need to ensure the colour isn't declared in the parent skin otherwise you will need to copy the colour over to your skin).

As an example I am going to reassign the above values to the below names:

<colour id="red_replacement" name="low attribute"/>

<colour id="green_replacement" name="yellow card"/>

<colour id="blue_replacement" name="colour side bar"/>

So the Red parts of the graphic have been assigned to the 'low attribute' Colour Name, which if you followed the last guide should be declared in your 'my_first_skin settings.xml' file. (Which should be a Red colour)

The Green parts have been assigned to the 'yellow card' Colour Name which is drawn from the 'fm dark-widgets settings.xml' file. (Bright Yellow)

The Blue parts have been assigned to the 'colour side bar' Colour Name which is drawn from the 'fm colours.xml' file. (Dark Grey)

When assigning the Colour Names it doesn't matter if you use ones that are normally assigned to text colours, as the game doesn't make any distinction between text and graphic colours, you just need to be careful if you change the RGB values of a variable that is also assigned to a bit of text as it will also change the text colour.

After you have carried out the above changes, reload your skin in FM15 and your player profile screen should now look something like this:

As you can see the attribute box has been recoloured to red and black with a yellow border, whilst the other boxes have kept the previously set blue colour (if you want you can delete the three box lines we previously added to the settings file to set them back to the default grey colour).

Another option if you cannot find existing colours that suit is to just create your own custom Colour Name variables and assign them the RGB values you want, you can call these variables anything you want you just need to make sure you are using unique names that haven't already been used elsewhere by the game otherwise you'll end up recolouring random bits of your skin.

To do this you first need to change the names the replacement colours are assigned to in the 'paper.xml' file so for example I am going to change them to the following names:

<colour id="red_replacement" name="example_red"/>

<colour id="green_replacement" name="example_border"/>

<colour id="blue_replacement" name="example2"/>

Next you need to add and declare these custom Colour Names in the settings file so in the 'my_first_skin settings.xml' file paste in the following code:

<colour name="example_red" red="150" green="175" blue="150"/>

<colour name="example_border" red="75" green="75" blue="75"/>

<colour name="example2" red="175" green="125" blue="125"/>

This gives you this in game (with the old box colours removed so the other boxes reset to default colours):

You can add as many custom Colour Names to your skin as you want, you just need to remember to locate the xml file that declares what Colour Names the replacement colours are assigned to, a future guide will give you some hints on how to find these files, though some bits are hardcoded to either a certain colour or a certain Colour Name so your ability to adjust these items are limited.

How to only recolour the skin

If you only want to change the colour of the skin and not the shape or pattern of the graphics that make up the skin, then you can skip a few steps.

In this case the only file you need to really edit is the 'my_first_skin settings.xml' file and is done in pretty much the same way as you editing the text colours.

What you need to do is copy over the colour code from the default settings and colours xml files that corresponds to the part of the skin you want to recolour. Now most of this code is commented so it should be relatively easy to work out what it controls, if you aren't sure you can copy the code over and then adjust the RGB value to a distinct colour and have a look at what has change in game.

I'll give some hints on how to found out what does what in a later guide, however for the moment some trial and error should get you most of the way and if you still cannot find out what controls something just have a look in the forum to see if it has already been asked and if not just open up your own thread and hopefully someone will have found the answer.

What I would advise when doing this is to copy over the code for one item, recolour and check it, then paste the code for the next item and repeat until everything is recoloured, as if you copy over all the colour settings at the start you might get a bit lost regarding what you have changed.

What you can also do is add your own comments to the xml files, so you can note that you have changed something, or if you have just found what something controls you can make a comment telling you what it controls.

Recap

As this has been a fairly long guide I'll do a quick recap.

The first thing you need to do is locate where the default graphic files are, which for dark full-mode skins should be contained within the 'skins\fm-widgets\graphics' folder. The exact location can be a bit tricky to work out, but I'll give you some tips in a later guide.

Next if you want to edit the actual graphic or change the settings within its xml file you need to copy the png or xml file you want to edit into the same location for your skin, which involves creating the same folder path if not already present within your skin. (Though instead of copying the png graphic over you can create a new png file in the same location for your skin, you can also create a new xml file if you wish and manually type the code but it's easier to just copy the xml files and then edit).

If you are editing the shape or pattern of the graphic the only three colours you can use are Red (RGB: 255,0,0) Green (RGB: 0,255,0) and Blue (RGB: 0,0,255) as the game now recolours the graphics. (If you use other colours the game will still recolour them but it might not recolour them correctly).

If you have given your new graphic a non-uniform shape or pattern the next thing you need to do is make sure everything lines up correctly in game. If it doesn't then you may need to adjust the image slicing, the image borders or the title inset values in the xml file until everything fits.

When recolouring the skin graphics there are a couple of methods depending on what you want.

The first thing you need to do is to work out what Colour Names each base colour is replaced by, to do this you need to check in the xml file which has the same name as the graphic and is located in the same folder.

If you are wanting to recolour the skin in general, then once you have located the correct Colour Names it is just a case of copying these into the xml file inside the settings folder for your skin (if not already present) and then adjusting the RGB values to suit.

However if you are only wanting to adjust the colours of this particular item, then you can change the Replacement Colour Names in the graphics xml file and either assign them to an existing variable that has the correct colour or create a custom Colour Name and then declare its RGB values in the settings xml file.

Once that is done check how it looks in game and if you are happy then move onto the next item. And in no time at all you should have a nicely recoloured skin.

You can also download a copy of this guide in several different formats for offline viewing:

Redistribution Terms

You are free to post this content to your website provided:

1. It is not sold or behind a paywall.

2. You don't advertise it as being exclusive to your website.

3. My username and blog address are included: http://michaeltmurrayuk.blogspot.co.uk/

If linking to the guide please link to this page rather than the direct download links as the links may change with updates.