Typography for rest of website

The fonts on our website for general text, such as the reviews and menu need to be improved, because currently they do not fit or match our main typography used in the title or tag line.

I went through a series of fonts available on the Wix website and came up with the following options:

This is how our website looked to begin with, the font for the menu hadn't been changed at all, and the reviews had only been changed temporarily. Neither fitted with the font used for our typography and it looks very unprofessional. 

This was the first font I found as a possible option, called Amatic SC. I really like this font, and think that if you just look at the reviews it could work quite well on it's own. However, I do not think that it goes well enough with the rest of our typography, and I noticed at this stage that it is very difficult to read on top of our background image. You also have to have the font very large in order to read it clearly, which could cause issues with our website placement, especially when viewing it on other screens. 

This font is called Overlock, and gives quite a modern straight forward feel. This font looks quite professional, but it really doesn't match our typography at all, our typography looks quite old, whereas this font is so modern and looks unprofessional when grouped together. I decided we could not use this font. 

This font is called Museo Slab, and looks quite professional, while remaining quite clear to see on top of the background. Similarly to the Overlock font, it looks quite modern and although quite clear it doesn't fit with the rest of our typography. 

At this stage of my research process, I decided that none of the fonts looked their best on top of our background, because it was too hard to read in places, no matter what the size or boldness, and a white font colour is the only option we have. So I decided to make a big change to our positioning of the website, and place the reviews over the imaginary friend in our background, because even when the image changes, the reviews are still easy to read. 

I then used this font, called Chelsea Market, which I think looks quite effective, however it doesn't quite fit with our genre or the rest of our typography. What this font does do is act as a test for the placement of our reviews, on top of the imaginary friend, and as you can see, despite it not matching our typography very well, it is extremely clear to read and stands out a lot, allowing our protagonist to be seen clearly. 

I then decided to use the font Courier New, because simple is often actually very effective. I think it goes well with our typography, isn't distracting of our other content, and goes with our genre. It looks like it has been typed on a typewriter, which could relate to our genre and some of our scenes, perhaps the stalking scenes. It also doesn't look too modern, which fits quite well with our typography because it itself isn't very modern looking. 

I then went ahead and changed the rest of the typography to match and also added an element from our poster to the bottom right hand corner of the website. I also changed the video playing, to our media piece from last year, as it is a more accurate test until our trailer is complete. Finally I added our production company logo, a restricted warning and a 'Dolby Digital' logo to our website. 

Here is our finished website:

Putting our typography onto the website

When putting the typography onto our website we had encountered some problems recently, because we hadn't been able to save the text with a transparent background correctly.

First of all, I wanted to get to the bottom of our saving problem. I opened up the file, selected it, and the background was transparent. However the file was too big so I began by cropping it.

Here I de-selected the text, and decided to crop the image so it was just a line of text.

Here you can see I have cropped the text, so I then went to 'Save As..' and saved the file as a PNG file so that the background was transparent. I had no problems with this and then went onto putting it onto the website.

Because of the problems we had encountered last week, I wanted to check that we weren't placing the image on our website wrong, so I did a test by coding the image to be displayed. This worked, and I was able to bring up the image and it was successful because it had the transparent background. However, at this point I encountered another problem, the typography was black and therefore wouldn't show up on our website background.

In order to change the colour of the typography, I had to make it again from scratch, because once you have written the text you 'rasterize' it, meaning you can no longer change the font colour. It didn't take me too long and I applied the same effects as before making sure the text was white and the canvas was transparent.

I then cropped the image and here you can see me applying the 'wind' effect to our typography, demonstrating our typography manipulation. I then proceeded to save the image in the same way as before with a transparent background.

After testing placing the image using html code, I could just position the image on using Wix's built in feature,  I resized the tag line so that it would fit and then deleted the old, temporary one and positioned the new one.








For the title, I had a similar issue, because again it had been coloured black. I did a quick test and imported it onto the website, it was transparent but there were issues with the colours, it looked unprofessional and unclear.







I then went back into Photoshop and started work on trying to recolour this. I didn't have time to re start the typography from scratch, so I had to use the 'fill' tool and zoom in to recolour it to white. Before saving I cropped the image and again saved it with a transparent background.

Here you can see as I was positioning it on the website, I deleted the old title and resized the image so that it would fit in place. I think that together it works well and looks professional.








Here you can see the finished website, and on reflection I think that one of our next tasks should be changing the typography of the page font and review fonts.

Wix: Typography

Wix: Typography 

When creating our website we needed to consider many things. Our chosen typography was a vital feature for our website. 

From the picture, you can see that we have not inserted our own typography yet. We are able to insert the manipulated title of our trailer onto the website. To do this, we saved it on a transparent background and uploaded it as an image to our Wix page and hoped to replace it rather than using the font that was there. However, once we uploaded the image of our title typography it still showed up with a grey background, despite having a transparent background when it was saved. Overall, this was not successful at all. 

Apart from our typography for our title we also needed to use our chosen typography for the majority of our trailer. However, this caused many issues as Wix does not allow you to use your own font. After researching into it we found out that we could only use our own font via HTML or JPG code which would extremely time consuming. 

Overall, we found that using our own typography will cause many problems and will prove to be too time consuming especially as we have a limited time to produce our website to an excellent standard. In order to overcome the problem of our title we may have to make our title again in Photoshop and apply it onto our website. 

Tag line typography manipulation

Tag line typography manipulation

In terms of our typography for our tag line, we need to make sure that it is different from the typography that we used for our title. 

We decided to use the font called "OldStyle" as we thought it was basic enough to manipulate and it also fit in well with the rest of our chosen typography. I started off by opening up a new file in Photoshop and making sure that my canvas was transparent therefore allowing it to be transferred onto our poster without any fuss. When typing our tagline into Photoshop, we decided to separate "herself" from the majority of the tagline so it would give us the option to move it around our poster.

In order to manipulate our typography we applied a "wind" effect to our tagline. To do this we went to filter - stylize- wind and then selected wind from the menu going from the right. This made the typography look extremely worn out. This fits in well with our poster and our title as the mise en scene looks worn out as does our typography for our title. 

This is the finished typography. In terms of manipulation it doesn't show how it has been manipulated explicitly. Overall, this is not as effective as it looked in Photoshop, however it fits in extremely well with our poster. 

Inputting typography into our poster

Inputting typography into our poster

Once deciding on our typography - Dark Ages - we needed to be able to manipulate it sufficiently and input it onto our poster successfully. To begin with we opened up a 2000 x 3000 transparent background on Photoshop and inserted each letter of the word "Unhinged" individually. By doing this we were able to manipulate the typography in greater detail, rather than as a whole. An example of this would be the "N" and the "E" that we decided to flip in the opposite direction, using the "free transform" tool.

I then moved on to manipulate the typography in much greater detail. We decided to go to gallery and choose stylize - wind and chose blast from the menu. This created a windswept look through all the letters on the right of them. This created a worn out and unsteady look therefore grasping the concept of the protagonist in out trailer.



After we were satisfied with our typography. We dragged each layer of letters onto our poster image. One thing that we did have to bare in mind was the sizing of the title which we had to vary many times for it to fit perfectly on our poster image. When we inserted the letters onto our poster we realised that the sizing of the letters looked better when there was a little variation. Therefore, we made sure that the sizes of the letters differed from each other slightly to get across a sense of instability.

To the left is an image of our poster image with the manipulated title inserted onto it. Overall, we are all very happy with this attempt of the typography of the title. It works extremely well with the lighting in the main image too!

Typography Ideas

Typography ideas

We produced our initial typography however, when it came to making our film poster we noticed that we didn't like our typography as much as we hoped to. It also did not seem effective in combination with our chosen film poster image and website image. In order to manipulate this typography we smudged the ends of letters U, N, H, I, N and D. Although we still didn't think this would work.

To overcome this problem, we had a few ideas in mind. For example we wanted to incorporate the psychological aspect of the film in the title too. We had the idea of manipulating the typography to make it look as if it was falling out of a pill bottle. However, we found that this may be too hard to fit into our colour scheme and we also experienced trouble in our attempt to edit out the pills in the bottle in aid to get the letters in. It looked extremely unrealistic so this typography didn't win with us either. 

For our final idea, we decided to choose a simpler font. Therefore, we would be able to manipulate it as much as possible hopefully without making it look too unrealistic. We chose a font called Decimel and used the smudged tool on Photoshop to smudge through is horizontal streak through it. We repeated this a through times but in the opposite direction to achieve a blurred effect. We were quite happy with this as a typography as it fit our colour scheme and was not too time consuming to manipulate as it was quite a simple font to begin with.

Unhinged Typography: Version 2

 Unhinged Typography: Version 2

- We decided that we wanted two versions of our typography, one with the static graininess in the centre and one without so we could make an informed decision on which one was best.
- For our typography we had already decided that we wanted there to be a smudged effect as if the paint was blurring out.
- In order to do this I downloaded the font that we're using: 'Midnight'
- I then created a new file and typed in our title in the font.
- I had to type a word in a different text box so that I could rotate some of the letters such as the E and the N.

- I then used the smudge tool to drag out the edges of the words to create a smoke like effect.
- I also brought the edges of the 'N' in and the edges of the 'D' in to give an effect of smoke going round the 'N' and 'D'.

Typography Manipulation - Title, tagline and trailer title sequence

For our main title, we adapted our previous version and again smudged out the letters ad rotated certain letters to add to the sense of disorientation felt by the characters in our teaser trailer. We also used the sharpening tool to add white noise to the inside of the letters to give it an eroded appearance. 

I then started word on the tag line, which we will be able to position on the website and the poster, in front of any background, and once we have chosen our final images we can manipulate it further to fit in with the surrounding images. This could mean splitting the text up differently or having it at an angle.  I decided to smudge all the text in a downward motion to make it appear in a similar way to ink, which ties in with our ideas for the trailer's title typography.

I then started to make a version for the titles which will appear in the trailer, however these are using our first versions of the wording and will be re-done at a later date. 

We started off using a brown paper background and the chosen font, Daubmark, without any manipulation. I then went through every letter and smudged it down, I wanted to create the idea of ink on paper, running down, showing it was freshly written, perhaps subtly indication the protagonist has been writing down her thoughts.

I then went back over all the letters with a much finer smudging tool to make it look like there were very fine drips across the page.

This is what the final title looks like, and we want the first title in the trailer to have a clean piece of paper, showing that at the beginning of the plot, everything is quite innocent, but towards the end we want the paper to gradually become splattered in more and more blood, hinting the horrific end of our plot.

We searched on the internet for some blood splatters we could apply to the paper in the titles. Again, the wording would be changed in the final versions, but we wanted to make sure it worked before progressing further. In the screen shot above we took the blood splatter and applied a filter called 'sponge' to the blood splatter so that it wouldn't look out of place on the paper.

Here we positioned another splatter and carefully smudged it into some of the typography so that it looks like it is fresh, and also showing our skills of text manipulation.

We also used a hand print because in one of our initial shots in the loft scene, we used a hand print, so this helps link it all together.

 Here is the finished draft of the titles to be used in the trailer.

Comparing typography

It is not only necessary to create the typography for the title and the tagline individually, but as well as this they must look good together in the website and poster package, in order to look professional. When looking at the typography of the name of the film and the tagline on a poster it is important that:

• The two fonts and colours compliment each other.
• The two fonts look like they are from the same film. 
• The font of the title stands out more than the tagline, and so maybe more simple.
• The two fonts are not exactly the same or too similar. 
• Both fonts still stand out.

This is the typography for the title. It is in capital letters and some of the letters have been edited so that they are backwards. The main typography looks as though somebody has written it raggedly, which has been replicated by the tagline.

As both fonts have the ragged, handwritten effect, they do look like they are from the same film, and compliment each other well. 

The title of the film stands out more than the tagline as it is in capital letters, and much larger. As well as this, it is a block colour whereas the tagline is colourful and so it looks slightly different. This means that both the title and the tagline stand out against each other, and the contrast between the colour and the black is very effective- however the one with red and orange colouring looks much more effective to me as the colours indicate the danger and they stand out more, however this would obviously depend on the chosen colour scheme of the poster and website. For instance, if they colour scheme is of pale, washed out colours to convey a lifeless and empty side to the protagonist's lift, the second option would be more likely to be chosen as it is more faded, and slightly fades into the background. The smudge behind the wording also indicates a hazy aspect to the protagonist's mind. 

Tag Line Inital Typography Manipulation

For the tag line typography, I decided to look for a different font because when we looked at different film posters, a convention found was that the name of the film and the tag line were in different typography.

After a bit of searching I found several  extra fonts which we could consider for our tag line typography.

One font called Lakeshore Drive has the look of being hand written but is a different style, it seems to be much more delicate from our name typography and could add an interesting edge to the poster. It could suggest very subtlety to the viewer that when all seems to be okay, there is actually a darker force at work in our film trailer. Using our initial tag line idea, here is a sample of the font.

Another possible font I found was Daubmark font, which has a similar feel to our main typography but it all in lower case, this could work quite well as it will contrast but there will be a definite link between the two pieces of typography. I personally think this is a more likely font than the previous example. 

I decided to go ahead with this font and have a go at manipulating it in the Pixlr Editor. 

First of all I went over all the letters and coloured them in to make them completely black as there were a few white pixels within the letters, and I drew the ends of letters, such the 'p' because that had been cropped off. 

I then used the select tool to transfer the manipulated letters into a new canvas to start making them slightly blurry at the edges, because this will fit with Danielle's initial poster idea design. 

I then saved the image and switched to Pixlr Express where I changed the focus to the word 'darkest', the plan would be to do this for each 'dominant' word in the final tag line we choose. This will draw the audience's attention to certain words. 

I decided that another technique that could be used is changing the focus horizontally because it would effect all words, and could actually work better on a whole sentence. 

I then used an overlay within the editor to apply to both ends of the words. This works really well because it means the word 'darkest' is literally the darkest thing in the tag line, adding emphasis and drawing the audience to certain parts. The colours at the end could be changed depending on what the colour scheme of our poster, website and trailer will be. I also did one with the colour red as this is often more associated with horror, whereas the blueish one could fit more with the psychological part of our plot.