🎨 Canva Graphics Workshop
0 / 0 steps
BEFORE YOU START

Build the graphics for your website — right here, step by step.

By the end of this workshop you'll have three finished graphics saved and ready to drop into your web design project next week: a logo, a hero banner, and a set of grid photos.

Set up your split screen first. Open canva.com in one window. Drag this tutorial to the other side of your screen (or drag a browser window to the left/right edge of your Chromebook display until it snaps). Keep both visible the whole time — read a step here, then do it in Canva.

Logo

Transparent PNG

Hero banner

Wide homepage image

Photo grid

3 matching images

STEP 1 — LOG IN

Open Canva and sign in

Go to canva.com and sign in with your school Google account. If this is your first time, click "Continue with Google" and pick your school email.

STEP 2 — TOUR THE SCREEN

Find your way around

Before you build anything, spot these four things on the Canva home screen:

  • Top-left "Create a design" button — this is where every project starts
  • Left-side panel (once inside a design) — Elements, Text, Uploads, Photos
  • Top-right "Share" → "Download" — this is how you'll export every graphic
  • Top toolbar — appears above whatever you have selected (font, color, position)
💡

Chromebook tip: Right-click is a two-finger tap on the trackpad. Use it in Canva to duplicate, delete, or send an element to back/front.

02

Hero banner image

The hero banner is the large image at the top of your homepage — it's the first thing a visitor sees, so it needs to be wide and short, not square.

STEP 1 — NEW CANVAS

Create a wide canvas

  1. Click Create a design → Custom size
  2. Enter 1600 × 900 px

This wide ratio matches how a browser window is shaped, so the image won't get stretched or cropped oddly on your site.

STEP 2 — BACKGROUND

Add a background photo

  1. Click Photos in the left panel
  2. Search a word that fits your site's topic
  3. Click a photo — it fills the canvas as the background
  4. Drag its corner handles to resize/crop so the important part is centered
STEP 3 — DARKEN FOR TEXT

Add a dark overlay

  1. Click Elements, search square, add a plain rectangle
  2. Drag its corners to cover the whole canvas
  3. Set its color to black, then lower Transparency in the toolbar to around 40%
  4. Right-click the rectangle → Layer → Send backward until it sits over the photo but under any text
💡

Why this matters: text placed directly on a busy photo is hard to read on a real website — a dark overlay fixes that.

STEP 4 — HEADLINE

Add your homepage headline

  1. Add a text box with your site's headline (short — under 8 words)
  2. Set the text color to white
  3. Center it using Position → Align → Center
STEP 5 — EXPORT

Download as JPG

  1. Click Share → Download
  2. Set file type to JPG (photos export smaller as JPG than PNG)
  3. Download and save as hero-banner.jpg
03

Photo grid images

You'll lay these out in a CSS grid, so they all need to be the exact same size and shape — otherwise the grid will look uneven.

STEP 1 — FIRST CANVAS

Create your first square canvas

  1. Click Create a design → Custom size
  2. Enter 800 × 800 px
STEP 2 — ADD A PHOTO

Fill it with one photo

  1. Click Photos, search a topic that fits your site
  2. Click a photo to add it, then drag its corners so it fills the whole square with no white space around it
STEP 3 — MATCH THE STYLE

Give it a consistent filter

  1. Click the photo, then Edit photo in the toolbar
  2. Pick one filter (or adjust brightness/saturation) — remember your exact settings
💡

Cohesion tip: use the same filter or adjustment on every grid photo so the set feels like one design, not three random pictures.

STEP 4 — DOWNLOAD IT

Export photo 1

  1. Share → Download, file type JPG
  2. Save as grid-photo-1.jpg
STEP 5 — REPEAT

Make two more the same way

  1. Go back to Canva's home screen and repeat steps 1–4 two more times
  2. Use the same 800 × 800 size and the same filter each time
  3. Save them as grid-photo-2.jpg and grid-photo-3.jpg
💡

Faster way: instead of starting over, open your first design, click the photo, right-click → Delete, then add a new photo in its place — the canvas size and filter setting often carry over.

READY FOR NEXT WEEK

Before you close this tab

Check that you have all five files saved in one folder, named exactly like this:

  • logo.png — transparent background
  • hero-banner.jpg
  • grid-photo-1.jpg, grid-photo-2.jpg, grid-photo-3.jpg

Bring this folder to next week's class — you'll upload these straight into your web design project.

0 / 0 steps complete