GRAPHIC DESIGN
PHASE 1: GETTING STARTED (Basics)
Photoshop Illustrator
Understand interface & tools Learn interface & artboards
Work with layers Work with shapes and paths
Basic photo edits & text Create simple icons & typography
Tools to Know:
● Photoshop: Move (V), Brush (B), Crop (C), Text (T), Eraser (E)
● Illustrator: Selection (V), Pen (P), Shape (M), Text (T), Direct Selection (A)
Mini Projects:
● Photoshop: Edit and retouch a photo, add a quote
● Illustrator: Create a simple logo or name badge
PHASE 2: BUILDING SKILLS (Intermediate)
Photoshop Illustrator
Use layer masks, retouch tools Master Pen Tool, Pathfinder panel
Color correction, filters Gradients, brushes, alignment
Combine images (composites) Design posters, icons, and illustrations
Project Ideas:
● Photoshop: Social media post, poster, or flyer
● Illustrator: Logo design, custom illustration, character art
PHASE 3: ADVANCED DESIGN
Photoshop Illustrator
Compositing, smart objects, mockups Isometric design, mesh tool, design systems
High-end retouching, filters Branding kits, infographics
Export for web/print Export SVGs, print-ready PDFs
Best Practices:
● Use non-destructive editing (Smart Objects, Masks)
● Master keyboard shortcuts for speed
● Use templates and design grids
TOP RESOURCES
● Tutorials: Adobe.com, YouTube, Udemy
● Inspiration: Freepik, Unsplash, Dribbble, Behance, Pinterest, Instagram
WEB DEVELOPMENT GUIDE
Quick Start Guide: WordPress + Elementor
Purpose:
● WordPress: Website management system (CMS)
● Elementor: Drag-and-drop page builder plugin for WordPress
PHASE 1: GETTING STARTED (Basics)
Setup Checklist:
● Install WordPress on a local server (e.g., XAMPP or Local Fly wheel) or hosting
● Choose a lightweight theme (e.g., Hello Elementor)
● Install and activate the Elementor Plugin
Key Skills:
● Understanding Pages vs. Posts
● Using Templates and Global Settings
● Creating sections, columns, and widgets
Mini Projects:
● Create a Homepage with text, image, and a button
● Design a Contact Page with a form and a map
● Build a Services Page using icons and columns
PHASE 2: BUILDING SKILLS (Intermediate)
Learn:
● Responsive design: Adjust for mobile/tablet
● Using Elementor widgets: Image Carousel, Accordion, Tabs, Counters
● Global fonts & colors
● Creating reusable Blocks and Templates
Projects:
● Build a Landing Page
● Design a 1-page Portfolio Website
● Add a Blog Section using the Posts widget
PHASE 3: ADVANCED DESIGN
Master:
● Theme Builder: Customize headers, footers, post templates
● Popup Builder: Create email capture popups
● Integrate tools: Mailchimp, WooCommerce
● Use Motion Effects & Animations
Final Projects:
● Design a Full Website (home, about, services, blog, contact)
● Create a Shop Page using WooCommerce + Elementor
RESOURCES
● Tutorials: elementor.com/academy, YouTube (WPCrafter, Ferdy Korpershoek)
● Inspiration: Behance, Elementor Showcase
