Basic Graphic Design Study Guide (TVET GENGD301)

Module Overview: GENGD301 Basic Graphic Design

• Module Identification: GENGD301
• Level: RQF Level 3
• Program: TVET Certificate III in Software Development
• Development Body: Rwanda TVET Board (RTB) in support with the Korea International Cooperation Agency (KOICA) through the TVET Quality Management Project (TQUM Project).
• Date of Publication: October 2024
• Learning Outcomes:     * Learning Outcome 1: Edit Photos with Adobe Photoshop (25 hours)     * Learning Outcome 2: Manipulate Graphics with Adobe Illustrator (40 hours)     * Learning Outcome 3: Export File (15 hours)

Learning Outcome 1: Edit Photos with Adobe Photoshop

Introduction to Adobe Photoshop

• Definition: Adobe Photoshop is a versatile software primarily used for image editing, graphic design, and digital art creation. It is considered the industry standard for professionals in photography, web design, and advertising.
• Functions: Adjusting colors, removing blemishes, adding text, and combining multiple images into a single composition.
• Image Document Categories:     * Photoshop Document (PSD): The native file format that supports all features including layers, masks, and adjustments. Used for ongoing projects to preserve editing capabilities.     * JPEG (Joint Photographic Experts Group): A widely used compressed image format that uses lossy compression (discards data, resulting in loss of quality). Best for final output and web use where file size is critical.     * PNG (Portable Network Graphics): A lossless format supporting transparency and high quality. Used for logos, icons, and web graphics.     * TIFF (Tagged Image File Format): High-quality format supporting layers and lossless compression. Preferred for print and archival purposes.     * GIF (Graphics Interchange Format): Limited to $256$ colors; supports simple animations and transparency. Used for small web icons.     * PDF (Portable Document Format): A versatile format preserving visual elements, including vector graphics and text. Used for sharing final designs across devices.     * RAW: Contains unprocessed data from a camera sensor, allowing for extensive post-processing without quality loss.     * BMP (Bitmap Image File): An uncompressed, high-quality format that supports various color depths; results in large file sizes.

Photoshop Workspace and Interface Elements

• Workspace Components:     1. Document Window: The central area where the image or project is displayed.     2. Menu Bar: Located at the top; contains functions like File, Edit, Image, Layer, Select, Filter, Analysis, 3D, View, Window, and Help.     3. Application Bar: Provides access to Adobe Bridge, navigation functions, and window viewing controls.     4. Options Bar: Context-sensitive; settings change based on the active tool. Can be restored by pressing the Enter or Return key if it disappears.     5. Toolbar (Toolbox): Located on the left; contains tools for selection, retouching, painting, and vector drawing.     6. Panels: Windows of options on the right side (e.g., Layers, History, Adjustments). Can be grouped, docked, or made to 'float.'
• Main Tool Categories:     1. Selection, Crop & Slice Tools: Marquee, Move, Lasso, Magic Wand, Crop.     2. Retouch & Paint Tools: Healing Brush, Clone Stamp, Eraser, Sharpen, Blur, Smudge, Dodge, Burn, Sponge, Brush, Pencil, Fill (Gradient/Paint Bucket).     3. Drawing & Type Tools (Vector Tools): Type tool, Pen tool, Custom Shapes.     4. Annotations & Measurement Tools: Eyeshopper, Notes, Rulers.
• Specific Menu Functions:     * File: Create new, Open, Save, Export, Print.     * Edit: Undoing/Redoing, Cut, Copy, Paste, Transform, Preferences.     * Image: Color mode ($RGB$ vs $CMYK$), Image size, Canvas size.     * Layer: Modify and manipulate layers.     * Filter: Special effects (Blur, Sharpen, Distort).     * Select: Isolate specific image areas.     * View: Zooming, showing/hiding Rulers and Guides.

Tools for Removing Unwanted Elements

• Crop Tool: Selectively removes areas of an image. Includes advanced features like Content-Aware Fill (fills cropped areas by analyzing surrounding pixels) and Fade (feathered edges).
• Selection Tools:     * Marquee: Rectangular, Elliptical, Single Row, Single Column.     * Lasso: Freehand selections. Polygonal Lasso (straight segments) and Magnetic Lasso (snaps to edges).     * Quick Selection: Automatically detects pixels based on tone and color.     * Magic Wand: Selects contiguous areas based on color similarity.
• Eraser Tool: Removes pixels. Mode options include erasing to background color or transparency.
• Selection Techniques: Add to selection (hold Shift), Subtract from selection (hold Alt/Option), Intersect selection (hold Shift+Alt/Option), and Feather (soft transitions).

Layer Management

• Layer Types:     * Content Layers: Background layer (locked by default), Image layers, Shape layers, Text layers.     * Adjustment Layers: Non-destructive layers for Brightness/Contrast, Levels, Curves, Hue/Saturation, and Selective Color.
• Key Operations:     * Unlocking Background: Double-click the background layer or drag the padlock to the trash.     * Layer Groups: Used for organization; allows applying effects/transformations to multiple layers at once.     * Opacity: A layer with $0\%$ is transparent; $100\%$ is opaque.     * Layer Masks: Grayscale images controlling opacity. Black hides, White reveals, Gray creates partial transparency.     * Vector Masks: Based on mathematical formulas (can be resized without quality loss).     * Clipping Masks: Uses the content of a "base" layer to determine the visibility of a "clipped" layer above it.     * Merging: Combining layers to reduce file size (Ctrl+E).     * Rasterizing: Converting vector layers to pixel-based grids (Permanent change).     * Flattening: Combining all visible layers into a single layer (Permanent change).
• Blending Modes: Normal, Multiply (darkens), Screen (lightens), Overlay, Dissolve, Color Dodge, etc.

Photo Retouching and Color Correction

• Retouching Tools:     * Clone Stamp Tool: Copies pixels from a source (Alt+Click) to a destination.     * Content-Aware Fill: Automatically fills selections by analyzing surrounding content.     * Spot Healing Brush: Quickly removes small blemishes like dust spots and scratches.     * Healing Brush: Repairs larger areas by matching texture, lighting, and shading.     * Patch Tool: Replaces a selected area with pixels from a source area while blending seamlessly.     * Dodge and Burn: Dodge lightens; Burn darkens.
• Adjustment Tools:     * Brightness and Contrast: Overall lightness and differences between light/dark areas.     * Levels: Adjusts tonal range (shadows, mid-tones, highlights) using a histogram.     * Curves: Precise tonal adjustments using a graph with input/output values.     * Vibrance: Increases saturation of muted colors without oversaturating already vibrant ones.     * Hue/Saturation: Adjusts actual color (Hue) and intensity (Saturation).     * Exposure: Corrects underexposed (too dark) or overexposed (too bright) images.

Typography and Transformations

• Typography Elements:     * Typefaces: Serif (decorative ends like Times New Roman), Sans-serif (no ends like Arial), Script (handwriting style), Monospaced (uniform width), and Display (large headlines).     * Key Terms: Font size ($pt$), Leading (space between lines), Kerning (space between individual letter pairs), Tracking (uniform spacing across text block).     * Line Height: Recommended at $120-145\%$ of font size for body text.
• Photo Transformations:     * Scaling: Resizing (Ctrl+T).     * Rotating: Changing orientation.     * Flipping: Mirroring horizontally or vertically.     * Warping/Distorting: Non-uniform shape manipulation.     * Skewing: Slanting the image.     * Perspective: Correcting distortions caused by camera angles.

Learning Outcome 2: Manipulate Graphics with Adobe Illustrator

Illustrator Workspace and Artboards

• Definition: A workspace is the Graphical User Interface (GUI) used to create vector graphics.
• Menus: File (New: Ctrl+N), Edit (Undo: Ctrl+Z), Object (Arrange/Group), Type, Select, Effect, View, and Window.
• Artboards: Individual workspaces (like pages) within a single document. Each can have specific and unique sizes and orientations.
• Layers: Stacked transparent sheets used for organization. Includes Sublayers (nested within larger layers).
• Key Panels: Tools, Color, Character, Paragraph, Properties, Layers, Symbols, and Gradient.

Vector Path Creation

• Vector Basics: Defined by mathematical formulas; infinitely scalable and resolution-independent.
• Path Types:     * Open Path: Defined by a beginning and an end (e.g., a simple line).     * Closed Path: Connects back to itself (e.g., a square).     * Compound Path: Two or more paths treated as a single object (e.g., a donut shape).
• The Pen Tool: The primary tool for creating precise paths using anchor points and direction lines.
• Direct Selection Tool (A): Used to select and edit individual anchor points and segments.
• Pathfinder Operations: Unite (combine), Minus Front (subtract), Intersect (overlap only), Exclude (non-overlap), and Divide.

Design Shapes and Brand Identity

• Basic Shapes: Line Tool, Spiral Tool, Rectangle Tool, Ellipse Tool, Polygon Tool, and Star Tool. Hold Shift to constrain proportions (e.g., to make a perfect square or circle).
• Drawing Modes: Normal (on top), Draw Behind, and Draw Inside (creation of masks).
• Pencil Tool (N): Used for freehand drawing; Illustrator automatically smoothes the path.
• Brand Identity Definitions:     * Brand: Combination of visual (Logo, Palette) and non-visual (Messaging, Personality) elements.     * Brand Identity: The unique personality encompassing values, mission, and vision.     * Logo: A visual symbol representing a company; must be simple, memorable, and scalable.     * Brand Identity Guidelines: Standards defining colors, fonts, and logo placement to maintain consistency across all media.

Infographics and Promotional Design

• Infographics: Visual representations of complex data using charts and diagrams. Designed to improve info retention.
• Web Banners: Ads embedded in websites. Can be Static, Animated ($GIF$), or Rich Media (interactive).
• Flyers: Handbills or leaflets for wide distribution; typically printed on one side of a single sheet.
• Design Principles:     * Balance: Symmetrical, Asymmetrical, or Radial distribution.     * Contrast: Difference between elements to create interest.     * Emphasis: Drawing attention to important elements.     * Hierarchy: Establishing visual order.     * Repetition/Unity: Creating harmony and rhythm throughout the design.

Learning Outcome 3: Export File

File Formats and Selection Factors

• Raster Image Formats (Grid of Pixels):     * JPEG: High compression; lossy.     * PNG: Lossless; supports transparency.     * GIF: $256$ colors plus simple animation.
• Vector Image Formats (Mathematical Formulas):     * SVG (Scalable Vector Graphics): Open standard; infinitely scalable.     * EPS (Encapsulated PostScript): Used for professional printing.     * AI: Proprietary Adobe Illustrator format.
• Raw Image Formats: Unprocessed data from sensors (e.g., CR$2$ for Canon, NEF for Nikon).
• Selection Factors: Purpose (editing vs. distribution), Compatibility, File size, and Data preservation.

Image Optimization and Quality

• Optimization: Modifying images to reduce size while maintaining visual integrity.
• Compression Types:     * Lossy Compression: Discards some data for smaller size (e.g., JPEG).     * Lossless Compression: No data discarded; original image can be reconstructed (e.g., PNG, TIFF).
• Techniques:     * Resizing to Scale: Adjusting height/width proportionally to avoid distortion.     * Metadata Removal: Deleting camera settings and location info to reduce file size.     * PPI Setting: Resolution is measured in Pixels Per Inch. Higher $PPI$ ($300$ for print) results in finer detail.

Artwork Exportation Methods

• Photoshop Export:     * Paths to Illustrator: Exports paths as AI files.     * Zoomify: Exports high-res images for interactive zooming on websites.     * Save for Web (Legacy): Allows previewing file sizes and choosing formats like JPEG, GIF, or PNG.
• Illustrator Export:     * Export for Screens: Exports multiple artboards at once for various devices.     * Export As: Saves in formats like AI, PSD, EPS, or SVG.     * Save for Web (Legacy): For web-optimized raster formats.