Computer Graphics and Image Editing Software

ELCHK Lutheran Secondary School Form Two Computer Literacy Computer Graphics and Image Editing Software Name : Class : ( ) 0

Content Chapter 1 Bitmap image and vector graphic 2 Chapter 2 Photoshop basic skills 6 Chapter 3 Photoshop advanced photo editing skills 11 Project Information Literacy 18 File download website : http://www.lss.edu.hk/download/f2ict/ict.html Assignment Content Date Content Score / Grade 1

Chapter 1 Bitmap Image and Vector Graphic 1.1 Introduction Computer graphics can be divided into two categories : bitmap image and vector graphic. The following table shows how these two types of images used in our daily life. Type Daily example Ways to produce the graphic Bitmap image Digital photos Digital camera smart phone Vector graphic Digital image of a newspaper article Illustration in a computer game Image in a Flash game Simple art work in a poster or booklet Clipart in Ms Word and Ms PowerPoint documents Use a scanner to scan a newspaper capture from e-newspaper Photoshop Flash software Corel Draw! Adobe Illustrator Microsoft Word, Microsoft PowerPoint Characteristics of bitmap image Bitmap image is a picture of rectangular shape. It is made by a large number of colour dots (called pixel). These pixels are arranged in rows and columns to form the whole picture. There can be more than 16,000,000 different colours shown in a pixel. But each pixel can have only one colour. Characteristics of vector graphic Vector graphic is a combination of a number of polygons of different shapes. Each polygon is represented by a Mathematics formula. The colour of each shape is represented by "Outline property" and "Fill property". Vector graphic is used in creation of artwork of simple colour and shape. + 2

Activity 1 Identify bitmap image and vector graphic 1. Identify whether the following pictures are either "bitmap image" or "vector graphic". Write your answers in the spaces provided. vector graphic bitmap image vector graphic bitmap image bitmap image 2. Explain how you decide the pictures are bitmap image or vector graphic. A bitmap image contains complicated colour. vector graphic _ A vecotr graphic contains a mixture of simple colour shapes. _ Activity 2 Draw a bitmap image with Microsoft Paint 1. Run Microsoft Paint. 2. Draw a fruit with many colours. 3. Try to change the size and colour of the frunit. 4. Run Microsoft Word. 5. Use "Shape" tools to draw a similar fruit picture as Step (2). 6. Change the size and colour of the fruit drawn in Step (5). Questions bitmap image 1. What type of computer graphic is drawn with Microsoft Paint? vector graphic 2. What type of computer graphic is drawn with Microsoft Word? 3. Which type of computer graphic is easier to edit? Explain your answer briefly. Vector graphic because we can edit the picture by changing the colour shapes easily. 3

Homework Assignment 1. Which type of computer graphic, bitmap image or vector graphic, is best for producing the following items? Post card Name card Company Logo Digital photo Statistic chart bitmap image vector graphic vector graphic vector graphic bitmap image 2. Find one bitmap image and one vector graphic picture from newspaper or magazine. Paste them in the boxes below and write down the information of the pictures. Type : Source : Type : Source : Use of the picture : Use of the picture : 3. (a) Digital photo is stored as bitmap image but not vector graphic. Explain why. A bitmap image can contain millions of complicated colour pixels to represent a photo with details. (b) There is a software that can convert bitmap images into vector graphics. Jacky converts some bitmap images into vector graphics. He finds that the file size of vector graphics are much smaller than bitmap images. He suggests people should convert bitmap images to vector graphics to save memory space. Do you agree he suggestion? Explain your answer briefly. No, it is becaue the photo details will be lost after the conversion. _ 4

Self-directed Learning - Notes taking 1. Types and properties of computer graphics : Types of computer graphics include : Bitmap image Property Made by a large number of pixels arranged in rows and columns Daily life examples examples of software Other key points / learning experience 5

Chapter Two Photoshop basic skills Self-directed pre-learning question 1. Left photo(original) is edited to become the photo on the right. (edited) original photo edited photo (a) Guess what have been changed to the pixels in the original photos. (b) There are many smartphoto APPs for editing photos. Check out one of these APPs in your smartphone, write three functions of it. 2.1 Introduction to Photoshop Adobe Photoshop is a professional image editing software ( 圖像編輯軟件 ). Its main functions include: (1) edit bitmap image (2) combine several images into one image (3) retouch images with drawing tools The following is the interface of Photoshop. command list option list Tools bar ruler panel workspace 6

Classroom Activity 1 Knowing Tools bar of Photoshop 1. Write the names of following items in the tools bar of Photoshop. move tool lasso tool crop tool eyedropper tool clone stamp tool type tool rectangle tool zoom tool foreground colour background colour 2.2 Edit a bitmap image Bitmap image consists of millions of pixels. If we want change the appearance of a bitmap image, we actually need change the colour of a portion of the image, which may involve thousands of pixels. Adobe Photoshop provides image editing tools to retouch an image easily. The following is some common image editing functions: function description Example Change contrast Change colour tone Enrich the colour appearance of an image by Increasing the colour range. Correct the biased colour appearance of an image back to normal case, or to produce special colour effect of an image. Make an underexplosure image brighter. In a room lightened by fluorescent tube, the photo taken may appear greenish. We need correct the colour tone of the image. Rotate image Change the angle of an image. Correct tilted image. Crop image Remove unwanted portion of an image. Remove unused background so that the object appears larger. Resize image Change the image size by adding or reducing the number of pixels. Reduce image size before email it to a friend. When we use Photoshop or other image editing software to retouch photos, we should follow the steps below. change contrast change colour tone rotate image crop image resize image 7

Activity 2 Retouch an image 1. Download digital photos ps2_sample.jpg and ps2_done.jpg to desktop from URL: http://www.lss.edu.hk/download/f2ict/ict.html ps2_sample.jpg ps2_done.jpg 2. Run Photoshop and open above photos. Compare the two photos. Write the functions applied to 2_sample.jpg in order to produce ps2_done.jpg. 3. Following the steps to retouch ps2_sample.jpg. (a) Change the colour contrast - Select [image] [adjustments] [curve] - Drag the top-right node to adjust the brightest point. - Drag the button-left node to adjust the darkest point. - Drag the middle of the line up/down to change the overall brightness of the image. (b) Rotate image - Select [image] [image rotation] [arbitrary...] - Input a value of rotation and direction of rotation. You may press ctrl Z to resume if the rotation angle is incorrect. Classmates' comment (c) Crop image - Select [Crop tool] in the tools bar. - Crop the main object and press [Enter] to confirm. - Select [Move tools] when finished. It avoids that Teacher's comment you crop the image again accidentally. Save the image and present your retouched photo to the teacher and your classmates. Challenging question - Make the image more colourful Select [image] [adjustments] [hue/saturation] and change the colour saturation setting to make the image more colourful. (1) What setting has been changed? Setting : Value : (2) What happen if we change the value in (1) to 0? (3) Whan happen if we change the value in (1) to 100? 8 saturation (any +ve value) It becomes a black and white photo The colour is over-saturated.

Homework Assignment 1. Estimate what image editing functions applied to the left photo. (a) cropped Editing function applied : (b) image size changed rotated Editing function applied : cropped 2. Some image editing functions need recalculate the colour of all pixels in the image. It results in loss of image quality. The image quality drops greatly when we apply these editing functions too many times. Which of the following editing functions may cause damage to the image quality? Explain your answer briefly. function Rotate image Crop image Resize iamge Affect image quality? (yes / no) yes No yes Reason All pixels are recalculated Pixels after cropping are the same as before All pixels are recalculated Self-directed Learning Visit "Flipped Classroom" and watch video : Chapter 2 Photoshop : How to resize an image Direction : [Computer] [Form 2] [Chapter 2 Photoshop : How to resize an image] 1. Write the image resolutions for printing and screen display respectively. 2. When we reduce the length and width of an image by half, how much % will the file size be reduced image? Explain briefly. 25 Reduced file is % of original file size, because the number of pixels in the reduced 1/4 of the original image. file is 9 300 / 72

Self-directed Learning - Notes taking 1. Adobe Photoshop is a software. Common image editing functions : function Description Affect image quality? change contrast Change colour tone Rotate image Crop image Resize image 2. To retouch a bitmap image, the procedures are: Other key points / learning experience 10

Chapter 3 Photoshop advanced photo editing skills Self-directed pre-learning question Watch the "Flipped Classroom" video : Chapter 3 Photoshop : how to use layers, and answer the question below. Direction : [ Computer ] [ Form 2 ] [ Chapter 3 Photoshop: how to use layer ] 1. What is a layer? Layer acts like a transparent sheet which can hold an image. 2. State the advantage of using layer for image editing. We can edit images in different layers easily. 3. Write one file format for saving images with layers. PSD / TIFF 3.1 Edit image with layers When we want to combine several images together to form a new image, we may need several trials to produce the new image which looks exactly we expected. However, it is difficult to manage million of mixed pixels in the image. Photoshop provides "layer" feature to make the task easier. User can create a file with several layers. Each layer works like a transparency with one image printed on it. The user can change the appearance of the image in each layer freely and combine the layers together to form a desired new image. layer with transparent background + opaque area in upper layer covers the area in lower layer Remark: Make sure you have shown"layer panel" to view and manage layers: Select [ Windows] [ Layers ] layer panel 11

Activity 1 Add a title to an image In this activity, we are going to design a postcard which is made by three layers in Photoshop. 1. Download the images ps3_sample.jpg and ps3_done.jpg to the desktop from the URL: http://www.lss.edu.hk/download/f2ict/ict.html ps3_sample.jpg ps3_done.jpg 2. Run Photoshop and open the two downloaded files. (ps3_done.jpg is the outcome sample) 3. Create a new layer "Layer 1" by clicking the "create a new layer button" 4. Fill white colour on the top of "Layer 1" : 1. Select "Rectangular tool" 2. Select upper part 3. Select white as foreground colour 4. Select "Fill..." function 5. Choose "Foreground color" and press [OK] 5. Change the opacity value to make Layer 1 partially transparent. 12

6. Select "Horizontal Type Tool" and type " Lovely Hot Summer " in the white area. (A new text layer should be created.) 7. Open character panel : [ Windows ] [ Character ] 8. Select the text layer "Layer 2" and change the settings in the Character Panel to change colour and size of the character "Lovely Hot Summer". Challenging Question -- Add 3D effect to the title Right click on "Layer 2" (text layer), select "BlendingOptions.." and then "Drop shadow" effect (or other 3D effects). What effect have been used in your image? drop shadow (or other effects) Names two other effects in "Blending options". inner shadow Outer glow,. Save the completed image in PSD format. Print the image and paste it in the box below. 13

Activity 1 Retouch an image Photoshop has a powerful tool called "Clone stamp tool" which copies a portion of image from other part in the image and pastes it on the undesired image area. Clone stamp is a useful tool to retouch an image by eliminating unwanted objects in a digital photo. 1. Download digital photos ps3a_sample.jpg and ps3a_done.jpg to the desktop from URL: http://www.lss.edu.hk/ict/f3ps.html original retouched ps3a_sample.jpg ps3a_done.jpg In this activity, you are required to use the "Clone stamp tool" to remove the circled undesired objects in the image ps3a_sample.jpg, producing image ps3a_done.jpg. 2. Run Photoshop and open the two images. (ps3a_done.jpg is the retouched image for reference) 3. Select "Clone stamp tool" and check out the options for the tool in the option list. (Select [ Windows ] [ option ] if the option list is not shown on the top.) options for clone stamp Clone stamp 4. Check the values of "Brush preset picker" and "Opacity" options. Small value (eg. 5) for small clone area. Large value (eg. 50) for large clone area. Large value (eg. 100) for fully covered. Small value (eg. 20) for partially covered. 14

5. Press ctrl + to zoom into the image. Scroll the screen so that the target area can be clearly seen. (Remark: ctrl - zoom out from the image) 6. There are two steps to apply "clone stamp tool" : (1) Select the reference point : move mouse pointer to the reference point, press [ctrl] key and click mouse left button. (2) Clone image to target area: move mouse pointer to target area, click mouse left button and drag the mouse. Hints (2) press mouse left - You may press ctrl alt z to button and drag undo several steps of action. - Use large brush preset value (30-50) to clone large target area, small value (5-15) to (1) select reference point clone small target area. (ctrl + left click) - Use several reference points around the target area will achieve better result. - Use opacity value < 100% can produce fading effect. 7. Repeat using clone stamp to remove all unwanted objects marked in step 1. 8. Save the retouched image in PSD format. Print the image and paste it in the box below. 15

Homework Assignment 1. What is the advantage of using layers in Photoshop? We can edit images in different layers easily to form a complicated image 2. Suggest one disadvantage of using layers in Photoshop. The image file becomes larger in size. 3. Write two options which affect the appearance of layer. blending mode, opacity 4. Run Photoshop and open a digital photo taken by you. Use "Clone stamp tool" to retouch the photo. Paste the original photo and the retouched photo in the space provided. (Hint: Resize the photo not larger than 8cm x 8cm. Adjust the colour tone and contrast, or crop the image whenever necessary.) Paste original photo here Paste retouched photo here 16

Self-directed Learning - Notes taking 1. In Adobe Photoshop, the main use of layers is 2. The advantage of using layer is 3. The downside of using layer is 4. Clone stamp tool is used to Other key points / learning experience 17

Project Design information literacy poster Background Importance of information literacy Information literacy refers the skills of using computer, the Internet and electronic IT devices, attitude and discipline to information management. We are living in a information society. It is important for us to learn how to access and manage information correctly and efficiently. We should also learn how to protect ourselves from any kinds of attack from computer networks. It is essential for every of us to learn how to use and distribute digital information lawfully. Project question : Design a poster to promote information literacy You are asked to design a poster in Photoshop. The main objective of the poster is to bring people's concern on information literacy, encourage people to learn more about the information literacy and become good digital citizens. The following shows the detail requirements of the poster. 1. Objective Promote one or more issues of information literacy. 2. Poster image property size : not larger than A4 paper (29.7cm X 210cm) (The size of poster is recommended not larger than 28cm x 19cm, so that it falls within the printable area of a printer.) Resolution: 150dpi - 300dpi Requirement: The image must contain at least three layers, one of them is text layer.. File format : psd (with your class, class no and name marked in the filename) 3. Submission : Save your file in the dedicated network folder (instructed by your teacher) Print your image with a colour printer and paste it in the blank page followed. 18

Paste your poster in this page. 19