Production of website - Roll over images.

PRODUCTION OF WEBSITE 

ROLL OVER IMAGES.

This is my test of the css sprite working successfully I'm really pleased with this method its saved me a lot of time.

I saved my image on the top 50% of the image and typed the information about who designed underneath in arial bold.

save for web then saved the image as png

I saved it as g1. ( for geometric images) The route folder is already saved so the images will automatically appear on my website if saved in the right place.

Geometric pages:

I repeated this method for these images.

Always re-checking the index file by previewing it in chrome and refreshing the page.

My first page finished for geometric.

 I repeated the full process for this saving each one in order of numbers going up from 1-12 

I made sure i always had the blue ruler line across my image if some of the text from the bottom image or the image from the top bled into the other 50% you would be able to see as part of the other image in the roll over.

I always had to make sure i was always saving for web else it would save to my index properly.

Finished geometric pages.

Typographic:

Again for the next 12 images i repeated the same method as all of my first three pages featured 12 images.

I always needed to double check that they image uploaded properly as a few times i resaved over the previous image by accident.

Here are examples of the box being used to create all of my images individually.

Finished typographic:

Photographic:

I saved my typographic images the same way as the rest.

Making sure i changed the number each time that i saved it as.

Finished first 6 images fro photographic page.

Finished last 6 pictures on typographic:

Packaging :

Packaging was a little different they all saved in the same way but when i had the images in photoshop they weren't perfectly square so it was a case of editing the images before putting them into my roll over image ready for web.

These two images were square so they were simple enough to add on.

This particular image i needed to add a trip of the same colour to the top and the bottom to fill out the square i couldn't simple drag it because it the image itself would of bled.

I did the same to this image aswel to make it bigger. It was simple because i used the i drop tool to get the exact same colour as the background and then the fill bucket tool to fill in the square selection i had created.

Finished first packed page:

Finished last packaging page.

Although this method still took a long time to upload all the images it was a lot quicker than uploading 64 individual images when i could create one image and split it.