This lesson is about creating and editing the different types of media—graphics, animations, audio, and video—that make the web and software interesting.

Short Notes

• Digital Graphics:

  • Pixel: The smallest single dot of color on a digital screen. All digital images are made of a grid of pixels.

  • Resolution: The number of pixels in an image, usually written as width × height (e.g., 1920x1080). Higher resolution means better quality and a larger file size.

  • Color Models: RGB (Red, Green, Blue) is used for screens. CMYK (Cyan, Magenta, Yellow, Black) is used for printing.

• Graphic Types:

  • Raster Graphics (Bitmap): Made of pixels. They lose quality when you resize them (become "pixelated"). Examples: Photos (.jpg, .png, .gif).

  • Vector Graphics: Made of mathematical paths and lines. They can be resized to any size without losing quality. Examples: Logos, illustrations (.svg).

• Compression: Making files smaller.

  • Lossy Compression: Permanently removes some data to make the file much smaller. The quality is slightly reduced (e.g., JPEG).

  • Lossless Compression: Makes the file smaller without losing any data. The original quality is perfectly preserved when the file is opened (e.g., PNG, GIF).

• 2D Animation: Creating the illusion of movement by showing a series of images (frames) quickly.

  • Keyframe: A frame that defines the start or end point of a smooth transition.

  • Tweening: The process where the computer automatically generates the frames in between the keyframes to create smooth motion.

• Audio/Video Editing: Using software to cut, trim, mix, and add effects to sound and video files.

Important Points for the Exam

• The difference between Raster and Vector graphics is a critical concept. Remember: Raster is for photos, Vector is for logos. Raster loses quality, Vector does not.

• The difference between Lossy and Lossless compression is also very important. Remember: Lossy is for photos where a tiny quality loss is okay, Lossless is for graphics where every detail must be perfect.

• Understand the basic concept of animation: a sequence of frames. Know what keyframes and tweening are.

Tips & Tricks for Studying

• Pixel Peeping: Find a photo on your computer and zoom in as far as you can. You will eventually see the individual square pixels. This will help you remember how raster graphics work.

• File Extension Clues: Look at the file extensions of images you find online. If it's a .jpg, it's a raster image using lossy compression. If it's a .png or .gif, it's a raster image using lossless compression.

Think Like an Animator: Imagine a ball bouncing. The keyframes would be the ball at the top of its bounce and the ball hitting the ground. The tweening frames are all the positions in between that the software creates for you.