At the end of this lab, you should be able to

convert a true color image to a grayscale or an indexed image

convert an image to GIF, JPEG, or PNG format.

Readings:

Chapter $4$ Visual Elements and Graphics

GIMP$-$Download and install GIMP

GIMP User Manual

How to Save for the Web in GIMP$-$A YouTube tutorial

Lab work:

Follow each step be low. If you need help, ask the lab assistant or instructor.

Folder Organization:

a$.$ Create a folder $"$CPSC$1030\backslash$Labs $\backslash$Lab$5"$ to store your files for this lab.

b$.$ Create a $.$txt file named image$\_$description.txt in the folder.

c$.$ You need $2$ images for this lab. One is with $.$svg format, open google font and pick an icon to download.

d$.$ For another, just download it from Unsplash, make sure you download it with width $1920.$

e$.$ Make a copy of your images in the folder, rename them to be icon.svg and lab$6\_$img.jpg$.$ We are going to work on them next lab.

Edit.jpg image with GIMP:

We are going to create different versions of our images.

a$.$ Open lab$6\_$img using GIMP.

Use "Image $|$ Image Properties" to read the properties of your image. Write down the Size in pixels, Resolution, Color space, File size, and File type for your image. You are going to write these properties in your web page.

On the right pane, click the "Channels" tab. If the image is in RGB mode, you will see the three channels. Click on each eye in the "Channels" dialog box $($so that they go away$).$ After they are all gone, your image should be black. Now add in one color at a time and see what happens to the image. The Composite RGB image is displayed when all three colors are displayed $($all three eyes are on$).$

Use "Image $|$ Scale Image" and change "width" and "height" to scale the image. Scale the image to $400$ pixels wide to create a thumbnail of your image. Note that width and height are linked to each other by default. Select "File $|$ Export As $...".$ Name it lab$6\_$img$\_$thumb.jpg$.$

b$.$ Open the original image $($lab$6\_$img$)$ using GIMP.

From the GIMP menu, use "Image $|$ Mode $|$ Grayscale" menu item to convert your image to a grayscale image. Notice what happens in the "Channels" dialog box.

Now use "Image $|$ Mode $|$ RGB$"$ to go back to true color. Notice that your image remains monochrome in appearance, but a new image will be created from a red, green, and blue composite. Change the mode back to grayscale.

Select "File $|$ Export As$...".$ Name your file as lab$6\_$img$\_$grayscale.jpg$.$

One more time use "Image $|$ Image Properties" to write down the Color space and File size for your image.

c$.$ An indexed image uses fewer colors which reduces the file size. Open the original image $($lab$6\_$img$)$ using GIMP.

Use "Image $|$ Mode $|$ Indexed" to convert the image to one that uses a palette or index. A dialog box opens: Convert Image to Indexed Colors with $32$ colors.

Notice what happens to the look of the image and the "channels" dialog box.

Use "Windows $|$ Dockable Dialogs $|$ Colormap" to open the Colormap tab on the right pane. Notice the $32$ colors in the palette.

Select "File $|$ Export As $...".$ Name your file as lab$6\_$img$\_$indexed$\_32.$png$.$

Now reverse the previous action by pressing ctrl$+$z and then convert it to $4$ colors. Save and name it lab$6\_$img$\_$indexed$\_4.$png$.$

One more time use "Image $|$ Image Properties" to write down the Color space and File size for these two images $($you might need to put these two png back to GIMP to view the info$).$

d$.$ An SVG image could be enlarged without losing quality. In GIMP, we could only do that when import the image.

Open the icon.svg image using GIMP. In the render graphic window, keep the width and height as $48.$

Scale it to $1480$ pixels wide. And save it as icon$\_$blur.jpg$.$

Now open icon.svg again, but this time make the width and height as $1480.$ Save it as icon$\_$sharp.jpg$.$

e$.$ You can adjust the quality level of a JPEG image for a good balance of quality and file size.

Open the original image $($lab$6\_$img$)$ using GIMP.

Select "rile $|$ Export As $...".[$xpand "Select rile Type" in the lower pane and select JPCG image. Name your file as lab$6\_$img$\_70.$jpg$.$ When you click Export, another dialog opens where you can change the Quality of your picture. Select a lower quality of $70.$

Now open lab$6\_$img again, Save it with quality of $20$ and named lab$6\_$img$\_20.$jpg

Write down the File size for these two images.

Open these pictures and the original one and compare their quality.

Finishing up

a$.$ Once you finished, raise your hand and let instructor or TA to come and check your work.

b$.$ Zp your lab$5$ folder containing images and text file. Submit it to Brightspace.