Introduction to Digital Imaging
Lesson One: Intro to Photoshop, re-sizing, cropping and digital image characteristics.
This module introduces you to working with digital images with a focus on production issues such as working with a design brief, taking the "right" images and processing the images ready for output to a web /screen scenario.
How you will be assessed
At the end of the module you should be ready to be assessed using three assessment tasks. See Lesson 4 in this module for more details on the assessment tasks.
The unit you will be assessed against is CUADIG303 Produce and prepare photo images (link to training.gov.au). This unit addresses the following Elements, Performance and Knowledge Criteria:
- Analyse the client’s needs
- Undertake research to source the images
- Manipulate and produce images for use in website development, to meet the requirements of the brief
- Save the images in appropriate format
- Identify and describe the industry standards and the copyright legislation relevant to digital images
- Describe digital image formats and their application
- Identify and summarise common digital image editing software
- Explain sustainability concepts appropriate to the ICT industry
During this module you will be expected to demonstrate an understanding of the following fundamental digital image concepts:
- Digital image resolution
- Scaling images
- Colour modes
- File formats such as jpg, png, psd, gif
- Tonal & colour adjustment; adjustment layers
- Cropping Images
- Making selections using quick-mask, colour range, quick selection tools
- Composing images using layer masks
- Processing artwork for the web; transparent PNG
- Creating background images for the web
- Learning resources for Photoshop | texts, online resources etc.
Adobe Photoshop | The Industry Standard
Photoshop is the most popular tool for creating or editing digital images for several reasons; it offers a common-sense production flow, it has a vast user-base, it imports / exports most image-file formats, runs solidly on most computers and has been around since 1990...every studio, print shop, Graphic Designer, Web Designer or Photographer has a copy.
There are alternatives such as Affinity Designer, Gimp, Paint.net and PaintShop Pro but Photoshop remains the industry standard.
Within CUADIG303 Produce and prepare photo imagesthe emphasis is on working with content specifically for web & multimedia. Photoshop is great for this scenario and it can also offer utility in the field of pre-press & print publishing; such as colour management, ink control, file format conversion & custom spot colour support. In addition to web and print, CC allows you to do basic video editing and 3D rendering too! See these new features here at www.adobe.com
The tool of choice for this module is: Adobe Photoshop CC on Windows or mac. The latest version is always the one to get. The mac version is almost identical, the significant difference being the keyboard shortcuts. Keyboard shortcuts are where enormous productivity gains can be made.
Resources for Learning Photoshop
For a free resource (Photoshop Anthology) that shows you the basics of Photoshop go to Issuu.
The Photoshop Anthology is a recommended reference if you need to know how to prep. images for the web. Although it's targetting CS2 it covers the timeless features of Photoshop such as layers, layer masks, vector tools and image formats.
While you're there, check out Precision Photoshop from Lopsie Schwartz. Lopsie used to work for WETA (NZ). This text is an "accelerated" sequence of instruction.
"Layers" are an important part of Photoshop's utility and Matt Kloskowski's "Layers" book is recommended. It explains with clarity how layers work and builds your understanding using examples.
In addition to our in-house developed videos accessed via our shared Google Drive, there's an increasing quantity of good video demos on Youtube or Vimeo. For links to the recommended video tutorials see our Digital Imaging Forum.
If you want to look for some, just search for something like "photoshop cc 2015 (or 2017) beginner tutorial ". If you find a useful resource, share the URL in our Digital Imaging Forum.
Adobe publish videos to support their product at the adobe.tv domain. There's lots of useful video tuition there for beginners to experts on a range of their software. You'll definately need a good Internet connection and a large plan to see these.
If you're new to AdobeTV, here's a good place to start, Adobe instructor Terry White covers "Ten things a beginner wants to do in Photoshop". You can watch this then jump straight in exploring the tools.
Lynda.com (paid service)
If you can afford membership, lynda.com is one of the most worthwhile learning video resources.
Digital Tutors (paid service)
Similarly, Digital Tutors is another highly regarded resource. Digital Tutors Photoshop Tutorials.
There is an extensive list of text books for Photoshop (all versions) in TasTAFE Libraries. For details on how to borrow items go to the library site.
Preparing images for different purposes
Digital images need to be processed to make them suitable for the intended purpose. Print requires the images to be treated differently to images for the web. The same applies to images for Broadcast TV, mobile devices and film post-production/ VFX.
Digital images can vary in resolution, colour mode, bit-depth, file size, screen size, metadata, animation format, file format, pixel aspect-ratio, orientation and transparency (aka Alpha). The only constant to them all is they're rectangular; they all have a width and height.
Getting images into your computer
Techonology has evolved to the point where getting images into your computer is easy these days.
There's a lot of ways to transfer files from your device such as USB, Bluetooth, Cloud storage, MMS (mobile phone) and memory card readers.
If you can stretch to the relatively steep purchase price, graphic tablets allow you to sketch your artwork directly into your computer...no scanning necessary. This is the preferred method of most professional digital illustrators, designers and animators.
Image resolution defined
Any digital image is composed of discrete dots of colour known as pixels (an abbreviation of picture elements) arranged in a matrix. See the image opposite for example; see the little "squares"? They're pixels. The pixel is the smallest piece of a digital image. Open an image in Photoshop and zoom into it and you'll see them. Each on-screen pixel is the result of red, green and blue LCD elements combining. The technology behind LCDs is highly sophisticated and easy to take for granted because it's virtually invisible.
Pixels and Print / Pre-Press
In the context of print / pre-press, the resolution of a digital image destined for print is "dpi"or dots-per-inch. Think of it as pixel density.
Your local newspaper most probably works with images at 180-220dpi although that does vary acording to their printing press. Graphic Designers dealing with Printers also need to know about lines per inch (lpi) of the print press; this value has a bearing on what resolution the images need to be to get the best results in print (rule of thumb is 2 x LPI = dpi) and most print presses use 85 for newsprint to 150-200 LPI for glossy paper.
Images for the web / screen are different.
Images for the web don't require a specific data density like dpi. They simply use the width and height settings to determine the physical size of the image.
A 600 pixel wide, 72dpi image and a 600 pixel wide 360dpi image when published to the web will be the same size as each other when viewed side-by-side on the same computer/ device.
TVs and Pixels
To a TV salesman, resolution means the number of pixels across and down. So your new Full-HD TV will have 1920x1080 pixels or your new 4K TV will have 3840x2160 pixels and look amazing.
Here's a site explaining resolution in plain English with only a little jargon.
One of the most frequently performed tasks by web designers on images is resizing them. Typically a client sends you artwork that they want on their website. First thing you need to do is make sure the client can send you the highest resolution they have.
You need the highest resolution images because you then have lots of pixels to work with for scaling up the image and editing it. If you scale an image up in size you lose image quality and if you start with lots of pixels in the image before you scale it up, the imperfections created by the scaling effect are reduced.
Scaling a digital image can drop image quality
If you scale a digital image bigger, then your image editing software needs to add pixels. The image quality drops because the software algorithm adds pixels based on adjacent exisiting pixel values. It makes a "guess" on what colour the new pixel is based on exisiting adjacent pixels. This process can lead to loss of contrast and definition.
Deke McClelland explains Resolution (data density)
Still need a hand with understanding resolution? Check out Deke McClelland from Lynda.com on resolution. He talks about dpi for print purposes but also emphasises (at 8mins 50secs) that dpi has no bearing if you're preparing images for screen.
How image size relates to file size
More pixels in an image directly translates to bigger file sizes.
If you doubled the physical size of an image (height x 2, width x 2) you'd expect the total number of pixels to double...but no, it does in fact, quadruple the total. This is because it's an area calculation; width x height.
Try it yourself
Test this by downloading this image . Right-click on the link, "Save link as..." save it to your desktop. Find it on your desktop, right click it and open with Photoshop. In Photoshop, go to IMAGE/IMAGE SIZE to find out about its pixel dimensions and resolution.
Now double the image size to 700x472 & check that the total number of pixels does, in fact, go up by 4x .
To check the number of pixels in your image using Photoshop, go to WINDOW / HISTOGRAM and ensure "select expanded view" (see screen shot) is on.
The physical size of the image has a direct influence on the file size...if your client wants a double-size image, they need to be aware that the file size doesn't just double either...it quadruples.
Digital cameras, drum scanners, flatbed scanners, slide scanners, multi-function photocopiers, screen captures etc. will all use a different data density or ppi (pixels per inch).
Slide Scanners (aka Negative Scanners) capture at high resolutions, from 1500 dpi to 2500 dpi. Drum scanners take it even higher.
Regardless of the device, the goal is to try to capture the most pixels you can with the widest range od tonal values. Obviously, an expensive device does it better than a cheap one. If you're after advice on what sort of camera to buy pop into our Digital Imaging Forum and ask there.
As we move towards market-wide deployment of 4K/8K devices such as TVs and monitors, capturing lots of pixels is a relatively future-proof strategy. Note: the vertical pixel count is rarely quoted since it's determined by the aspect ratio of the device.
Scaling Up | Scaling Down
Scaling up means a loss of quality. Scaling down however retains quality; Deke's video above explains this using the term; "re-written pixels".
Digital cameras capture images using sensors. Expensive cameras use relatively sensitive sensors to capture as many pixels as they can with as wide a range of tones as they can. Less expensive cameras trade this sensitivity for cost.
One of the most important settings you need to consider when capturing an image is the number of pixels it captures. There's exposure, white balance, composition, ISO and shutter speed to consider as well but in most cases, the more pixels the better. Consider though that the more pixels you capture, the bigger the file size for the image.
Learning Task: Re-Sizing Images
Approx. 1-2 hr.
Based on a single theme of your choice, take ten photos using the highest pixel count setting for your camera, you can even use the "RAW" setting if your camera has one. What's RAW?
How you take a "good" photo is covered in greater detail later but for now just snap away. If you need more guidance on taking good photos here's a recommended reference.
Most Learning & Assessment tasks in this course will provide you with creative direction. Some don't, some offer total freedom but in industry, you'll be operating under some sort of direction from a colleague or a client. In this case, working to a theme is a gentle introduction to that scenario.
Pick the best one
Pick the image you like best then archive it somewhere safe and make a copy. Make a note of the original image's file size (in MB) and pixel dimensions; width and height.
Now work on the copy in Photoshop and move through these steps:
- Re-size it smaller; Image / Image Size. Make it 1024 wide and let Photoshop determine the appropriate height to maintain the aspect ratio.
- Use Photoshop File / Export / Save for Web (Legacy) or Export As...to save it as a jpg, 60 quaity.
- Record the size of the re-sized file in MB.
Publish your best photo in both sizes to your blog and caption your photo with the theme, both the original big file size in MB, width / height and the re-sized version's file size, width and height. Also explain why you chose this photo as your "best".
Once you've published your photos, submit your blog's URL for feedback.
Chris Adams 2017
Learning Task: Understanding Resolution Approx. 2 hrs.
Short Answer Research
In your own words, answer these questions:
- Define pixel, dpi and ppi.
- What's the typical resolution of the latest orbiting "spy" or "keyhole" satellite (what's the size of the smallest object it can detect) ?
- What sort of resolution ( dpi ) typically would your images need to be at for high-quality glossy print publications ?
- What sort of dpi do your images need to be for the web? Hint: Watch Deke's video above
- What's the maximum image size of your digital camera (width and height in pixels) ?
- Why is it important to capture as many pixels as you can ?
- Why is it "bad" to resize images bigger (describe what happens to the image) ?
- What's a Retina display? How do Retina display-equipped devices affect how you save your images?
- In your own words, describe what the "Resample Image" option in Photoshop does (shown below)
Hint: resizing demo video
Compile your answers into an email and send to your teacher for feedback.
List your sources including links you used.
If you have any questions about this task, jump into our Digital Imaging Forum to discuss.
Chris Adams 2017
In addition to the variation in size and resolution, digital images also differ in colour MODES. A mode is a way of representing an image based on a colour model.
There are several colour models to represent colour images, here are the popular ones:
- RGB (red, green, blue)
- CMYK (cyan, magenta, yellow and black)
- Indexed Colour
CMYK mode is used for print/pre-press, RGB and INDEXED (gif images) are used for almost everything else.
If you needed to change an image's colour mode, open it in Photoshop, and select the mode you want change it to from the IMAGE/MODE menu then save it.
If you're creating images for the web, you need to use RGB colour mode. If you're going to print, use CMYK and if you receive an image in CMYK mode and it needs to go to the web or screen, then convert it to RGB.
Cropping an image using Photoshop
A very easy way to dramatically change the "look and feel" of your image is to crop it. If you need to know more on the power of cropping, here's an article on cropping strategy.
There's two ways to crop an image. Using the Rectangular Marquee Tool or using the Crop Tool.
The Marquee Tool is shown left.
- Step 1, make a selection
- Step 2, top menu; IMAGE/CROP
Here's the final result. Our subject is now dominant and the whitespace is no longer as relevant.
The other way using the Crop Tool offers more flexibility, see it demonstrated in this Lynda.com YouTube video: Deke McLelland (duration | 9 mins)
Rule of Thirds | Crop Tool
If you drag the handles of the crop tool the Rule of Thirds guides appear (see opposite).
According to the Rules of Composition, the smart choice is to locate an item of interest on one of the four grid intersections or aligned with one of the divisions. In this instance, the pergola roof hits an intersection and most of the pool occupies the lower third.
Once you've positioned the guides where you want them, hit Enter to confirm changes. Hint: If you want to "get out" of using the tool (any tool) hit the Esc key.
Learning Task: Cropping an image | Approx 2 hrs.
There are several reasons to crop an image. Photodoto.com has an article on why and how you crop a photo. Read the article then do the following task:
With the theme of your choice (pick a new theme), take a lot of photos, pick five that you can use to demonstrate your crop strategy (see below) and use the cropping tool or marquee tool (aka rectangular selection tool) in Photoshop to crop them.
We need to see the original photo too, so save a "before" and "after" for each. That's ten images in total.
- Crop to emphasize something in the image
- Change the composition and add dynamic movement by moving the main subject out of dead center
- Change the orientation by making a horizontal aspect image into a vertical aspect image (or vice-versa)
- Change the compostion so it adheres to the "Rule of Thirds"
- Change the composition so you leave a relatively large space for type (ie: see pool photo above, note how the large expanse of pool is "ripe" for placing a headline or logo). For extra "brownie points"; If you want to populate the space wth either type or logo feel free. If you don't know how to do that, don't worry, we cover it later on in this module.
- Change the perspective of an image; take an exaggerated perspective photo and make it "straight" again.
- Hint: http://www.youtube.com/watch?v=IjWidWhpzxI
Ensure your ten images are 800px wide (except for the vertical photo, make that 400px wide), RGB, saved as a 60 quality .jpg.
Publish all ten photos to your blog with captions on the cropped ones describing why you cropped it the way you did.
Submit your blog URL for feedback via email
Chris Adams 2017
Learning Task: Scan & crop an image (approx 1-2 hrs.)
Flatbed scanners are a convenient way to capture artwork and can give you excellent tonal range in the shadows thanks to the very consistent light source.
For this task, scan something(s). Challenge yourself by scanning in unconventional items. Scan items that aren't flat. Ensure your scanner is set to "colour photo".
Save the original scan somewhere safe then work on a copy in Photoshop and use one of the crop strategies from the previous task to add greater value/ interest to the artwork.
Submit both the original image and the cropped artwork as 60 quality .jpg via email for feedback.
Comment on the quality of the process and compare it to camera capture.
If you need a hand with this, ask for help in our Digital Imaging Forum.
Chris Adams 2017
This lesson introduced cropping and re-sizing images using Photoshop. These are vital skills to have. If you can master these you can handle the majority of scenarios where clients provide you with artwork of the "wrong" size or resolution or photos that have artefacts that need to be cropped-out to ensure the items within the image have the right emphasis.
If you need help on anything in this lesson, jump into our Digital Imaging Forum.