Vector Graphics
Why a logo stays sharp at any size while a photograph turns blocky, and the tools you need to design your own vector artwork.
Bitmap against vector
There are two completely different ways to store a picture.
Bitmap, also called raster
The image is a grid of pixels, each with its own colour. Photographs are bitmaps.
- Great for photographs, where colour changes constantly across the image
- File size depends on the number of pixels
- Becomes blocky when enlarged, because there is no extra detail to reveal
- File types: JPG, PNG, GIF, BMP
Vector
The image is stored as a list of instructions and mathematical shapes: draw a circle at this position with this radius, this fill colour and this outline.
- Stays perfectly sharp at any size, because the shapes are redrawn from the maths every time
- Usually much smaller files for simple graphics
- Every shape can be selected and edited individually afterwards
- Not suitable for photographs, which have far too much irregular detail
- File types: SVG, AI, EPS, and Inkscape's own format
| Bitmap | Vector | |
|---|---|---|
| Made of | Pixels | Shapes and instructions |
| Enlarging | Becomes blocky | Stays sharp |
| Best for | Photographs | Logos, icons, diagrams, signs |
| Editing | Change individual pixels | Move and edit whole shapes |
| Typical file size | Larger | Smaller for simple images |
A vector file does not store a picture. It stores the instructions for drawing one, so when the size changes the shapes are simply drawn again at the new size.
Step 1 of 4 A bitmap is a grid of coloured pixels. The file stores every single one.
Working with vector shapes
The tools
- Shape tools for rectangles, ellipses, stars and polygons
- The pen or Bezier tool for drawing custom paths with curves
- Node editing to move the individual points that make up a shape
- Fill is the colour inside a shape, stroke is the outline
Layers and order
Shapes stack. The one drawn most recently sits on top.
- Raise and lower change the stacking order
- Group joins several shapes so they move and scale together
- Ungroup separates them again
Operations that combine shapes
| Operation | What it does |
|---|---|
| Union | Merges shapes into one |
| Difference | Cuts the top shape out of the one beneath |
| Intersection | Keeps only the overlapping part |
| Exclusion | Keeps everything except the overlap |
These are how most professional logos are actually made. A crescent moon is simply one circle with another circle subtracted from it.
Alignment
Use align and distribute tools rather than dragging by eye. Centring things properly is one of the fastest ways to make a design look professional.
- The background sits at the bottom of the stack.
- The photograph goes on a layer of its own, above it.
- The logo goes above that, so it is never painted into the photo.
- The text sits on top, and can be restyled without touching anything else.
- Flatten it and they merge into one image, and that is no longer editable.
- A path is made of nodes. Select a node and its handles appear, and dragging a handle bends the curve. Fill is the colour inside and stroke is the outline.
- Union merges shapes, difference cuts one out of the other, and intersection keeps only the overlap.
- Shapes stack. The last one drawn is on top, and raise, lower and group change that.
Designing a good logo
What makes a logo work
- Simple. It must be recognisable at 16 pixels on a browser tab as well as on a poster.
- Works in one colour. If it only reads in full colour it will fail on a fax, a stamp or an engraving.
- Distinctive. It should not look like ten other logos in the same industry.
- Appropriate. The style must suit the audience and the purpose.
- Scalable, which is exactly why it must be a vector.
The design process
- Client brief. What does the client want, who is it for, what must it convey?
- Research. Look at what similar organisations do, and what the audience expects.
- Mood board. Collect colours, fonts, shapes and images that capture the feel.
- Sketches. Draw many rough ideas quickly on paper. Quantity first, quality later.
- Digital version. Build the strongest idea as a vector.
- Review. Test it small, test it in one colour, and get feedback.
The single biggest mistake in logo design is opening the software first. Ten minutes of rough sketching produces better ideas than an hour of dragging shapes around.
- A logo should be a simple shape.
- Test it small: it must still be recognised at 16 pixels.
- It must be a vector so it can scale, and work in one colour.
- Test it in one colour, reversed out, and on a colour, because it will be used in all of them.
Key terms you must be able to define
- Bitmap
- An image stored as a grid of pixels, each with its own colour.
- Vector
- An image stored as mathematical shapes and instructions rather than pixels.
- Pixel
- The smallest single dot of colour in a bitmap image.
- Scalable
- Able to be resized without any loss of quality.
- Fill
- The colour inside a shape.
- Stroke
- The outline of a shape.
- Node
- A point on a path that can be moved to change the shape.
- Group
- Joining several shapes so they can be moved and resized together.
- Mood board
- A collection of images, colours and fonts gathered to capture the intended feel of a design.
Flashcards
Say the definition out loud before you flip the card. Retrieving it from memory is what builds recall, reading it again is not.
Reach the top grade on this topic
The top level here is about justifying design decisions.
Explain why vector, not just that it is vector. "A logo must be a vector because it will be used at many different sizes, from a website favicon to a shop sign, and a vector is redrawn from its shape instructions at every size so it never loses sharpness."
Talk about the audience. A logo for a children's nursery and a logo for a law firm should not look the same, and being able to say why shows real design thinking.
Describe your process. Client brief, research, mood board, sketches, digital version, review. Being able to explain what each stage is for is worth more than the finished artwork alone.
- Explain the difference between bitmap and vector, with a use for each
- Justify choosing vector format for a specific purpose
- Describe how to make a crescent shape using difference
- Explain what a mood board is for and why sketching comes before software
Mistakes that cost marks here
- Saying vectors 'have better quality'. They stay sharp at any size, which is not the same thing. For a photograph a bitmap is far better.
- Saying a vector file is always smaller. For a very complex illustration it can be larger than a bitmap.
- Starting a logo design in the software instead of sketching first.
- Designing a logo that only works in colour and at large size.
Every road sign, company logo and app icon you see is a vector graphic. They have to be, because the same design must work on a business card and on the side of a building without being redrawn.
Knowledge check
Exam-style questions
Five written questions in the style of the real paper. Write a full answer, then let the marker check it against the mark scheme.
- LA bitmap is made of pixels, a vector is made of shapes and instructions
- LA vector stays sharp when resized, a bitmap becomes blocky
A bitmap image is made up of a grid of individual pixels, each storing its own colour, whereas a vector image is stored as a set of mathematical shapes and instructions for drawing them. As a result, a vector image stays perfectly sharp when it is enlarged because the shapes are simply redrawn at the new size, while a bitmap becomes blocky and pixelated because the existing pixels just get bigger.
- LThe logo will be used at many different sizes
- LA vector can be resized without any loss of quality
- LA bitmap would become blocky when enlarged for the lorry
The logo needs to appear at hugely different sizes, from a tiny favicon on a website through to a design several metres wide on the side of a lorry. A vector graphic stores the logo as mathematical shapes and instructions rather than fixed pixels, so it can be redrawn at any size with no loss of quality at all and the edges remain perfectly crisp. If the logo were created as a bitmap it would be fixed at one resolution, and enlarging it to lorry size would make the individual pixels visible so the design would look blocky and unprofessional.
- LDraw two overlapping circles
- LPosition the second circle so it overlaps part of the first
- LUse the difference operation to cut the top circle out of the one beneath
First draw a circle to form the outer edge of the moon. Then draw a second circle of a similar size and position it so that it overlaps a large part of the first, offset to one side. With the second circle selected on top, apply the difference operation, which cuts the shape of the top circle out of the one beneath it. What remains is a crescent, and because it is still a vector path it can be recoloured and resized freely afterwards.
- LIt should be simple
- LSo that it is recognisable even at very small sizes
- LIt should work in a single colour
- LBecause it may be printed, engraved or embroidered where colour is unavailable
- LIt should be appropriate for the audience and purpose
- LIt should be distinctive so it is not confused with competitors
First, an effective logo is simple. It has to be recognisable when displayed as a browser tab icon only sixteen pixels across as well as on a large sign, and a design with fine detail or many elements simply turns into a smudge at small sizes. Second, it should work in a single colour. Logos are not only used on screens: they are printed in black and white, embroidered onto uniforms, engraved into metal and stamped onto packaging, and a design that relies on colour differences to be readable will fail completely in all of those situations. Third, it should be appropriate for its audience and distinctive within its field. A logo for a children's nursery needs a very different style from one for a law firm, because the audience and the message are different, and it must also be different enough from competitors that customers do not confuse the two, which is the whole reason a company has a logo in the first place.
- LClient brief to establish what is required
- LIncluding the audience and the message
- LMood board or research to gather visual ideas
- LSketches to explore many ideas quickly on paper
The first stage is establishing the client brief. This means finding out exactly what the client needs, who the audience is, what message the design should convey and any constraints such as colours the company already uses or where the design will appear. Without this the designer is guessing, and work will have to be redone. The second stage is gathering ideas through research and a mood board, followed by rough sketching. A mood board collects colours, fonts, images and existing designs that capture the intended feel, which gives the designer and the client a shared reference before any work starts. Sketching on paper then allows many different ideas to be tried out very quickly, and because a rough sketch takes seconds rather than minutes, far more possibilities get explored than would ever be attempted directly in the software.