After taking some inspiration from existing websites, we decided to start our own. I thought it would be a good idea to actually design a lot of it on Photoshop and then upload it as a background image on to wix.
I started with a grainy grey image I found on google, and layered onto it a mask of this black frame which added to the horror feel of the image. I then added blood splats in the corner and center, as well as a drip of blood in the corner. We wanted the blood splat to be in the corner of the embedded video on the website, to make it look like blood was splatting out of it, acting as a kind of border. This was simple enough as it encompassed skills learned from the poster creation a few weeks before. In fact, some of the blood stains are actually the ones used on the poster.
Following this, I added the titles in the exact same way we had them in the poster, white lettering, 'Scream Again' font, blood splats and the 'darken' effect. We used the same font from the trailer for the rest of the typography on the image, e.g. the tag line, the reviews. We arranged the texts in places to leave space for the embedded trailer and the links etc that would be implemented using HTML.
We then realised that our layout was not quite right and so went back and moved the text around in order to come up with this layout:
On the website builder, we added the media links in the bottom right and a black background to the rest of the screen, which blended with the black border of the image. Next was to use some HTML code to create a marquee effect text box, to display fan tweets and create the links for the other pages. To do this I had to learn some basic code:
The most complicated part of the code I had to do was for the links. Basic HTML wouldn't work the way I wanted it to, so I had to use CSS or cascading style sheets.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: "Big caslon", Times, serif;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
/* unvisited link */
a:link {
color: #FFffff;
}
/* visited link */
a:visited {
color: #ffffff;
}
/* mouse over link */
a:hover {
color: #fF0000;
}
/* selected link */
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">HOME</a>
<a href="default.asp" target="_blank">ABOUT</a>
<a href="default.asp" target="_blank">GALLERY</a>
<a href="default.asp" target="_blank">EXPERIENCE</a>
<a href="default.asp" target="_blank">CAST</a>
</b></p>
I could use this code to, firstly, make click through links but also change the font to 'Big caslon', the font we were using throughout our coursework and also make the hover colour red, as seen in this image:
We also used a feature on the website to add an audio button, like in the Texas Chainsaw website. We felt this was a nice touch and added some professionalism to our website.
No comments:
Post a Comment