Graphics Part 1

As a break from coding, I though it might be a nice change to look at how we go about preparing graphics for the game.  Something we are a little light on at the moment.

Firstly you will need some basic utilities for tinkering.

If you are using windows, you get a free graphics package called Paint.  It's a bit limited, but this is what I have been using so far.

There are numerous other more sophisticated packages, which offer many more features, but for now Paint will do for composing the icon sheets.

One area where paint is too limited is in resizing, cropping and adjusting the colour of images. So for this I use a very good image manipulation package called Irfanview ( http://www.irfanview.com/ ).  Its free, extremely small and is very good at resizing images and adjusting their colours.

Irfanview also supports a number of plug-ins to extend its features, these are listed on the main site and I suggest getting them all.

Perhaps the most useful, for this project anyway, is one called RIOT ( http://luci.criosweb.ro/riot/ ), which optimises the images, to reduce the file size.  Keeping the file size small is important for mobile devices as they often have limited storage.

You can create your own graphics, or use existing ones from the Internet - where there are literally millions to chose from.  Google's image search ( https://www.google.co.uk/imghp?  ), shows these in a grid allowing you to see at a glance what's available.

For the first image, I want to create an icon for a group which will contain tools, so I did a search for toolbox.  The image above is what is brought up.

The third image will do, clicking on it will take you to the page where it is located in it's original form.

(This example has been reduced in size and colours for the Blog - as have most of the examples).

To work on this, simply Copy it to the clipboard (on windows, use the right button over the image and pick copy from the menu).  Open Irfanview and Paste it in.

The first thing we want to do with this is reduce the excess blank space around the edges.

This is done by dragging a box around the image so that only a tiny amount of white is visible between the edge of the image and the outline.  Don't worry if you don't get it spot on, you can move the lines afterwards.

Then go to the edit menu and choose crop selection.  The image will immediately be displayed in it's new form.

We save this version in the artwork folder with the name "toolbox source.png".  We use the .png file type so that the image keeps as much of its original detail as possible.

Now if during the editing, we make a mess of things, we can go back to this version and start again.