📘 CodingMarble Learn

Digital Imagery and Web Design: How Pictures, Models and Web Pages Are Made

A camera lens focuses light onto a sensor made of millions of pixels. Each pixel stores red, green and blue (RGB) values. More pixels mean higher resolution; more bits per pixel mean more colours; file size = width × height × bit depth Ãˇ 8 bytes before compression. 3D models start as wireframes, then get surfaces, textures and lights; animation shows many frames per second. Good designs use the elements and principles of design, and web pages use a clear layout. Real projects need safe equipment use, teamwork and editing everything into one unified product.

đŸŽŦ Step-by-step story

  1. Light from the object passes through the lens and lands upside down on the sensor. The sensor is a grid of tiny squares called pixels.
  2. The same picture at 4 × 4 pixels, then 16 × 16. Count the squares: more pixels give more detail. That is resolution.
  3. Every screen pixel mixes red, green and blue light. Watch the three circles slide together: where all three overlap you see white.
  4. A 3D model starts as a wireframe mesh, then gets a coloured surface. Animation shows frames one after another, like 24 frames each second.
  5. A web page layout: header, menu, image, text and footer. Each block slides into place, lined up with the others.
  6. Your turn: change the width, height and bits per pixel. Read the file size and watch the pixel grid change.

Tip: drag the 3D scene to turn it. Use two fingers to zoom.

🤔 Common doubts, cleared

If the image on the sensor is upside down, why do my photos look right?

The camera's processor simply reads the pixel grid in the opposite order. Step 1 shows the upside-down image on the sensor.

Why does a zoomed-in photo look blocky?

You are seeing the individual pixels. Step 2 shows how few pixels give big blocks.

Why do red and green make yellow on a screen, not brown like paint?

Screens add light (additive); paints absorb light (subtractive). In step 3 the overlapping red and green circles glow yellow.

Do animators draw every frame by hand?

Not always. They set keyframes and the computer fills the in-betweens. Step 4 shows four frames of a moving ball.

Why do websites put the menu at the top?

Visitors look there first, so they can find pages quickly. Step 5 shows the menu under the header.

Why do bigger images take longer to load?

File size grows with width × height × bits. Double both sides and the size becomes four times. Try it in step 6.

Cameras and imaging systems

A digital camera has: a lens that bends (refracts) light to focus it, an aperture (adjustable hole) that controls how much light enters, a shutter that controls how long light falls, and an image sensor (CCD or CMOS) of millions of light-sensitive pixels. A processor turns the signals into a file stored on a memory card.

The science: light travels in straight lines, a convex lens forms a real, inverted image, and the sensor turns light into electric charge (the photoelectric effect).

Pixels, resolution, colour and file size

Uncompressed size (bytes) = width × height × bit depth Ãˇ 8. Aspect ratio = width : height (16:9, 4:3). Print size (inches) = pixels Ãˇ PPI.

Image editing, animation and 3D modelling

Image editing

Layers, masks, cropping, levels and curves (brightness and contrast), colour balance, cloning and retouching. Non-destructive editing keeps the original safe. Edit honestly: do not mislead with a changed photo.

Animation

Animation is a series of still frames shown quickly. Film uses 24 fps, video 25–30 fps, games 60 fps. Keyframes set main poses and the software fills the in-betweens (tweening).

3D modelling

Models are made of vertices, edges and faces (polygons), forming a mesh (seen as a wireframe). Then come materials and textures, lights, a camera and rendering (the computer works out the final image). A rig (skeleton) lets characters move.

Design principles and web design

Elements of design: line, shape, colour, texture, space, form, value (light and dark) and typography.

Principles of design: balance, contrast, emphasis (focal point), alignment, repetition, proximity, hierarchy and white space. The rule of thirds places key subjects on a 3 × 3 grid.

Web page layout

Most pages have a header (logo, title), a navigation menu, the main content (images and text) and a footer (contact, links). Pages are built with HTML (structure) and CSS (style), and are responsive: the layout changes for phones. Good web images are resized and compressed so pages load fast, and have alt text for accessibility.

Creative process: brief → research → sketches → draft → feedback → final.

Safe equipment use, teamwork and production

Equipment safety

Carry cameras with the strap on and the lens cap fitted; use padded cases; secure tripods and light stands with sandbags; keep cables taped down; let hot lights cool; follow software licence rules when installing.

Teamwork

Share files in clear folders with good names, give each member a role (director, photographer, editor, designer), hold short meetings, use brainstorming where every idea is written down, give kind and specific feedback and keep a shared schedule.

Production

Plan (storyboard or wireframe) → capture (shoot, model) → edit → assemble images, text, sound and animation into one unified product with matching style → test → publish.

Try it

Take one photo with your phone, then check its pixel size in the photo details. Work out the uncompressed size with W × H × 24 Ãˇ 8 and compare it with the real JPEG size. Then test other sizes in step 6.

Key formulas and definitions

Worked examples

1. An image is 1920 × 1080 pixels. How many megapixels?

1920 × 1080 = 2 073 600 pixels ≈ 2.1 MP.

2. Find the uncompressed size of a 1920 × 1080, 24-bit image in MB.

1920 × 1080 × 24 Ãˇ 8 = 6 220 800 bytes ≈ 6.2 MB.

3. How many colours can an 8-bit image show?

2⁸ = 256 colours.

4. A 3000 × 2400 pixel photo is printed at 300 PPI. What is the print size?

3000 Ãˇ 300 = 10 inches by 2400 Ãˇ 300 = 8 inches, so 10 × 8 inches (about 25 × 20 cm).

5. A 12-second animation runs at 24 fps. How many frames are needed?

24 × 12 = 288 frames.

Common mistakes

Practice quiz

1. The part of a camera that turns light into electrical signals is the:
2. Red + green + blue light at full strength gives:
3. Which image type scales without losing quality?
4. 24 fps means:
5. Which part of a web page usually holds contact links at the bottom?

Practice: answer these yourself

Type or choose your answer, then press Check. Use a hint if you are stuck; the full solution appears after you answer.

Frequently asked questions

What is resolution in digital images?

Resolution is the number of pixels in an image (for example 1920 × 1080), or for printing, how many pixels fit into each inch (PPI).

What is the difference between raster and vector images?

Raster images are grids of pixels, best for photos, and blur when enlarged. Vector images are shapes defined by maths, best for logos and icons, and stay sharp at any size.

What are the main parts of a web page layout?

A header, navigation menu, main content area (text and images), and a footer. Many pages also have a sidebar, and all should adapt to phone screens.

Where this is taught

Canada (Ontario)Grade 12A. Communications Technology Fundamentals
Canada (Ontario)Grade 12B. Communications Technology Skills

Learn first

Learn next

Related lessons

All Computer Science lessons