Download - Working with Images
![Page 1: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/1.jpg)
Working with
Images
![Page 2: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/2.jpg)
![Page 3: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/3.jpg)
What is a digital image?
1 inch
72 pixels
3 inches
216 pixels
1 pixel = 0.3mm
![Page 4: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/4.jpg)
Images can be measured in
• Physical size – 2000 x 3000 pixels– 5 x 10 cm (or inches)
• Memory space– 2MB– 25kB
![Page 5: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/5.jpg)
560 seconds
3000 x 2000 pixels3.5MB
![Page 6: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/6.jpg)
250x1805 seconds
![Page 7: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/7.jpg)
Image size - rule of thumb
• Website images should be no more than– 350 x 350 pixels – ½ MB
• Exceptions– Full width banner– Enlarged image
![Page 8: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/8.jpg)
Image types
.gif
.jpg
.tiff
.bmp
.png
YESYESNONONO
![Page 9: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/9.jpg)
Image types
• GIF - Graphic Interchange Format.– Oldest, most popular – logos, cartoons– background transparent– animated
![Page 10: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/10.jpg)
• JPEG – Joint Photographic Experts Group - JAY-peg – photographs– Flexible compression
![Page 11: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/11.jpg)
jpggif
![Page 12: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/12.jpg)
Which format should these be in?
![Page 13: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/13.jpg)
![Page 14: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/14.jpg)
Saving images
• Avoid
&
*
%
£
. ,
NO spaces, replace with -
![Page 15: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/15.jpg)
• 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
![Page 16: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/16.jpg)
Renaming images
• Use meaningful titles
Product185.jpg
lily-arrangement.jpg
Chippenham-flower-shop-lily-hand-tied.jpg
![Page 17: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/17.jpg)
![Page 18: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/18.jpg)
Images properties
In My pictures – Views tab change to thumbnail– Roll over image > image properties
• Dimensions - 200 x 400• Type - jpeg• Size - 200kb
![Page 19: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/19.jpg)
Renaming images
• Right click – select rename
• Type in a new name
• Image will retain it’s own file type
![Page 20: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/20.jpg)
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
![Page 21: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/21.jpg)
![Page 22: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/22.jpg)
How do we get images onto our PC?
• Digital camera
• Scan in a photo (or slide)
• From the internet
![Page 23: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/23.jpg)
From the internet
Royalty-free and rights-managed
Getty Images
www.gettyimages.com
iStock Photo
www.istockphoto.com
![Page 24: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/24.jpg)
Free Images
www.southwestbrand.info
www.swchambersonline.co.uk/devonimages
![Page 25: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/25.jpg)
Look at Google
www.google.co.uk– Click on images tab
– Right click and save as
– Be aware of copyright
![Page 26: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/26.jpg)
![Page 27: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/27.jpg)
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
![Page 28: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/28.jpg)
Cropping
• Reduces the physical size and memory space
• Changing the shape
• Increasing the impact
![Page 29: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/29.jpg)
Image shapes
![Page 30: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/30.jpg)
Cropping for effect
![Page 31: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/31.jpg)
![Page 32: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/32.jpg)
![Page 33: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/33.jpg)
Crop in picnik.com
• Upload photo
• Click on EDIT
• Now click on crop button
• Click on the frame and drag
• Double click
![Page 34: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/34.jpg)
Re-sizing
• Reducing the size
• Reducing the memory space too
• Remember to keep proportions and change ONLY height or width NOT BOTH
![Page 35: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/35.jpg)
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
![Page 36: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/36.jpg)
Saving a jpeg
• Options to compress the image further…
– 100%– 95%– 10% compression
![Page 37: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/37.jpg)
![Page 38: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/38.jpg)
![Page 39: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/39.jpg)
Create in picnik.com
• CREATE– Add text– Add shapes/images– Round corners, frame– Change to black and white
![Page 40: Working with Images](https://reader037.vdocuments.mx/reader037/viewer/2022103015/54c82fdb4a7959e1628b4583/html5/thumbnails/40.jpg)
Questions?