working with images

Working with

Images

What is a digital image?

1 inch

72 pixels

3 inches

216 pixels

1 pixel = 0.3mm

Images can be measured in

• Physical size – 2000 x 3000 pixels– 5 x 10 cm (or inches)

• Memory space– 2MB– 25kB

560 seconds

3000 x 2000 pixels3.5MB

250x1805 seconds

Image size - rule of thumb

• Website images should be no more than– 350 x 350 pixels – ½ MB

• Exceptions– Full width banner– Enlarged image

Image types

.gif

.jpg

.tiff

.bmp

.png

YESYESNONONO

Image types

• GIF - Graphic Interchange Format.– Oldest, most popular – logos, cartoons– background transparent– animated

• JPEG – Joint Photographic Experts Group - JAY-peg – photographs– Flexible compression

jpggif

Which format should these be in?

Saving images

• Avoid

&

*

%

£

. ,

NO spaces, replace with -

• canary palm.gif

• Balance-valentine’s50%res.jpg

What’s wrong with these?

canary-palm.jpg

carnations-crysanths.jpg

balance-logo.gif

• carnations & crysanths.jpg

Renaming images

• Use meaningful titles

Product185.jpg

lily-arrangement.jpg

Chippenham-flower-shop-lily-hand-tied.jpg

Images properties

In My pictures – Views tab change to thumbnail– Roll over image > image properties

• Dimensions - 200 x 400• Type - jpeg• Size - 200kb

Renaming images

• Right click – select rename

• Type in a new name

• Image will retain it’s own file type

Rule of thumb – saving

• No spaces, no characters

• Save with meaningful titles

• Use – not _

• Gif – for logos, graphics

• Jpg – for photos

• Don’t use bmp, tiff

How do we get images onto our PC?

• Digital camera

• Scan in a photo (or slide)

• From the internet

From the internet

Royalty-free and rights-managed

Getty Images

www.gettyimages.com

iStock Photo

www.istockphoto.com

Free Images

www.southwestbrand.info

www.swchambersonline.co.uk/devonimages

Look at Google

www.google.co.uk– Click on images tab

– Right click and save as

– Be aware of copyright

How do you change an image?

• Image manipulation software– Photoshop

– Free software download• Gimp - www.gimp.org• Irfanview - www.irfanview.com

– Websites• www.flauntr.com • www.picnik.com

Cropping

• Reduces the physical size and memory space

• Changing the shape

• Increasing the impact

Image shapes

Cropping for effect

Crop in picnik.com

• Upload photo

• Click on EDIT

• Now click on crop button

• Click on the frame and drag

• Double click

Re-sizing

• Reducing the size

• Reducing the memory space too

• Remember to keep proportions and change ONLY height or width NOT BOTH

Resize in Picnik.com

• Upload photo

• Click on EDIT

• Click resize button

• Enter new height OR new width,

• Keep proportions button is ticked

• Click save

Saving a jpeg

• Options to compress the image further…

– 100%– 95%– 10% compression

Create in picnik.com

• CREATE– Add text– Add shapes/images– Round corners, frame– Change to black and white

Questions?