Graphics Creation
Vector vs Bitmap properties and formats (SVG/AI/EPS vs BMP/JPEG/PNG/GIF/TIFF), Colour systems (RGB/CMYK/HSL/CMS), Compression (Lossy/Lossless), Resolution/Colour depth/File size.
Danh sách bài học
33 bài📖 Nội dung lý thuyết — T19: Graphics Creation
Xem bài học chi tiết trong tab Bài học phía trên. Mỗi bài giảng bao gồm:
- ✅ Định nghĩa thuật ngữ chuẩn Cambridge
- ✅ Bảng so sánh & ví dụ minh hoạ
- ✅ Exam tips — cách trả lời câu hỏi Paper 1/3
- ✅ Các lỗi thường gặp cần tránh
- ✅ Sơ đồ & diagram khi cần thiết
Kho đề thi Cambridge theo chương này. Chọn đề để luyện tập có đếm giờ.
Chưa có tài liệu. Giáo viên sẽ bổ sung.
Mnemonic học thuộc: Vector graphics definition
Cornell Notes: Bitmap/raster graphics definition
Kỹ thuật Feynman: SVG format
Kết nối với thực tế: JPEG compression
Teach Back (dạy lại): PNG format and transparency
Active Recall: CMYK colour model
Peer Teaching: HSL colour model
Ví dụ cụ thể: Colour depth and file size
Colour Depth — File Size and Appearance Effects (MJ2026 Q9)
🎨 Colour Depth — Key Formulas and Effects
File size formula:
File size (bits) = Width × Height × Colour depth (bits per pixel)
| Colour depth | Colours available | File size (500×500px) |
|---|---|---|
| 1-bit | 2 (black & white) | 31 KB |
| 4-bit | 16 | 125 KB |
| 8-bit | 256 | 250 KB |
| 16-bit | 65,536 | 500 KB |
| 24-bit (True colour) | 16.7 million | 750 KB (uncompressed) |
Effect on appearance (Cambridge mark points):
- Reduced colour depth → colour banding / posterisation — smooth gradients show distinct bands instead of smooth transitions
- Very low depth (1-bit) → only black & white; 4-bit → cartoon-like, fine tonal detail lost
- Higher depth (24-bit) → photorealistic; human eye cannot distinguish individual colour steps
Cambridge exam tip — always state the direction:
"Doubling the colour depth (e.g. 8-bit to 16-bit) doubles the file size, assuming the same image dimensions." Always include a specific number example.
Flashcard kỹ thuật số: AI and EPS formats
Mind map từ trí nhớ: BMP format
Vẽ sơ đồ từ trí nhớ: Image resolution PPI/DPI
Spaced Repetition: Resampling and resizing
Task 2 Bitmap — Adobe Photoshop Critical Settings
🎨 Photoshop — Key Settings Cambridge Tests
| What Cambridge Tests | Where to Set It | Common Error |
|---|---|---|
| Layer opacity (e.g. 40%) | Layers panel → Opacity slider | Leaving at 100% — lose mark |
| Blend mode (e.g. Screen) | Layers panel → Blend mode dropdown | Leaving as Normal |
| Content-Aware Fill | Edit → Fill → Content-Aware | Using Clone Stamp only — not quite right |
| Layer name | Double-click layer name to rename | Not renaming — mark often lost |
| Gradient direction | Gradient Tool → drag start to end | Reversed gradient (black at bottom) |
| Canvas Size vs Image Size | Image → Canvas Size (NOT Image Size) | Using Image Size resamples — wrong |
| RGB vs CMYK mode | Image → Mode | Staying in Greyscale after desaturation |
| Outer Glow (halo) | Layer → Layer Style → Outer Glow | Inner Glow instead — wrong effect |
⚠️ Layer order rule (W23 — 3-layer image):
Layers are stacked BOTTOM to TOP: SkyLayer → OceanLayer → CastleLayer. If order is wrong, composited image looks wrong and you lose 4 marks.
Task 2 Vector — Adobe Illustrator Critical Techniques
✏️ Illustrator — What Cambridge Tests in Vector Tasks
Core techniques (mark each):
| Technique | How to do it | Marks at risk |
|---|---|---|
| Add anchor points | Right-click Pen Tool → Add Anchor Point Tool (+) | 2 marks for adding exactly N nodes |
| Reshape path with Bezier handles | Direct Selection Tool (A) → drag nodes; drag handles for curves | 3 marks for recognisable shape |
| Draw perfect circle | Ellipse Tool (L) + hold SHIFT while dragging | 1 mark — MUST constrain with Shift |
| Radial gradient | Window → Gradient → Type: Radial → set centre & edge colour stops | 4 marks (type + 2 colours + applied) |
| CMYK fill | Window → Color → options → CMYK → enter C, M, Y, K values | 2 marks |
| Hex fill | Double-click Fill swatch → type hex code in # field | 1–2 marks |
| Pathfinder Minus Front (bite) | Select two shapes → Window → Pathfinder → Minus Front | Key technique for bite/cutout shapes |
| Group shapes | Select all → Ctrl+G → rename in Layers panel | 1 mark group + 1 mark correct name |
| Save as SVG | File → Save As → Format: SVG | 2 marks — format AND filename |
Bitmap vs Vector — Analysis Framework for 8-Mark Questions
📊 Vector vs Bitmap — Analyse for Website (MJ2026 Q12 — 8 marks)
| Property | Vector (SVG, AI) | Bitmap (JPEG, PNG, GIF) |
|---|---|---|
| Storage method | Mathematical paths and equations | Grid of pixels (colour values per pixel) |
| Scaling | Scales to ANY size losslessly — recalculates mathematically | Pixelates/blurs when enlarged beyond original resolution |
| File size | Small for simple shapes (logos, icons) | Large — proportional to width × height × colour depth |
| Best for | Logos, icons, diagrams, text | Photographs, complex real-world images, gradients |
| Editability | Individual elements/paths editable | Pixel-level editing only |
| Formats | SVG, AI, EPS | JPEG, PNG, GIF, BMP, TIFF |
| Transparency | Native (SVG supports alpha) | PNG = full; GIF = binary; JPEG = none |
For website analysis (logos/icons = VECTOR; photos = BITMAP):
Logos appear at many sizes (favicon to banner) → vector scales without quality loss → bitmap logos would pixelate when enlarged. Product photos contain millions of colours and gradients → only bitmap can store this level of detail → JPEG achieves good quality at manageable file sizes for web delivery.
Level 3 (7–8 marks): Must analyse BOTH types with specific links to the website context — NOT just describe in isolation.