Designing My Website

I have started to do a website for one of my ancilery tasks and have been using a piece of software called 'The GNU Image Manipulation Program' (also known as GIMP) and another piece of software called 'Serif Page Plus'.

First, I had to open 'Serif Page Plus' and select website, then from that I had to measure how many pixels the width and height were and from that I could design the background, band logo, buttons and text boxes in 'GIMP'. I wanted to do this because 'GIMP' has a lot more features to create a unique style background and it is also a freeware program so I could use it instead of purchasing a very expensive program like 'Photoshop'.
On 'GIMP', I first designed the background which needed to relate with the style of the music video and the album cover. In the end I decided to make the background of my website look like a piece of cardboard to resemble the cardboard toy boxes in the music video.
Next, I wanted to create a band logo as I didn't have one already, so I thought a good idea was to have it look like a sticker. I added text to a new layer on the background and used the font 'Fairly Odd Font' for the band name - 'Kids With Fireworks', then I drew white circles around them - for the sticker shape - then I highlighted a few corners of the circles to make the looked curled by adding a pale grey to white gradient. Once I had done this to two of the corners, I added a drop shadow, which makes the image look like it is set apart from the background with a shadow. I was very happy with this and then merged the layers all the layers together so it was now a flat image.
The next step was to create the text boxes for the text and I wasn't really sure how many text boxes to use, so I looked at other band websites to see what they did. I particularly liked the style of You Me At Six's website design so I thought I would only have one text box and then in that text box I could add pictures of the band members which I will need to take and then have their instrument below and possibly their twitter feed's for fans to follow or read - almost like a profile of the band member. Underneath these I will probably have a news feed for the most recent band news which may include information of the new album which will be out soon or information on their tour dates, etc... In creating this text box, I made a new layer and then coloured it white. I lowered the opacity so that it was a little bit see through and then the cardboard texture from underneath could be seen, otherwise if it was just white it would just be blocked out and I didn't think it really created a good effect. Now I flatterned the layer and saved it as a .jpeg file so that I could use it as a background on 'Serif Page Plus'.

Once I loaded this onto 'Serif Page Plus' and previewed the webpage, it tiled the background (which I didn't realise it would do) so I re-made all the last steps and made them as their own individual file and put them on seperately.

Background



Band Logo



Opaque Text Box

I now needed to create the buttons using a new window. I used a similar idea for creating the bands logo, accept I used a crumpled paper layer which made the buttons look like paper or crumpled stickers peeling off. I also tinted the paper a slight yellowy colour to make it stand out, but not be overly too bright for the design of the website. These buttons are supposed to be similar to the style of the album name - 'Jack In The Box' - on the CD cover. I used a simple font for the links which was 'Arial Rounded MT Bold', because it was easy to read. I did this in a seperate window because I could then make the background transparent and save it as a .png so that the background would now be transparent.

 I did this for 6 buttons which were:

• Home
• News
• Band
• Media
• Tour 
• Store

Not meant to be a black background - only because the files were .png files

I also added 5 other buttons which are at the bottom of the webpage and they are for my links to social networking sites and music sites. I found them on a website and the designer of them said they can be used for your own websites and they were available for free download. This was a fortunate find and I am very grateful for them. They look like they are stickers which are peeling off and are well suited on my website. They are:

• Facebook
• Last.FM
• Myspace
• Twitter
• Youtube

Not meant to be a black background - only because the files were .png files

Originally I was going to use the above buttons, but after looking for some more suitable ones which fitted the colours of my website I found these and have used them in my final website design.

I looked at other artists websites on the internet and found that they had a news blog or a list of recent events which the band have done or announced for the future. I thought that I needed to do one of these similar, so I planned out what I would include. Which was:

• Just announced tour dates
• Pre-order album information
• A live session at BBC 6 Music
• Music video to be soon played on MTV
• Interview on BBC Radio 1

For this I wanted to keep with the original two other fonts which I had used which were, 'Fairly Odd Font' and 'Arial Rounded MT Bold'. I used 'Arial Rounded MT Bold' because it was simplistic and easy to read. I included the dates of when these were posted which were in the same font but smaller and had an indentation so it was kept seperate from the post. I left a small gap between the date and the posted event. to make it legiable to read. I also did this on 'GIMP' because that mean't i could resize the whole file if it was too big or too small. It also meant I could crop it if I wanted to add other images or files.

I have looked at other band websites and found that they have animated adverts at the side promoting their new album releases or competitions, so I decided I would do this as well. These will be going on the right hand side of the webpage.
I made these, by making a picture of text and and image and then on the top of that adding another layer and copying the specific word I wanted to flash. For example 'WIN'.
I saved it as a '.gif' file so that when I put it up onto my website it still would continue to be animated.

Lastly, I thought I would put some pictures of the band at the bottom of the webpage, just about the external links.
These were edited in the same way as the photos which I have put onto my CD digipak, in fact they are some of the same which are on it. This can be found on that post - Designing My Digipak.