Digital Imaging - Learning Activity # 9 Making Backgrounds for Web Pages

1. Find 3 examples where a background image has been used on a website. Take a screen grab of each, save them as .jpgs 50 quality 800px wide.

 http://www.hbo.com/

This HBO (Home Box Office) website is an American cable television site.  It is highly interactive and promotes different movies/documentaries/comedies etc everyday.  That picture background changes daily.

I like the gradient around the outer edge of the page, which helps to distinguish the face as the focal point, ie the eye is drawn in to expression on the mans face.  This website is rated as one of the top 15 sites of 2011.

http://www.marcecko.com/#/

Another interactive website,  I like it how the image moves around the page.  I also love the image of Marc standing against the wall with all the framed pictures surrounding him.  Each of these pictures are links, which is definately more appealing than a simple list of links.

http://heathholdenphotography.com/

Heath is a good friend of mine, and someone I look to for tips on taking photos.  His images are amazing, I  just adore the way he captures a story with every photograph!  I love his website, it is simple to use with a classic and classy look and feel.

2. Take your "tell-a-story-with-a-flatbed-scan" image and change it to make it into a web page background using Method 2 (where the image receds into the background colour). Save it as a jpg 50 quality 930px wide.

 This is my flat bed scan from LA # 3

I used the gradient tool set on 'foreground to transparent' and just clicked in maybe 2cm drifts along the outer edge of the image.  I'm thinking now that using a grey rather than black may look better, but I got the effect I was after for now.  I also did a layer mask incase I want to change it later.

3. Make a background for a web page using method 4 (1920px wide jpg, a few pixels tall, save as 100 quality).

The photoshop part of this was really easy, to obtain this effect I used the gradient map.
I found it a little tricky trying to overwrite the original bg.jpg file but got there in the end :)

4. Make a seamless tile using method 5. Save as .jpg or .gif, whichever gives you the best quality for the lowest file size.

 

As you can see i used purple grapes :) I saved it as a jpg file, it's the lowest file size and gives a great standard of quality considering.