making the site

using the mockup i made in Photoshop i got it ready for slicing in Image Ready so i made the header, menu, menu-buttons, page bottom, body txt block all seperate.

I then imported the photoshop file into Image Ready and sliced it up and created the rollovers for the navigation menu.

I then imported the Image Ready file into Dreamweaver and started shoving in all the info into my as planned, 3 column table. Also added images and incorporated css style sheets for parts of the body txt, subheadings and shiz.

I was unable to finish the rest of the artists backgrounds, i got up to metallica.

More sketches

i needed a design to go on the bottom of each page so i sketched some more ideas up.

Mockup in Photoshop

After i'd finished playing round with graphics and the header i did a quick mockup of how the website might look in photoshop with the navigation menu and background.

Website Graphics & Header.

Now that i'm happy with my layout design i went on to scanning in my previous layout sketches and working with them in Photoshop and vectoring them up with the pen-tool.

Final layout ideas

I've decided on how my final layout will look, i've gone with a thin vertical portrait layout with a big fat graphic header reading 'Rock Realm' placed at the top and just underneath will be the navigation menu giving easy access to other pages. Body txt will be placed in 3 columns so i can vary where i want pictures if i need them beside the text.

Mock Ups

I did a bunch of sketches of interesting layouts using references from photos of guitars and taking parts from the instrument and using them as a graphic feature for the site for example guitar strings, knobs, pick, speakers, frets etc. Also playing with type and using the word 'rock' and playing round with it, enlarging, rotating, cropping and zooming.