⏰ Do Now — Start Here
What image file types have you heard of before? List as many as you can in 60 seconds.
🎯 Today's Big Question
- Why do designers choose different file types and resolutions for print vs. web vs. video, and how do they guide the eye through a page?
📈 By the End of Today, You Will Be Able To
- Distinguish between JPG, PNG, and TIFF file formats and identify a real-world use for each.
- Explain why print resolution (DPI) and screen resolution serve different purposes.
- Define visual hierarchy and identify the focal point in a printed design.
🧰 What You'll Need
- File-format sorting cards (JPG/PNG/TIFF use-case scenarios)
- Printed posters/pages for hierarchy annotation
- Highlighters or colored pencils
📋 Your Plan for Today
Day 1: File Types & Resolution
- Do Now + share-out (5 min).
- Mini-lesson (10 min): JPG vs. PNG vs. TIFF, and when a designer would pick each.
- Mini-lesson (10 min): why a poster needs more DPI than a phone screen -- the real numbers designers use are 72 PPI for web and 300 PPI for print.
- Sorting activity (15 min): match file-format cards to the correct use-case scenario.
- Quick share (5 min).
Day 2: Visual Hierarchy & Focal Point
- Do Now (5 min): which file format is best for print? For the web? Mini-lesson (12 min): visual hierarchy and focal point, with a printed poster example.
- Annotation activity (20 min): number the order your eye travels across a printed poster/page, from 1 (first) onward, and highlight the focal point.
- Exit ticket (8 min).
🖨️ Print Your Handout
Word, picture, and definition for today's vocabulary, plus a place to write and draw. Available in English, Spanish, French, Arabic, and Chinese.
📚 Key Words
- JPG
- A common, smaller image file that compresses (slightly loses quality) to save space -- most everyday photos.
- PNG
- An image file that supports transparent backgrounds and loses no quality; common for web graphics.
- TIFF
- A high-quality, uncompressed file format favored for print and professional photography.
- DPI (Dots Per Inch)
- A measure of print resolution -- higher DPI means a sharper printed image.
- PPI (Pixels Per Inch)
- The standard designers actually set: images for the web are saved at 72 PPI, images for print at 300 PPI.
- Visual Hierarchy
- The intentional arrangement of a design so the eye sees the most important information first.
- Focal Point
- The place in a design where the eye is drawn first.
✅ What Your Finished Work Should Include
Sorting cards + annotated poster collected and checked against an answer key.
Exit Ticket: Pick one file format from today and explain, in one sentence, why a designer would choose it over the other two.
📊 Before You Leave
Quick, anonymous class check-in -- takes less than a minute.
🎓 ACP Exam Prep
This lesson connects to the Photoshop Adobe Certified Professional exam: Domain 1: Working in the Design Industry
🔗 Want to Learn More?
🚀 The Extra Mile
Cross-Class Connection: The same "right tool for the right job" thinking a Tech/Engineering class teaches when picking materials for a build.
Career Connection: Getting file prep wrong is one of the most common reasons freelance Photography and Web Design deliverables get rejected by real clients.
Go further -- turn this into a portfolio piece:
- Take one image and correctly export it three ways — print-ready, web-optimized, and social-media-sized — labeling the settings used for each. Start here: open File > Export As in Photoshop and note the exact resolution and format for each version before you save, so your labels are real numbers, not guesses.
- Build a one-page "file prep checklist" a real client could follow before sending you images to design with. Start here: list the five questions a client should answer — file type, resolution, color mode, size, deadline — before you design the checklist layout.