MYP Design Vector and Raster Graphics Notes

Two Ways To Store A Picture, Maths Or Pixels

1. Open any image on a computer and it is held in one of two ways, as a grid of coloured dots or as a set of drawing instructions.
2. A raster graphic is a fixed grid of pixels, and a 1920 by 1080 photo holds just over two million of them, each carrying one colour value.
3. A vector graphic stores instructions instead, such as a circle of radius 20 mm centred at this point, or a line running from here to there filled in red.
4. Your screen turns those instructions into pixels only at the moment it draws them, and it redoes that maths every time the size changes.
   1. Nothing inside the file changes when you zoom, only the picture the software works out from it.
5. That one difference decides which file survives being scaled up, which one can hold a photograph, and which one a laser cutter will accept.

Why A Vector Never Goes Blocky

1. Scale a raster up and the software has to invent pixels that were never captured, guessing each new colour from its neighbours.
2. At 400% you see that guess as pixelation, hard blocky squares, or as a soft blur where the software has averaged the edges together.
3. A vector has no pixels to stretch, so the maths is simply recalculated and a curve stays crisp at 10 mm or at 10 metres.
4. Resolution limits only a raster, because the pixel count is fixed when the image is made and no amount of re-saving adds detail back.
5. A 72 dpi web image blown up for an A3 presentation board prints fuzzy, while the same logo as a vector prints sharp.
6. Print work is normally wanted at 300 dpi, so an image printed 100 mm wide needs about 1180 pixels across before it even leaves your computer.

File Types Are Not Interchangeable

1. SVG is an open vector format that every browser and most cutting software can open, which makes it the safest file to hand to someone else.
2. AI is Adobe Illustrator's own working file and keeps layers and editable text, but only Adobe software opens it properly.
3. EPS is an older vector format that print shops and sign makers still ask for.
4. JPG squeezes photographs into a small file by throwing detail away, and every re-save throws a little more away.
5. PNG keeps every pixel exactly as it was and supports transparency, so it suits screenshots, flat graphics and a badge sitting on a coloured background.
6. GIF is stuck at 256 colours and is only worth using for a short looping animation.

Choosing For A Logo, A Photo Or A Cut File

1. A logo is vector work from the first click, because it will appear at every size from a 16 pixel favicon to a 2 m banner.
2. Draw it in Illustrator, Inkscape or Affinity Designer, keep the AI or SVG as the master, then export PNG copies for slides and documents.
3. A photograph is raster by nature, since a camera sensor records light on a grid and there are no shapes to describe.
4. Save photos of your prototype as JPEG for your design folder, and use PNG only when you need a clean transparent background or perfectly crisp text.
5. A laser cutting file has to be vector, because the machine follows a path rather than looking at a picture.
6. A photograph can still be burned onto a surface as a raster engrave, which the laser cutting and CNC article deals with.

Getting A Vector File Ready For A Machine

1. A cutting machine reads paths, so every cut line has to be a real vector path and not a drawing of a line inside a photo.
2. A shape whose start and end points do not meet is an open path, and it may cut as a stray line instead of releasing the part.
3. Set line weight and colour to whatever your machine's software expects, commonly a hairline of 0.01 mm in pure red for cutting.
4. Convert text to outlines before exporting, or the machine may swap in a font it has and change every letter shape.
5. Work in millimetres and check the artboard size, because a file drawn at the wrong scale cuts at the wrong scale with no warning.
6. Delete duplicate lines sitting on top of each other, since the laser will happily cut the same line twice and scorch the edge.

Proving The Choice In Your Design Folder

1. A screenshot of your editor with the layers panel open shows the graphic is your own work rather than a downloaded image.
2. Put the same graphic at two sizes side by side so the reason for choosing vector is visible, not just claimed.
3. Write one line saying which format you exported and why, for example PNG with transparency so the badge sits on a dark header.
4. Keep the editable master beside every export, and see the file formats and version control article for naming and saving versions.