Create vector graphics (Bezier curves, shapes)

19 Graphics Creation – Vector Graphics

What are Vector Graphics?

Vector graphics are images made from points, lines, curves and shapes defined by mathematical equations. Think of them as a digital sketch that can be resized without losing quality, just like a drawing on a transparent sheet.

Why Use Vector Graphics?

• Scalable – zoom in or out and they stay sharp.
• Smaller file size for simple images.
• Easy to edit – change colour, shape or size in one click.

Bezier Curves – The Building Blocks of Smooth Lines

What is a Bezier Curve?

A Bezier curve is a smooth line defined by control points. The curve starts at the first point, ends at the last point, and bends towards the middle points.

Analogy: The Rubber Band Trick 🎈

Imagine you have a rubber band stretched between two pins (start and end). If you pull the band towards a third pin (control point), the band will curve towards it. The more pins you add, the more control you have over the shape.

Mathematical Formula

For a cubic Bezier curve with points \(P_0, P_1, P_2, P_3\):

\(B(t) = (1-t)^3P_0 + 3(1-t)^2tP_1 + 3(1-t)t^2P_2 + t^3P_3\)

where \(t\) ranges from 0 to 1.

Creating a Bezier Curve in a Design Tool

1. Open the Pen Tool (🖌️).
2. Click to set the start point \(P_0\).
3. Click again to set the end point \(P_3\).
4. Drag the anchor handles to adjust the control points \(P_1\) and \(P_2\).
5. Preview the curve – it should look smooth and natural.

Shapes – Building Blocks of Vector Art

Basic Shapes

• Rectangle / Square
• Ellipse / Circle
• Polygon (triangles, pentagons, etc.)
• Star

Combining Shapes – The Power of Boolean Operations

You can merge, subtract, or intersect shapes to create complex graphics.

Practical Example – Drawing a Smiley Face

1. Draw a circle for the face.
2. Use two smaller circles for the eyes.
3. Create a Bezier curve for the smile.
4. Apply fill colours – yellow for the face, black for eyes and smile.
5. Group all elements so you can move the smiley as one object.

Practice Tasks – Get Your Hands Dirty

Task 1 – Design a Logo

Create a simple logo using at least two shapes and a Bezier curve. Experiment with colours and gradients.

Task 2 – Create a Traffic Light

Use circles for the lights and a rectangle for the housing. Use Boolean operations to cut out the lights from the housing.

Task 3 – Animate a Bouncing Ball (Optional)

Draw a circle and use keyframes to move it up and down, simulating a bounce. This introduces basic animation concepts.

Key Takeaways

• Vector graphics are scalable and editable.
• Bezier curves give you smooth, controllable lines.
• Shapes can be combined using Boolean operations.
• Practice by creating simple graphics and experimenting with colours.