Graphics creation

Welcome to Graphics Creation!

In this chapter, we are going to explore how digital images are made, edited, and saved. Whether it’s a tiny icon on your phone or a massive billboard in the city, every digital graphic follows specific rules. By the end of these notes, you’ll understand the difference between pixels and paths, and you’ll know exactly which file format to use for any project. Don’t worry if this seems a bit technical at first—we’ll break it down using simple examples you see every day!

1. Bitmap vs. Vector Graphics

The most important thing to learn in IT graphics is that there are two main "families" of images: Bitmaps and Vectors. They work in completely different ways.

A. Bitmap Graphics (also called Raster)

A Bitmap is an image made up of thousands of tiny colored squares called pixels. Think of it like a mosaic or a cross-stitch kit. When you look closely, you see individual dots; when you stand back, they blend into a picture.

Example: Any photo you take with your smartphone is a bitmap.

Key Features of Bitmaps:

• Resolution Dependent: This means if you try to make the image much larger, it becomes "pixelated" (blurry and blocky).
• Large File Sizes: Because the computer has to remember the color of every single pixel, these files can be quite heavy.
• Great for Detail: They are perfect for photographs with complex colors and shadows.

B. Vector Graphics

A Vector doesn't use pixels. Instead, it uses mathematical formulas to draw shapes using points, lines, and curves (called paths). Think of it like a set of instructions: "Draw a red circle with a radius of 5cm."

Example: Company logos and fonts are usually vectors.

Key Features of Vectors:

• Scalability: You can enlarge a vector to the size of a skyscraper and it will stay perfectly sharp. No pixels!
• Small File Sizes: The computer only needs to save the "math" behind the shapes, not millions of dots.
• Object-Based: You can click on one part of the drawing (like a nose on a face) and move it without affecting the rest.

Quick Review: The Scalability Test
If you zoom in 500% and see little squares, it’s a Bitmap. If it stays perfectly smooth, it’s a Vector.

2. Understanding File Formats

Choosing the right file format is like choosing the right shoes—you wouldn't wear flip-flops to go mountain climbing! Here are the ones you need to know for the 9626 syllabus:

Common Bitmap Formats

• JPEG (.jpg): Best for photos. It uses lossy compression, which means it shrinks the file size by throwing away some invisible data. Key takeaway: Small size, but loses a tiny bit of quality every time you save it.
• PNG (.png): Great for web graphics. It supports transparency (perfect for images with no background) and uses lossless compression (no quality loss).
• GIF (.gif): Used for simple animations. It only supports 256 colors, so it’s bad for photos but great for simple web memes.
• TIFF (.tif): Very high quality, used in professional printing. These files are massive.
• BMP (.bmp): An old-school format with no compression. Very large files, rarely used on the web.

Common Vector Formats

• SVG (.svg): The standard for the web. It’s "Scalable Vector Graphics."
• AI / EPS: Professional formats used by designers to send logos to printers.

Memory Aid:
J-PEG is for Just Photos.
P-NG is for Perfect backgrounds (Transparency).
S-VG is for Scaling (Vectors).

3. Essential Image Editing Techniques

When you use software like Photoshop or GIMP, you are manipulating bitmaps. Here are the tools and concepts you need to master:

Layers and Transparency

Layers are like sheets of clear plastic stacked on top of each other. You can draw on one sheet without ruining what's on the sheet below. Transparency (or "Alpha Channel") allows you to see through parts of a layer to the one underneath.

Changing the Image Appearance

• Cropping: Cutting off the edges of an image to improve composition or focus on a specific part.
• Resizing vs. Resampling: Resizing changes the print size, while resampling actually changes the number of pixels in the image.
• Rotating and Flipping: Rotating turns the image (e.g., 90 degrees); flipping creates a mirror image (horizontal or vertical).

Color Adjustments

• Brightness & Contrast: Brightness makes the whole image lighter/darker. Contrast makes the darks darker and the lights lighter.
• Saturation: Makes colors more vivid or intense. Low saturation makes an image look "washed out" or even black and white.
• Color Balance: Adjusting the amount of Red, Green, and Blue to remove "color casts" (like a photo looking too yellow because of indoor lights).

Advanced Tools

• Cloning: The "Clone Stamp" tool lets you copy pixels from one part of a photo and "paint" them over another. Example: Removing a pimple or a power line from a landscape.
• Masking: A way to hide parts of a layer without deleting them. It’s "non-destructive," meaning you can always bring the hidden parts back later.
• Filters: Automatic effects like Blur (to hide detail) or Sharpen (to make edges look crisper).

Common Mistake to Avoid:
Never stretch an image by its sides! This ruins the Aspect Ratio (the relationship between width and height), making people look too fat or too thin. Always hold "Shift" or drag from the corner to keep it proportional.

4. Vector Drawing Features

When creating vectors, you don't paint; you build. Here are the terms you'll see in the exam:

• Paths: The lines that make up a vector shape.
• Nodes (Anchor Points): The "dots" at the start, end, or curve of a path. You move these to change the shape.
• Fill: The color or pattern inside a closed shape.
• Stroke: The outline of the shape. You can change its thickness (weight) and color.
• Grouping: Locking several objects together so they move as one unit.

5. Final Summary Checklist

Did you learn...
1. That Bitmaps are pixels and Vectors are math?
2. That JPEGs are small but lose quality, while PNGs handle transparency?
3. Why Layers are essential for editing without ruining the original image?
4. How Cloning and Masking help fix photos?
5. That SVG is the go-to format for sharp, scalable web graphics?

Quick Review Box:
If a question asks which format is best for a logo that needs to be on a business card AND a giant truck, the answer is always Vector (SVG/AI) because of Scalability!