Available free of charge from: http://www.adobe.com/svg/overview.html ... Of course these categories of software are ove
1
****
Pictures / images on computers Images are important
2
****
Why learn the basics of images? Pictures/graphics/images are often inserted in » word processing documents » presentations with slides » web pages Therefore, it is interesting to know how » to acquire images » to change or improve images » to adapt images to the chosen output medium
3
****
Why learn the basics of images? • Scanning a document yields a picture, not a text. (OCR can then exploit the picture to yield a text in some cases.) • Pictures in a collection must be managed: »Storing »Making backups »Ordering / sorting images in a structure that can be browsed • This can be needed at a personal or institutional level, as a component of digital assets management.
4
****
Why learn the basics of images? Documents are more and more made available through the Internet. Therefore it is important to make the file sizes small, while preserving an appropriate image/picture quality.
5
****
Pictures / images on computers Raster graphics versus vector graphics
6
**--
?? Question ??
Explain the differences between raster graphics and vector graphics.
7
**--
!! Task - Assignment !! •Create a small circle with a paint program for raster graphics and save this as a file.
•Create a small circle with a draw program for vector graphics and save this as a file. •Open each of both files again applying the same program that you used to create it and ENLARGE the circle.
8
**--
!! Task - Assignment !!
•What is the difference between the resulting drawings (on screen as well as printed)?
9
**--
Graphics formats: raster and vector graphics • Raster graphics used in programs for “painting”
• Vector-based graphics used in programs for “drawing”
10
**--
Graphics formats: raster & vector graphics compared
Property
Raster graphics Vector graphics
•Suited for “painting” and “retouching”
+
-
•Resolution adapted to output medium
-
+
large
small
•Size of files
11
**--
?? Question ??
In which procedures are vector-based graphics converted to raster graphics?
12
**--
?? Question ??
Why can raster graphics not be as easily converted to vector graphics, as vector graphics can be converted to raster graphics?
13
**--
?? Question ??
What is easier: Converting raster graphics to vector graphics or the other way? Explain.
14
***-Examples
File formats for raster graphics only File name extension
Origin
.BMP .GIF .JPG .PCX, .PCC .PNG (PNG8, PNG24) .RLE .TIF ...
Microsoft bitmap CompuServe / Unisys JPEG Z-Soft Paintbrush W3C Microsoft compressed bitmap Aldus PageMaker ...
15
**--Examples
File formats for vector graphics File name extension Name / Origin CDR CGM EPS SVG ...
Corel Draw! Graphics Metafile Encapsulated PostScript Scalable Vector Graphics ...
16
*---
!! Read !!
Read Scalable Vector Graphics. [online] Available free of charge from: http://www.adobe.com/svg/overview.html [cited 2005]
17
**--
Graphics formats: the problem of exchange The differences in all the graphics file formats cause the requirement of filter / conversion programs, when a graphics file must be inserted in a document which is managed by an application program which works primarily with another graphics file format.
18
**--
!! Task - Assignment !!
Incorporate an image, stored in a graphics file, in a document created by your program for word processing. Which procedures do you know to accomplish this?
19
****
Images on computers Raster graphics
20
**--
!! Read !! Read a brief introduction to digital imaging: Cornell University Library / Research department Moving theory into practice: digital imaging tutorial. [online] Available from: http://www.library.cornell.edu/preservation/tutorial/ [cited 2004] 1. Basic terminology (key concepts) 2. Selection
21
****
How to obtain computer files with images/pictures? • from the collection of clip art delivered with the software to create presentations • from printed material
(by scanning)
• from the WWW or an intranet
(by saving to disk)
• by making photographs yourself •…
22
***-
How to create digital photographs for use on computers? • To obtain digitized photos to insert in your presentation file, you can »use a classical, chemical camera and digitize the results,
—by scanning the printed photo by using a page scanner —by using a specialized scanner to scan the photo film —by using the Kodak PhotoCD service through a good photo shop »use directly a digital camera !
23
**--
!! Read !!
You can learn the basics of digital photography by reading for instance: Curtin, Dennis P. [online] Available from: http://www.shortcourses.com/ [accessed 2003, 2009]
24
**--
Software to work with image files: categories •
Several types of computer programs can be used to work with images on computer: 1. To view individual picture files full screen and as a slideshow 2. To view/manage/organize picture files on a computer 3. To edit/improve images
•
Of course these categories of software are overlapping.
•
Ideally 1 software package offers all features.
25
**--Examples
Software suitable to view image files: examples • The program to view images that comes with your operating system.
Available without extra costs.
• Irfanview
Freeware. Offers also some editing functions.
26
**--Examples
Software suitable to edit image files, produced by Microsoft: examples (1) • Microsoft Paint
• simple
• The drawing module that is available to all application programs in the suite Microsoft Office 97, 2000
• NOT suitable to create appropriately compressed files
• The drawing module that is available to all application programs in the suite Microsoft Office XP=2002, 2003…
• saving in PowerPoint with Tools | Compress pictures allows some compression
27
**--Examples
Software suitable to edit image files, produced by Microsoft: examples (2) • Microsoft PhotoEditor • suitable to create JPG files, (part of Microsoft Office 97) but an obsolete program • Microsoft PhotoDraw 2000… • Microsoft Digital Image Pro, Microsoft Photo Standard, Digital Image Suite…
• suitable to create JPG files; easy to use program
28
**--Examples
Software suitable to edit image files, produced by Microsoft: examples (3) • Microsoft Office 2003 Picture manager
• Comes with Microsoft Office 2003. Replaces Photo Editor that came with earlier versions of Office, although it offers fewer editing features.
29
***-Examples
Software suitable to edit image files, independent of Microsoft: examples • Irfanview
Freeware
• OpenOffice • Picasa
• The GIMP • Serif Photoplus, older versions • Serif Photoplus, newer versions
• Ulead Photoimpact • Paint Shop Pro, by JASC, before 2004 Paint Shop Pro, by Corel, since 2004
Commercial software
30
***-Examples
Software suitable to edit image files, independent of Microsoft: examples • Corel PhotoPaint
• suitable to create JPG files; commercial software
• Adobe PhotoShop
• suitable to create JPG files; powerful, expensive, and complicated program
• Adobe PhotoShop Elements
• suitable to create JPG files; powerful program, much cheaper than the full PhotoShop
31
***-
?? Question ??
Which program will YOU use to improve your digital photos and other images?
32
***-
Creating and improving images on computer (1) Workflow: • Scanning or PhotoCD or digital photography • Archive = make backup on an external hard disk (consider using a RAID disk system for security) or DVD-R or DVD+R or DVD-RW or DVD+RW (or on CD-R or CD-RW)
33
***-
?? Question ??
1. Which computer hardware system do YOU use to store and retrieve your computer files? 2. Do you consider switching to a better system?
34
***-
Creating and improving images on computer (2) • Use a graphics program and » Save (lossless) as a (big) master file, for instance in TIFF format, using lossless compression such as LZW during the saving (or not) » Rotate (if required) » Crop (if required) , keeping the final context in mind (computer video screen, printed report, print in a frame…)
35
***-
Creating and improving images on computer (3) » Convert from colours to grayscale (if required) » Increase the overall tonal range (which also increases contrast) AND decrease or increase overall brightness (if required) (can be accomplished in 1 action) » Increase or decrease the overall contrast (if still required even after increasing the tonal range)
36
***-
Creating and improving images on computer (4) » Improve/change overall colors; for instance increase or decrease saturation (if required) » Dodge or burn = increase or decrease the brightness of particular areas manually » Apply one or several “filters” or “effects” (if required) » Apply a “tone mapping” algorithm to increase local contrast (if required)
37
***-
Creating and improving images on computer (5) » (Do NOT resize) » Check the resulting picture file in a full screen viewer and improve further if required
38
**--
Creating images on computer for printing (1) •
Sharpen (if appropriate) (always as last step), using a sharpen/unsharp filter/effect: 1. Choose a suitable magnification on the display monitor to preview the sharpening. (In most cases so that the size of the picture on the display is close to the size that will be printed.) 2. Sharpen a maximum amount, only for the preview of the following steps.
39
**--
Creating images on computer for printing (2) 3. In this preview mode, choose an appropriate range/radius for the sharpening. 4. Choose an appropriate value for the sharpening threshold, to avoid sharpening of unwanted noise. 5. Decrease the amount of sharpening to an appropriate level
40
***-
Creating images on computer for printing (3) • •
Save (lossless) (for instance in TIFF format) Archive = make backup of the improved, edited files, on an external hard disk or on DVD-R or DVD+R or DVD-RW or DVD+RW (or CD-R or CD-RW) Use a different disk than the one that holds your original master files; then in case that a disk is lost you still have the other file available.
41
***-
Creating images on computer for printing (4) •
• •
• •
Open the file in your program for printing OR insert the file in a document file in your program for printing. Choose a suitable paper type and size. Adapt the printer settings to the chosen » paper type & size » printer & ink » size of desired printout. Check with preview. Print.
42
***-
Colour ranges supported by video displays and printers Range of colours supported by various processes = “gamut”
Visible colour gamut Video display gamut Saturated green Saturated red
Inkjet colour photo printer gamut Saturated cyan Saturated yellow
43
***-
?? Question ??
Indicate on the gamut scheme the range of colors that cannot be printed.
44
***-
?? Question ??
Indicate on the gamut scheme the range of colors that can be seen on the video monitor, but cannot be printed.
45
***-
?? Question ??
Why can some colors be seen on the monitor, while a typical printer can NOT print them.
46
***-
?? Question ??
Why can some colors NOT be seen on the monitor, while a typical printer can print them.
47
**--
!! Assignment !!
Learn about color working spaces from http://www.cambridgeincolour.com/tutorials/sRGB-AdobeRGB1998.htm Use your computer to read this document; do not print it, because the colors and links are important.
48
**--
!! Read !!
Rodney, Andrew The Role of Working Spaces in Adobe Applications [online] Available free of charge from: http://www.adobe.com/digitalimag/ps_pro_primers.html [cited 2009]
49
***-
!! Task - Assignment - Exercise !! 1. Find or create a relevant picture / photograph for printing. 2. Crop it (and perhaps further edit it) to make it suitable for printing. 3. Make a print-out that covers about half the surface of an A4 page in the center of that page.
50
***-
!! Task - Assignment - Exercise !!
Inspect an image that you have printed: •Is the quality suitable for your kind of work?
•Do the printed colours correspond well enough to what you see on the computer display?
51
**--
Color management: tools offered by Adobe PhotoShop
52
**--
Color management: tools offered by Windows 7
53
**--
!! Read !!
A Consumer Guide to Traditional and Digital Print Stability [online] Available free of charge from: http://www.imagepermanenceinstitute.org/shtml_sub/consumerguide.pdf 2004 [cited 2009]
54
**--
!! Read !!
A Consumer Guide to Modern Photo Papers [online] Available free of charge from: http://www.imagepermanenceinstitute.org/shtml_sub/modernphotopapers.pdf 2009 [cited 2009]
55
***-
Creating images on computer for a presentation or web (0) • The following recommends a workflow from a digital picture file to a file for e-mail, web or presentation with digital projection. • In some programs parts of this workflow are automated. • For any intermediate save, save lossless, for instance in a TIFF format with lossless compression for instance with the name “originalfilename-smaller”.
56
***-
Creating images on computer for a presentation or web (1) • Open the starting picture file with your program. (In most cases you proceed with the file prepared as explained above.) • If the file contains several layers and if you want to sharpen the picture, then flatten (= concentrate all information together) (because sharpening an image that contains layers may not work).
• Resize / resample (to make the file smaller)! • Sharpen (if appropriate) (always as last step)
57
***-
Creating images on computer for a presentation or web (2) • In some advanced applications / workflows, the picture file may have a colour space profile such as the standard AdobeRGB profile, which is suitable for a colour space with a gamut that is bigger than the gamut of a computer display, then convert the profile to the standard sRGB colour space profile as destination space profile that is more suitable for displays and projectors. In most workflows the starting picture file will already have the sRGB profile attached or no profile at all.
58
***-
Creating images on computer for a presentation or web (3) • Save as JPEG file at an appropriate level of quality (or as a GIF file, if the number of colours < 256)
59
***-
Creating images on computer for a presentation or web (4) • Archive = make backup on an external hard disk or on DVD-R or DVD+R or DVD-RW or DVD+RW or on CD-R or CD-RW. Use a different disk than the one that holds your original master files; then in case that a disk is lost you still have the other file available. • Insert in a slide or in a web page or use in email.
60
***-
Creating images on computer for a presentation or web (5) • The considerations on compressing images are not only applicable to a pure, individual picture file, but also to a file that contains a document including 1 or several images. • Examples: file saved by a program »for word processing »to create a presentation with slides
»to produce a “portable” PDF file
61
***-
?? Question ??
How and when comes compressing images into the action of saving a file that contains an image, using your program to create a PDF file?
62
***-
?? Question ??
What is an important difference between creating images on computer •for printing •for a presentation or for a web
63
**--
?? Question ??
Why does the function in photo editing software, that is named “sharpen” not really sharpen your photo, in the sense that it does NOT increase the resolution of your photo. Then how does this work?
64
**--
?? Question ??
If you apply sharpening, then this should be the FINAL step in improving your picture. Why?
65
***-
Developing web documents: guidelines related to graphics • File formats used mostly on a web are GIF, JPG, PNG, because the common browsers include viewers for the file formats. • For each image/picture, use an appropriate graphics file format. • Graphics/images/pictures take long to download. To speed things up, compress JPG (or PNG) files to make them as small as possible, while preserving an appropriate quality.
66
***-
?? Question ??
For which applications is the GIF file format appropriate? For which applications is the JPEG/JPG file format appropriate?
67
**--
?? Question ??
Which properties of file formats for raster graphics are important?
68
***-
File formats for raster graphics: a comparison BMP
GIF
JPG
PNG24
TIF (recent versions)
256
256*256*256 =
more
256*256*256 =
RLE • Maximum number » of colours in one image
256*256*256 = 16 777 216
16 777 216
16 777 216
of bits per pixel
24
8
24
24
24
• Compression of file size without loss of quality
RLE
LZW
JPEG
+
+
+
+ (but colours can be lost)
-
-
+
65535 x 65535
65535 x 65535
more
more
• Multiple images in 1 file
-
+
-
-
+
• Animation is possible
-
+
-
-
• Maximum no. of pixels per image
• Can include layers
65535 x 65535
+
69
***-
!! Task - Assignment - Exercise !! Use a picture / photograph as obtained with a camera and improved with a suitable program, to include it in a presentation or a web. 1.
Make it smaller, so that the resulting number of picture elements is suitable to cover a typical projection screen as far as possible.
2.
Then save it as a JPG file (not as a component of a presentation file or in another document file).
(See the example that follows.)
**--
70
71
**--
!! Task - Assignment - Exercise !! Select or create an appropriate photograph file. Save this file as a JPEG file under a different name. Repeat this at about 3 very different levels of compression and thus of image quality (always starting from the appropriate original photo file, because JPEG is a final storage format). Load all the resulting photo files in a program to edit such files; zoom in to 400% for instance; use tiling to display the photo files simultaneously on the screen; compare their quality. Determine also the file size of each photo file. Decide finally which compression level is appropriate or your aims.
72
**--
?? Question ??
For which type of image is GIF appropriate?
73
**--
?? Question ??
On the WWW, GIF and JPG are mainly used, but nevertheless TIF is also important. Why?
74
***-
?? Question ??
Which programs do you know and which program do you use to save images as JPEG/JPG files?
75
***-
?? Question ?? Assume that you have a normal digital colour photo and that you want to save it with a particular number of pixels in a file that is as small as possible. Which file format allows the smallest file size: GIF or JPG?
76
*---
?? Question ?? How long will a download of your photo file take approximately, in the case that not the Internet but the modem used by the receiving client is the bottleneck, the limiting factor in the data transfer?
77
**--
?? Question ??
Why can we say that JPG is a file format for presentation only?
78
**--
?? Question ?? When a photo is made and saved as a JPG file in a digital camera, then information/quality is lost. Camera producers know this. Why is JPG used anyway?
79
**--
Maximum number of colours displayed by computers: introduction • The number of colours (including shades of a colour also) that can be displayed simultaneously on a computer screen/display is limited. • This limitation is primarily caused by the limitations of the video/graphics card used by your computer.
80
**--
?? Question ??
How many bits are needed to store a black-or-white picture element on computer?
81
**--
Maximum number of colours displayed by computers: examples • Examples of maximum number of colours on a computer display: »8-bit 2**8 = 256 : typical for older systems
»16-bit 2**16 = 65536 = “thousands of colors” = “High Color” »24-bit 2**24 = (2**8)*(2**8)*(2**8) = 256*256*256 = “True Color”
»32-bit 2**32: overkill for most applications
82
**--
?? Question ?? What is the maximum number of colours that your computer can display simultaneously with the appropriate settings of the software? (If you do not know, then check it with the software for the display settings.)
83
**--
Maximum number of colours displayed by computers: consequences • The computer system that is asked to display a graphics file with more colours than can be displayed simultaneously by the system will »dither the image to display it with less colours »shift colours to nearby colours that the system can display • The result will depend on »the type of computer, and on »the particular application software that is used to display the file.
84
**--
Developing documents for computers: guidelines related to colours Take into account / realize the limitations of computers and the variations in client computer hardware and software used to view your documents: »Do not expect that all users will view the documents that you create and publish in the same way. »See that your colours are not essential for your message.
85
***-
!! Task - Assignment - Exercise !! 1. Make a scan of a complicated document that includes your portrait, such as your passport or identity card or student card, at a resolution of 600 dpi or higher; save these data in a file format without compression and loss of quality; write down the file size.
86
***-
!! Task - Assignment - Exercise !!
2. Make a printout based on the scanned data, at double size in colours or black and white.
87
***-
!! Task - Assignment - Exercise !!
3. Save the file that you obtained by scanning; use the JPG file format at the highest quality offered by the computer program that you use; write down the name of the computer program that you use and the resulting file size.
88
***-
!! Task - Assignment - Exercise !!
4. Compare •
the size of the created files, one NOT compressed, the other with lossy compression
•
the quality of the images in both files
89
**--
?? Question ?? Estimate the typical size of a computer file that contains a raster image in colours, that has been obtained by using a typical scanner, and that can cover a complete typical display or projection screen directly at optimal resolution without enlargement, when no compression is applied.
90
**--
!! Task - Assignment !! Estimate the typical size of a computer file that contains a raster image in black or white only (no grey values), that has been obtained by using a typical scanner at 300 dpi, scanning a printed page of A4-size, when no data compression is applied.
91
**--
!! Task - Assignment !!
Estimate the typical size of a computer file that contains a raster image in grey values, which has been obtained by using a typical scanner at 300 dpi, scanning a printed page of A4-size, when no data compression is applied.
92
**--
!! Task - Assignment !! Estimate the typical size of a computer file that contains a raster image in colours (with 256 levels for each of the primary colours), that has been obtained by using a typical scanner at 300 dpi, scanning a printed page of A4-size, when no data compression is applied.
93
**--
!! Task - Assignment !! Estimate the typical size of a computer file that contains a raster image in colours (with 256 levels for each of the primary colours), that has been obtained by using a typical scanner at 600 dpi, scanning a printed page of A4-size, when no data compression is applied.
94
**--
?? Question ?? Compare digitizing a common paper document using a typical, contemporary, common 1. flatbed scanner 2. digital camera More concretely, compare the resulting a. number of picture elements b. color depth/resolution
95
**--
!! Read !! Read FAO and UNESCO Information Management Resource Kit (IMARK) Module on Digitization and Digital Libraries. Unit 2. Electronic documents and formats. Lesson 3. Formats of electronic pictures [online] Available free of charge from: http://www.imarkgroup.org/ 2005 [cited 2006], also published free of charge on CD-ROM by FAO, Roma, Italia.
96
**--
!! Read !!
Read Color management. http://en.wikipedia.org/wiki/Color_management
97
**--
?? Question ??
The common, popular file formats for images use 24 bits or less to store each element=pixel. Explain that this forms a limitation for several practical applications from the user’s point of view.
98
**--
?? Question ??
Give 3 methods to convert an image from colour to gray?
99
**--
!! Task - Assignment !! Make a digital photo to illustrate your work (for instance scientific research subject or set-up). Improve it on computer if needed. Print it, so that it covers about half of a vertical page A4.
100
**--
“Resizing” of images: clearing up confusion The word “resizing” can create confusion, as it can be used and can be interpreted with various meanings: »Changing the number of pixels in the image file, which also affects the size of the image file. »Printing at a size that is different from the size in the object in reality OR from what is seen on a display.
»Applying a compression algorithm to the image file to obtain a smaller file size.
101
****
• You are free to copy, distribute, display this work under the following conditions: »Attribution: You must mention the author. »Noncommercial: You may not use this work for commercial purposes. »No Derivative Works: You may not change, modify, alter, transform, or build upon this work. • For any reuse or distribution, you must make clear to others the license terms of this work.
