Final website tweaks

As we are coming to the end of developing all parts of the promotional package for our teaser trailer, we decided to make some final adjustments to the website so it fitted well with the new typography on the poster.

First of all, using Photoshop, I took the typography from our poster and changed the colour to white, as we thought this would probably show up most on our website, and would fit with the rest of the typography currently on there.

Here you can see I uploaded the typography onto our website, after removing our other design. I resized the image and positioned it on the left hand side of the webpage. This still fits in with the template, matches the typography placement of the poster, and is the part of the webpage where the typography should show up best.

Here you can see my final placement of the typography. We had a discussion as a group and decided we really liked using the new design on our website, however, we did have some concerns about the typography not being very easy to read, due to the bright tones in the background picture. We decided to create another version and compare the two, to ensure we were making the right decision.

Here you can see I went back to Photoshop and used the typography which was black, exactly as it is on the poster. I then saved this as a transparent file and uploaded it onto our website removing the white one.





Here you can see I positioned the typography in the same place, and was quite happy with the results. However, as a group we discussed again how this would be quite difficult to read too, because of the darker tones in the photograph in the background. Due to this, for now we have picked the white version of the typography, because it matches the rest of the typography on the site.

We also decided that it would be best to change the placement of the tagline, so that it matches a similar format of our poster, you can see the results of this in our final image below.

In addition to these final tweaks, I also had to add to the social networking links we had on the website, including both Twitter and Facebook. I have now added this links onto our webpage and below you can see the final website. 

Altering the website background gif

After recently reviewing our website. and making our final improvements to it, it came to attention that the gif I had made for the background, making the imaginary friend flicker was moving too fast. After a while you notice the pattern and it was too frequent. Below you can see the original timeline in photoshop for the gif.

The original image, where the imaginary friend's face can be seen is in the bottom level of the timeline. As you can see, I have it repeating three times for an equal amount of time, while then being shown for a short burst at the end. The other image, where the imaginary friend is just a silhouette, was shown for a short burst three times, each showing was of equal length. At the end, it was shown twice very quickly, because I thought that it would catch the viewer's attention on the webpage. However, this was thought to be distracting.

Here you can see I have radically changed the timings for the two images. There is no regular length anymore, this makes it harder for the viewer to spot any kind of pattern and means that they will be less likely to know when the images are going to change. I have also made the imaginary friend's face disappear a lot less frequently, and when it does it is only for a short time. This means that the viewer may not even notice it missing, but when they do, it will give quite a spooky effect. 

I have now uploaded the final edited gif to our website, and think that it is better, because it is more unexpected and means that you cannot predict it. 

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. 

Adjustments to our website

In recent weeks, I have been working hard on editing the background image for our website, and have encountered many problems along the way. This week I got started on trying to fix them as best I could.

Because the background image for our poster features important points on both the left and right hand side, it makes it very hard to arrange everything while keeping it in place. Combining this with different screen sizes makes it almost impossible to position everything correctly, mainly the actual YouTube window for our trailer to be shown in. After researching for a little while, I found the magnet tool on the settings window of the YouTube window. This stuck it to that part of the background, I then checked on both a mac, windows computer at school, and my laptop that it stayed in position, solving our arrangement issues. I then applied this effect to other parts of the web page, such as the reviews and social networking links to ensure everything stayed in place.

After looking at websites made by previous media students, we noticed that they had made the most of their background and had used it to add some more exciting elements to the web page, such as a time lapse in the background. Our back ground image isn't really suited to this, however, we did think about trying to do something with our protagonist's imaginary friend. Since she is wearing a black jacket, it means that if we blacked out her face, it would look like a dark shadow approaching in the background. We decided a flickering effect would work quite well on our website.

Firstly, I used Photoshop to create a new version of our final photograph, where the imaginary friend was just a shadow in the background. I then had two potential methods of creating the effects with the two images, I could either set up a slide show in the background using both the images, however after trying this out, I realised that I couldn't get the two pictures to change quickly enough for it to look good, so I then created a gif in Photoshop using to the two images.

I preferred how this looked much more, and it meant only one file had to be uploaded to the website. Therefore I used this and it can now be seen on our published website.

There were also a few minor changes I made to the website, such as giving the reviews sources, and moving the end of the tag line to fit with the first half, as it became misleading, and was following the conventions of a poster rather than a website.

Website Content and Layout

For our website it is important that we display all the conventions of a film website while ensuring the user doesn't have to scroll up or down, the background picture is still visible, and all the page names are relevant and do not look out of place. We also need our trailer on the web page, critics' reviews and social networking links. 

We are currently very happy with going ahead and using this image for our website, however it has caused us some trouble due to the use of two characters in one shot. As we usually work on macs, the first issue we had was that the image was too big for other screens, and it would mean all the arrangement of the you tube link, social links and critics' reviews wouldn't fit properly. We first changed this by changing the size of the image, and where it was locked to. I then decided for this post to work on my laptop, to double check that this would actually work when changing computers. I am pleased to say that it did, and this means we can position everything without having to worry it will cover up the protagonist just because the screen is a different size. In addition to this, above you can see the temporary layout of pages, the tag line and the title. I set to work at re-arranging these. 

Here you can see I used a different typography, this isn't our final typography, because that is currently still a work in progress, but this font gives a much more accurate representation of what it will be like. As you can see, I moved the title, page names and beginning of the tag line to the left hand side of the header. I thought that this was a little bit different, and also draws even more attention to our background image. In this screen shot, you can see that I have placed the second part of the tag line in the bottom right hand corner of the web page. I quite like this as it means the viewer has to look around the web page, similar to our poster, however I later changed this placement. You can also see that I removed the background behind the page names, and tried to make it look a little more professional, I think the simple lines dividing the pages works better, instead of large buttons, covering up our background image. You can finally see I have placed social networking links beneath the positioning of where our finished trailer will go. 

In this final shot, you can see the final tweaks I made to the web page, I first changed the names of the pages, as our first ones were very generic, and yes, they still are but I think I have phrased it better this time. We can always change this at a later date. I have also added some critics' reviews, I haven't decided on where these reviews are meant to have come from yet, however I did this to check both the placement and font size & colour. I think they work quite well, they don't invade the photograph of the protagonist too much, and they don't cause the viewer to scroll down. The last change I made was to the placement of the second half of the tag line. I decided to put it in the bottom right hand corner of the header instead, this is because I think if it is below the reviews it may confuse some people, and there is also the risk that people will have to scroll down to see it. I also decided that placing it on the left hand side wouldn't flow very well, and it may just look very out of place. 

Potential Website Image Editing

We wanted to edit together a couple of images we took on one of our photo shoots to see if it could be used for our website background. This post goes through the editing process of the photos and my evaluation of whether it could be used or not.

Firstly, we took one image with Natasha in the background of the image. We then cut around her, I am using Photoshop to complete this task.

Here I copied and pasted the cut out onto another photo, taken in the same place but showing the other character Natasha plays.

I then positioned the cut out in the correct place and slowly blurred the outline to make it blend in with the already blurred background of the new image. This makes it seem as if we both people in the same image.

I then started work on the actual colours of the image, to try and fit more to the conventions of our genre and also give a more professional edge to our photograph. I started by editing the contrast and brightness, increasing the contrast and decreasing the brightness slightly.

I then went into the filter gallery and adjusted the framing of where I wanted a vignette effect to be, so that the attention is drawn to the protagonists, instead of the location.

Next, I played around with the saturation, I wanted to create quite a vivid image in the centre, so boosted the saturation a little while making it have a few blue tones, fitting the conventions of our genre.

Here you can see me selecting the cool colour setting, so that it is a little more dark and a feeling of sadness comes through the image to the audience.

After this step, I again went and tweaked the brightness and contrast so that it suited the changes to the saturation I had made.

Here is the final image I created. I think it is great and could work well on our website, however we have to consider the different sized screens that will be used by our audience, and due to the placement of the characters this may mean they are covered up by our trailer and reviews of the website, perhaps just the top layer of the photo could be used, revealing just one character, or another entirely, but with the same kind of editing applied to it.

Website Background Image Idea

We decided to play around with editing more photos that we took from the photo shoot in the alleyway by editing an image of one of the characters onto the image of two of the characters.
1) First of all, I opened the image of the victim and the Antagonist. Then, opened the image of the Protagonist and pulled this into a separate window.

2) Then, using the lasso tool I lassoed around the figure of the Protagonist, making sure to correctly outline the shape.

3) Then, I dragged this selected part of the image onto the background image of the two characters.

4) I had to make sure that the existing image around the selected part of the protagonist was erased so that it would blend into the background more effectively, so I made the settings so that I could only see this layer, and used the erase tool, zooming in closely to make sure that I could get each detail.

6) This helped me get my final image of the three characters in one image.

Evaluation:

Pros

• It conveys the personalities of each character.
• It features all the significant characters in the trailer which a conventional poster would usually do.
• Features a setting that is used in the trailer which is conventional.

Cons

• However, the image lacks any idea of a genre, as it doesn't not look particularly scary or psychological.
• This could be improved with some editing on the colour, or by adding effects, but it would not look very realistic. 
• On the whole it does not portray the plot or genre very well.
• Does not look very interesting or remarkable at all.

Poster options - photo choices

We picked this photo because the protagonist is in the centre of the frame, allowing for us to layer different photographs on top of each other showing all the characters in the same shot. This could be used for our poster or website.

Here is another photo we picked which could be layered with the photo above which would show all three characters, the protagonist, the antagonist and the imaginary friend.

This is another photo which we could use if we change the positioning of all the characters, this shot particularly captures the protagonist's vulnerable side and her weaknesses.

We all really love this shot, it could be used in the website or the poster and has a number of advantages to being used. It can be layered up and the imaginary friend could be shown in the background, in addition to this it also shows vulnerability and cautiousness, hinting that she knows she's being followed

We wanted to pair the above photo with this one to link the characters together, however when doing a draft of the poster we preferred the photo below.











So instead we decided to use this photo and the hood works quite well as it makes the character have a mysterious edge and this could grab our audience's attention.

Here is our draft edit of the two images layered, and we are very please with the outcome, and would like to use it, even if it wasn't used a poster, it could work really well on the website.