This is my 'Teas' page where I wanted the main focus to be images, I decided I would like a grid of images that would be circular that would make up the entire page, I would have them as rollover images so that information about the tea could be revealed when hovering over them. I started by saving my title header as an image on illustrator:
This was the title header for the page, I saved it on illustrator for web with a transparent background:
These are some of the images that I want to use for the the TEA page, I found them off tumblr and weheartit, I have taken some of my own photographs for the 'A history of' research but I think these work better as a set, and look more professional:
I created clipping masks of circular shapes on illustrator, all exactly the same size so that they run evenly in lines as a grid format:
width 230 px by 230 px, this is consistent throughout the images to maintain an even grid shape. The idea is that the image shows a different type of tea and when you hover over the image a small passage about that particular tea comes up:
Image('differentteas1','','images/differentteasrollover1.png',1)"><img src="images/differentteas1.png" name="differentteas1" width="230" height="230" border="0" id="differentteas1"
I then decided to change the opacity so that when you click over them the picture fades 50 per cent and information about the tea comes up:
Format, align > centre so all the images are central to the page. All images are 230 px by 230 px, if I had more time and was more experienced in web design I would of liked to of had the image take you to another page of the website when you clicked on it. Possibly have various pages that give information about that individual tea, more detail.
This is what the final page looks like, Im quite pleased with the final outcome just because I think it suits the subject matter, I think the use of photography has really helped aesthetically, having the rollover images just adds context to the page.
No comments:
Post a Comment