Interactive: Optimisation.

Today in Shaun's seminar we were looking at optimisation and how it is useful in decreasing image size to help them load quicker for websites. He showed us how you can decrease the image size as well as the resoultion and quality and still have an acceptable image for your website but ten times smaller. The way to do this is to find your desired image and open it in photoshop, from here go file save for web and devices. A box will pop up and it is here that you alter the image.

This box will allow you to edit the file type of which the image is saved as, e.g. jpg. gif. or png. As well as this you can change the quality ranging from 0-100 and also the blur 0-2, this all contributes to lowering the image size. Jpg. is the standard file type used when altering images gif. and png. work on a basis of 256 colours which many images have alot more than, but we were told gif. is very useful for images such as banners on websites and png. is good for photographs and sometimes it can increase the quality.

We were told to pratice and have a play with our own images, particular ones with a high amount of pixels, over 1000x1000 and with a dpi of 300, i tried out with a few images and these were the results.

This was the first image i chose to alter to try and reduce the file size, this original is 1782x1181 pixels and 300dpi its file size is a massive 297KB, but by using the tips we learnt in the lesson i was able to reduce this to this second image which looks pratically identical but it has 428x284 pixels 72dpi and by also reducing the quality of the image to 50 its file size now is 65KB a decrease of over 200KB.

These were some useful optimization tips i found on http://www.junowebdesign.com/web-design/image-optimisation-tutorial.

- You should make each website small in overall size but still look good, if a website loads faster you will get more visitors sticking on the site and higher conversions
- Always use “save for web and devices” in Photoshop, you can see the image size in KB’s at the bottom left corner
- If the image has many colours or complex gradients then save as JPG
- When saving as JPG keep lowering the quality from 100% downwards until it looks satisfactory, never save at 100% quality as this uses many KB’s
- Cut excess bits of images off, these only waste KB’s
- If transparency is needed then you will have to use a PNG
- If the transparent image uses a handful of colours save it as a PNG-8 bit
- If the transparent image uses many colours or gradients save it as a PNG-24 bit, see what it looks like as a PNG-8 bit too just in case it looks ok
- If an image has a lot of repeating colour then a PNG might be the best option (example: a large background with a solid colour). The code for PNG images can say commands such as “50 lines of white pixels” saving masses of space, a JPG for example works on 8×8 blocks of pixels even if the whole image is one solid colour
- If an image is small then a GIF might be the best option to reduce size, see how it looks with different amounts of colours too (less colours = smaller image size)
- If an image has two sections that are very different then treat each image separately, you can pick the best optimisation techniques for both
- Sticking to one colour scheme helps reduce the complexity of each image, for example if an image had only shades of blue and black then it would be easy to optimise, if an image had blue, black, white, red and green then it’ll need to be a JPG and would be larger in KB size
- An image with a simple palette (few colours) can be saved as a PNG-8 or GIF and will probably still look great to use.

From what we have learnt today it is clear that when creating a website it is crucial to minimize all images to allow for faster loading times, but without giving up to much quality,

Wireframe

This week we had to come up with a wire frame relating to our website showing the layout and what it would include. For my website i'm going to have and series of pages that talk about me and my work where i get my inspiration and what i hope to achieve. For the five pages i will have to work split up as follows, a title pages with a taste of all of my work and a bit about myself, from here i will have a link to Moving image, Animation, Interactive, and then i final page about what i like etc. here is an image of how i plan to layout my starting page.

Moodboard

We were told to create a moodboard representing ourselves, it was suppose to show what we like where we find our inspiration and it should reflect us. This is my moodboard and it includes two of my favourite directors, Martin Scorsese and Quentin Tarantino, the reason that i have included them is because the both really inspire me, i love the technical class of Scorsese's films they are beautifully shot and always look great. The reason that Tarantino inspires me is because he has a very different style to many other director's he does things the way he wants and always creates films that make me not just enjoy the film but enjoy the dialogue the shots and the presentation.
             I have also included captions from two of my favourite films Old Boy and The Deer Hunter, both these films have had an impact on me i found each very gripping in their own way and teamed with some amazing acting and beautiful shots they really make me want to be a director. The moodboard shows clearly that am interested in film, and the reason for the background the coloured pencils is because they stand out and are different and it seemed fitting to include because for me they represent how i like to go about my work.

Interactive: Digital Portfolio

For the first seminar of the interactive pathway we looked at digital portfolio's what we should include and what we should'nt as well as ways to improve our own portfolio. For the interactive pathway we would be creating a five page interactive website using Adobe Dreamweaver. We were asked to show our own work, infulences and what inspires us. So this first seminar was a starting point for our project.

The portfolio is as much a process as it is a product. It should be considered a “living document” that evolves as you do. To that end it should be constantly revised and updated. It is not a ‘do once and forget’ item to be shelved once completed. It should evolve as you do……so are you..

We were told that over the next five weeks we would look at ways to improve our own portfolio it was just creating but learning as well, their were many things that we needed to consider when creating our portfolio e.g.
AUDIENCE?  think about…What is your target audience? Research this…

AIMS?  What do you hope to achieve?
CLARITY?  Keep it simple and legible…
TONE?  Is it factual…editorial or casual..you choose…
CONTACT? Your contact details…
MEDIA? What is your chosen media..can the recipient view it properly?
CONTENT? Is this your best ‘selected’ work?
ACCESSIBILITY?  Finally can the viewer ‘navigate’ your information easily?

These are all factors that needed to be taken into consideration when creating your portfolio, we were also given some useless links which we could use for inspiration and ideas.

http://www.guardian.co.uk/styleguide/ The Guardian House Style

http://www.apple.com/uk/ Apple U.K

http://www.cam.ac.uk/style/index.html Cambridge University