Graphic arts cheat sheet

Hierarchy

Visual hierarchy directs attention through size, contrast, position, spacing and grouping. Start with the information’s actual priority.

A page should not give every element equal visual weight.

Typography

Typeface, size, line length, spacing and contrast interact to affect reading. A decorative choice can reduce legibility at small sizes.

Test the actual output size rather than judging only a large preview.

Colour systems

RGB commonly describes emitted screen light; CMYK is commonly used for process printing. Reproduction depends on the output process.

A bright screen colour may not reproduce identically in print.

Vector and raster

Vector graphics describe shapes mathematically; raster graphics store pixels. Choose the format for the artwork and output.

A vector logo and a raster photograph have different scaling behaviour.

Grid and alignment

A grid organises relationships between elements; alignment makes those relationships visible. Break a grid deliberately when the change serves the hierarchy.

Align labels with the information they describe rather than centring every element independently.

Contrast and accessibility

Contrast concerns meaningful differences in tone, colour, scale or shape. Digital text should meet the applicable accessibility contrast requirements, and colour alone should not carry essential meaning.

Pair a colour-coded status with text or another clear cue.

Image resolution

Raster resolution depends on pixel dimensions and output size. Increasing a file’s stated resolution does not create missing image detail.

A 1200 px-wide image printed 4 inches wide has 300 pixels per inch.

Colour and production

RGB describes additive light-based colour; CMYK is used in many print workflows. Gamut, profiles, paper and printing processes affect the result.

A vivid screen colour may be outside the reproducible range of a particular print process.

Worked example: proportional resizing

A 1600 × 900 image has aspect ratio 16:9. Resizing it to 800 px wide while preserving the ratio gives height 450 px.

Changing width without matching height distorts the image; cropping changes the visible composition.

Common mistake: decoration equals communication

A design succeeds when its hierarchy and form support the intended message and audience. More effects can compete with that message rather than improve it.

Check legibility, ordering and meaning at the actual output size.

Check your understanding

What height preserves the ratio of a 1200 × 800 image resized to 600 px wide?

400 px: both dimensions are multiplied by 0.5.

Curriculum connections

Sources