Thursday, 12 April 2012

Graphics Part 7

To add the icon we have just created to our tile sheet is pretty straight forward.

First we load the tile sheet master into paint.
You will notice that this is split into a series of squares - each of which is 64 x 64.  The squares each have a magenta border of 1 pixel all the way around.
We are going to use square 1 for our toolbox.

First draw a border around this square using a different colour, next put a solid magenta square into the middle, this square is 62x62 Pixels and uses the proper magenta (red 255, green 0, blue 255).

The border is a different colour as it will be a guide for the icon placement.
Then change the background colour in paint to magenta.
Skip back to Irfanview which should still have the icon loaded - the one with the magenta background.

First we need to make sure that the magenta background is still pure magenta.  It might sound weird, but adjusting the colours could have adjusted this slightly.

With the paint dialogue closed (or the pointer icon selected), click on a magenta part of the background.  In the title bar, it will tell you what colour that is.
If it's not RGB:(255,0,255) as above, then you need to pop back to paint and change the background colour to match whatever it says.

Within Irfanview, select Copy from the Edit menu or click the copy icon on the toolbar
Switch back to Paint and select paste from the Edit menu or click paste on the toolbar.
The icon should appear on the editing screen. Pop it into the square and all should be good.

If the magenta in Irfanview was different, you need to enable Transparent selection from the select button.
This means that Paint will make a pixel in the pasted object that is the same as the background colour in paint transparent.

So the dodgy Magenta pixels in the icon will match the  dodgy magenta that is the background colour in paint (since you made them the same above) and become transparent - allowing whatever is behind to show through.

When you drop the icon onto the square made from the real magenta, this will show where the  dodgy  magenta was and fix the discrepancy.

The alternative is to drop the icon anyway and then change the dodgy magenta pixels to real magenta, but the trick is finding them as they will probably look the same.

Finally, change the border of the square back to magenta - the real one.
Save the icon sheet - its the master so goes into the artwork folder.

Load the master into Irfanview and save with transparency to the media folder, overwriting the current objects.png.

No comments:

Post a Comment