Working with Images


Published on

Working with images workshop slides

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Taking pictures – dos and don’ts Cropping Re-sizing Uploading Wondered why images look blocky or fuzzy What I am going to give you is rules of thumb. Digital images sometimes can be a bit tricky, so in order not to confuse you, I’m not going to mention a few things. However, if you do come across these things in the future, just let me know and I’ll help you out
  • A picture says a million words – we all know that. What we’ll run through today is about understanding what an image is, what the sizes mean
  • First let’s look at the basics. An image is made up of millions of tiny squares, pixels. A pixel – smallest part of an image the more pixels packed into an image the better the quality. On most digital images, a pixel is around 3mm each
  • How do they relate to sizes? We measure images by the number of pixels When working with images on the internet, we’re usually safe in assuming that there are 72 pixels in an inch So ..
  • This image is 2560x1960 Would take 560 seconds to look at on a dial up internet connection 3.5MB
  • Now it is 250x180 Would take 5 seconds 66kb
  • So what about types of images, images can be saved as various types – these are the 4 main ones For internet use, we like the first 2 PNG - Portable Network Graphics format is a completely loss-less compression. Gradients come out much smoother and do not have the distortions that may appear in a JPG. JPG - JPG's support over 16 million colors, but slightly "distort" the image to compress the file size. For photos, the human eye cannot tell the subtle changes in color, but along straight edges and in pictures with large solid colors, distortion becomes very apparent. PSD - PhotoShop Document supports millions of colors. This file format also has exceptional image quality, but it does not compress your file so file sizes will be large and uploading times will be long. TIFF - Tag Image File Format is similar to a PSD file but the layers are flattened. Uploading times will be long. BMP - MS Windows Bitmap Format - Saves your file pixel for pixel, Supports Millions of colors, the drawback is extremely large file sizes, which translates into extremely long upload times. AI - Adobe Illustrator Not Acceptable EPS - Encapsulated PostScript - Supports Millions of color and must be saved in Bitmap Form. Vector form is not acceptable.
  • What are they used for? GIF - Graphic Interchange Format. One of the oldest formats, it’s also one of the most popular and versatile.  It’s ideal for logos, cartoons and similar material.  GIFs contain up to 8 bit colour – that’s 256 colours. A benefit is that the background of a GIF can be made transparent, so you see the background colour of the browser window you're in. GIFs can also be animated. JPEG – Joint Photographic Experts Group. (pronounced JAY-peg ) This format uses a lossy compression system, meaning that some
  • Now I’ll show you how we can upload images, but first about saving
  • What is wrong with these?
  • So let’s have a go at re-naming images – but first, let’s look at image properties in my pictures. You can find out a lot about your images from this folder
  • Let’s now have a go – choose my pictures > image workshop > saving exercise Have a look – select thumbnails Now rollover the images Now right click and select rename Now rename these – see what you think School of thought about including keywords in your image titles
  • Exercise – rename the images I have put on called saving exercise To re-name an image, click once and retype Don’t forget to click THUMBNAILS to view the iamges Also notice… roll over the image and see the pixel sizes
  • So how do we get images onto our computers Is everyone happy with getting an image from a digital camera onto their computer? – If not show…
  • Pay for images - download them on to your pc. Good quality and well shot Look at these
  • Free images It is important to remember that all images are the copyright of the photographer and therefore permission should be sought before using. Let’s now go onto these sites and have a look for ourselves
  • Photoshop £400
  • Cropping is Cutting Go to flauntr and show or use IRfan view
  • Shrinking – we can’t really increase the size of images – look blocky or fuzzy Get your shape right first May need crop and re-size a few times to get an iamge to the right size Show on flauntr
  • At 100% pixel size 3072 x 2304 3 MB – take someone 346 seconds on a dial up to get the picture
  • But if you reduce it too much you get a pixellated look compressed to 10%
  • Working with Images

    1. 1. Working with Images
    2. 3. What is a digital image? 1 inch 72 pixels 3 inches 216 pixels 1 pixel = 0.3mm
    3. 4. <ul><li>Images can be measured in </li></ul><ul><li>Physical size </li></ul><ul><ul><li>2000 x 3000 pixels </li></ul></ul><ul><ul><li>5 x 10 cm (or inches) </li></ul></ul><ul><li>Memory space </li></ul><ul><ul><li>2MB </li></ul></ul><ul><ul><li>25kB </li></ul></ul>
    4. 5. 560 seconds 3000 x 2000 pixels 3.5MB
    5. 6. 250x180 5 seconds
    6. 7. Image size - rule of thumb <ul><li>Website images should be no more than </li></ul><ul><ul><li>350 x 350 pixels </li></ul></ul><ul><ul><li>½ MB </li></ul></ul><ul><li>Exceptions </li></ul><ul><ul><li>Full width banner </li></ul></ul><ul><ul><li>Enlarged image </li></ul></ul>
    7. 8. Image types <ul><li>.gif </li></ul><ul><li>.jpg </li></ul><ul><li>.tiff </li></ul><ul><li>.bmp </li></ul><ul><li>.png </li></ul><ul><li>YES </li></ul><ul><li>YES </li></ul><ul><li>NO </li></ul><ul><li>NO </li></ul><ul><li>NO </li></ul>
    8. 9. Image types <ul><li>GIF - Graphic Interchange Format. </li></ul><ul><ul><li>Oldest, most popular </li></ul></ul><ul><ul><li>logos, cartoons </li></ul></ul><ul><ul><li>background transparent </li></ul></ul><ul><ul><li>animated </li></ul></ul>
    9. 10. <ul><li>JPEG – Joint Photographic Experts Group - JAY-peg </li></ul><ul><ul><li>photographs </li></ul></ul><ul><ul><li>Flexible compression </li></ul></ul>
    10. 11. j pg gif
    11. 12. Which format should these be in?
    12. 14. Saving images <ul><li>Avoid </li></ul><ul><ul><ul><li>& </li></ul></ul></ul><ul><ul><ul><li>* </li></ul></ul></ul><ul><ul><ul><li>% </li></ul></ul></ul><ul><ul><ul><li>£ </li></ul></ul></ul><ul><ul><ul><li>. , </li></ul></ul></ul><ul><ul><ul><li>NO spaces, replace with - </li></ul></ul></ul>
    13. 15. <ul><li>canary palm.gif </li></ul>What’s wrong with these? <ul><li>Balance-valentine’s50%res.jpg </li></ul>canary-palm.jpg carnations-crysanths.jpg balance-logo.gif <ul><li>carnations & crysanths.jpg </li></ul>
    14. 16. Renaming images <ul><li>Use meaningful titles </li></ul><ul><ul><li>Product185.jpg </li></ul></ul><ul><ul><li>lily-arrangement.jpg </li></ul></ul><ul><ul><li>Chippenham-flower-shop-lily-hand-tied.jpg </li></ul></ul>
    15. 18. Images properties <ul><li>In My pictures </li></ul><ul><ul><li>Views tab change to thumbnail </li></ul></ul><ul><ul><li>Roll over image > image properties </li></ul></ul><ul><ul><ul><li>Dimensions - 200 x 400 </li></ul></ul></ul><ul><ul><ul><li>Type - jpeg </li></ul></ul></ul><ul><ul><ul><li>Size - 200kb </li></ul></ul></ul>
    16. 19. Renaming images <ul><li>Right click – select rename </li></ul><ul><li>Type in a new name </li></ul><ul><li>Image will retain it’s own file type </li></ul>
    17. 20. Rule of thumb – saving <ul><li>No spaces, no characters </li></ul><ul><li>Save with meaningful titles </li></ul><ul><li>Use – not _ </li></ul><ul><li>Gif – for logos, graphics </li></ul><ul><li>Jpg – for photos </li></ul><ul><li>Don’t use bmp, tiff </li></ul>
    18. 22. How do we get images onto our PC? <ul><li>Digital camera </li></ul><ul><li>Scan in a photo (or slide) </li></ul><ul><li>From the internet </li></ul>
    19. 23. From the internet <ul><li>Royalty-free and rights-managed </li></ul><ul><li>Getty Images </li></ul><ul><li> </li></ul><ul><li>iStock Photo </li></ul><ul><li> </li></ul>
    20. 24. <ul><li>Free Images </li></ul><ul><li> </li></ul><ul><li> </li></ul>
    21. 25. <ul><li>Look at Google </li></ul><ul><li> </li></ul><ul><ul><li>Click on images tab </li></ul></ul><ul><ul><li>Right click and save as </li></ul></ul><ul><ul><li>Be aware of copyright </li></ul></ul>
    22. 27. How do you change an image? <ul><li>Image manipulation software </li></ul><ul><ul><li>Photoshop </li></ul></ul><ul><ul><li>Free software download </li></ul></ul><ul><ul><ul><li>Gimp - </li></ul></ul></ul><ul><ul><ul><li>Irfanview - </li></ul></ul></ul><ul><ul><li>Websites </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
    23. 28. Cropping <ul><li>Reduces the physical size and memory space </li></ul><ul><li>Changing the shape </li></ul><ul><li>Increasing the impact </li></ul>
    24. 29. I mage shapes
    25. 30. Cropping for effect
    26. 33. Crop in <ul><li>Upload photo </li></ul><ul><li>Click on EDIT </li></ul><ul><li>Now click on crop button </li></ul><ul><li>Click on the frame and drag </li></ul><ul><li>Double click </li></ul>
    27. 34. Re-sizing <ul><li>Reducing the size </li></ul><ul><li>Reducing the memory space too </li></ul><ul><li>Remember to keep proportions and change ONLY height or width NOT BOTH </li></ul>
    28. 35. Resize in <ul><li>Upload photo </li></ul><ul><li>Click on EDIT </li></ul><ul><li>Click resize button </li></ul><ul><li>Enter new height OR new width, </li></ul><ul><li>K eep proportions button is ticked </li></ul><ul><li>Click save </li></ul>
    29. 36. Saving a jpeg <ul><li>Options to compress the image further… </li></ul><ul><ul><li>100% </li></ul></ul><ul><ul><li>95% </li></ul></ul><ul><ul><li>10% compression </li></ul></ul>
    30. 39. Create in <ul><li>CREATE </li></ul><ul><ul><li>Add text </li></ul></ul><ul><ul><li>Add shapes/images </li></ul></ul><ul><ul><li>Round corners, frame </li></ul></ul><ul><ul><li>Change to black and white </li></ul></ul>
    31. 40. Questions?