GRAPHICS, COLOR &

TRANSPARENCYLesson 5

WHAT YOU WILL LEARN IN THIS LESSON IS To locate free resources that you can

use for image editing

Determine the optimum image file size

Decide on the best image file format (jpeg or jpg, gif or png)

Export optimized images from Photoshop

Slice images in Photoshop

Optimizing images for the web means preparing images for the web, in other words it is-

Knowing how to reducing a Raw camera file size and making it smaller

yet maintaining a sharp appearance for a great viewer experience in terms of looks and loading speed

The key concept in this lesson is ‘Image Optimization’

WHAT DOES RESIZING AN IMAGE MEAN?

Resolution vs Pixel size

Resizing means making an image smaller.

This can be achieved in several ways.

Option 1 - To Resize is keep the aspect ratio while reducing the overall file size (weight)

Option 2 – To crop is reduce pixel size but to cut away unwanted portion of an image

http://www.digital-photo-secrets.com/tip/2439/crop-or-resize-what-happens-when-you-pick-a-lower-pixel-count-setting/

http://mcpactions.com/2011/05/09/understanding-cropping-vs-resizing-in-photography/

• Click to READ

A monitor is like a metal mesh screen

divided into inch squares. There are a set number of squares that span the width and height of any digital device such as a smart phone.

You can not push the squares closer together or make changes in the size of the squares.

There are 72 pixels per inch therefore, when preparing images for the web, the options are to crop unwanted parts or resize the entire image to smaller size.

Both options reduce the pixels amount.

Resolution reviewed –

THE CONSEQUENCE OF CROPPING AND RESIZING AN IMAGE

• Images that have been cropped and resized loose pixels.

• The result is a blurry image.

• Web and Graphic designers understand the effect images have on human psyche.

• They spend valuable time sharpening images to make them attractive enough to keep viewers on the site for as long possible.

SHARPENING AN IMAGESharpening an image can be achieved in any photo editing software.

In Photoshop, the application is called Unsharp Mask Filter

The technique has been around for many years in the film and print industries.

In the pre-digital technique era they created a slightly out of focus positive transparency of the original negative. Therefore, instead of exposing the negative on photographic paper, it was instead exposed to another sheet of film to create a positive image. The new positive image and the original negative image get sandwiched together and since the shot was slightly out of focus, the edges in the combined image show a slight halo in the exact opposite color.

The other means with which images can be optimized is to save them as different file formats.

There are 5 file formats that images can be save as but not all are suitable for the web –

There are –

Raw file format or .rffJoint photographic group or .jpgPortable network graphics or .pngTagged image file format or .tiffGraphic interchange format or .gif

FILE FORMATS

And last but not least– Slicing an image

Slicing an image is cutting up an image into smaller parts like a puzzle.

The benefit of slicing are -

• You can create different links using different parts of that image.

And

• The ability to save the different parts into different file format types.

THIS CONCLUDES MY

TEACHER TUTORIAL –

LESSON5

Assignments to complete

1. Listen to video tutorial_L 5

2. Lesson project_ L5

3. Self-study_L 5

4. Review Qs_L 5