The creation of the Graphics for this site.

Here is the first graphic template for the page design:

(Click for full-size image)

The image above was the result of extensive 'playing' with Paint Shop Pro. I started by simply throwing colours onto a canvas to give me a base texture I could begin with. I used the 'tile' effect to give a three-dimensional feel to the design. After that I distorted parts of it to add variety throughout; such as the 'warp' effect in the top right of the image.

Here is the same image now with a border:

(Click for full-size image)

Simply added a rounded border to the template image; this is to be the border of the pages, so must look and feel pleasing...

Here is the 'Groink' title:

I wanted something weird and non-formal, which is partly why I chose a name that makes no sense. I used a font called 'BodoniMutant' which is available from many font download sites.
I had to move the letters around manually within Paint Shop Pro after typing the word to give it that more 'uneven' look. I used that lovely green-pink blend to match the colour scheme of the site.

So, the title in the template:

(Click for full-size image)

I grabbed the title from its blank background and placed it on the template so far; I added a drop shadow to blend it in and to add to the three-dimensional feel of the website.

I could see that the template image would give me a top and bottom to the website, I wanted to divide it in a way that showed the obvious partition and that the images could come together.

I decided on this:

(Click for full-size image)

(Click for full-size image)

I can work out a way (in HTML) of using the top white space for each page's title.

Now for buttons; again, adding to my three-dimensional design I created this button using a couple of features in Paint Shop Pro:

(Shapes tool and then a colourize)

Finally, to add character to the website, I added this image of a pig to the template image:

(Source: www.shawnsclipart.com)

And here is the completed top and bottom parts with the buttons and pigs in their chosen positions:

(Click for full-size image)

(Click for full-size image)

I then added text to the buttons; 11pt Copperplate Bold with a slight drop-shadow.

The images then needed to be split up to create the HTML template. I cropped the images so I could use the white space in the top part as a table cell in the HTML page. Each button was cropped specially so I could add HTML code for image swapping, the swap image is the same button with green elements turned to red elements to stick to the green-pink design.

I tidied up the page template by adding a cell background to the main body cell to give the appearance of a continuous border around the page's text. I also concentrated on image sizes by compressing certain images, like the mouseover images (which are very small in size and are also 'backed up' in speed with a pre-loading javascript I wrote).

The background of the page template:

I literally just randomly sprayed those dots there and tiled the image over the back of the page.

And that is that - the graphics created for the site and coded into an HTML template.