The dimentions i have established for my header and footer space are:
Header- 600 px by 150 px
Footer- 600 px by 50 px
Design 1-
For my first design I wanted to look at using celtic symbols. I done a google search and found some images of intresting celtic symbols that could be used as graphics for my site, below are some of the images i found.
http://www.tattoopilot.com/tattoodesigns/celtic-tattoo-designs/
I particually like the third image so i wanted to experiment furture to see how i could turn it into a logo that would be suitble to use for my site.
Using colours from the Gordon tarten that is inspiring the theme of my website i changed the colours of the celtic symbol to make them more appropriate. I really like the thrid experiment as the yellow really stands out from the blue background.
Becuase this was my favourite image i wanted to experiment by adding it into a web page on dreamweaver and from there create my header rather than just creating the whole thing on photoshop as an image and adding it in.
The above screencapture shows me imserting the image into a webpage in the space where the header is. i did not repeat the image across the banner (although this could be done) because it is a very strong image and i also wanted the text to be easily readable as it is the name of the website and people need to see this clearly in order to see which website they are viewing.
Above shows me changing the back ground colour of the header so it blends in with the image. An advantage of having just a small image and the rest background colour is that the site will load quicker than having a larger image across the whole header space.
For the footer i stuck to the same colour scheme. i used the same blue as the backgrounf colour for the space and used the same colour for the font also. This is a simple yet effective footer design.
I do really like this header and footer as they are simple yet strong and stands out. However i will look into design a couple of more headers and footers.
Design 2-
For my second design i was quite intrested in looking at adding texture. I thought about using textured papers so i done a google search and below are some of the images that came up.
I really liked the first texture. So I decided to crop it using photoshop so it was 600 px by 15 px as these were the dimentions i had established for my header space.
Below is the image i will be using for the back ground. i really like the texture of the paper and hope that this will give my website a more textured feel.
I have cut away the white background to create a transparent background and saved the image as a PNG 24 so that the background will be transparent.
This shows both the header and the footer images inserted into the webpage. For the text i just used a shade of dark blue from the Gordon tarten so that it stands out from the textured background. I do like this as it does give the website a tactile feel but i am not sure how weel it would work overall in the compositon of my webpage, i don't know weather this and the tarten would be too textured.
Design 3-
For my last header and footer design i decided to combine the previous two designs by adding the celtic symbol onto the textured paper.
This is the background image that i have created for my last header design. I used the textured paper off my previous design but incorporated the celtic symbol from my first design to create my last header deign.
The above print screen shows my thrid header design in the website. I inserted it in with the back gorund image and the other colours that i pretty much want in my website just to see how it would look. However i do think it looks to textured and think the header and footer design that i will use for my web site will be the first one as it is the most simple yet most effective i feel because it is a nice slick header and footer set to contrast with the heavy background image.
In my next post i will show you how i inserted the background image.
No comments:
Post a Comment