This was a fun project for one of my VC classes. Without boring you with the too many details, the objective was to create a graphic for a Discraft frisbee. Line thickness, pointed lines, text size & style, and large filled areas were all specifics we had to pay special attention too, and the final design had to be saved and submitted in .pdf, .png, or .jpg format. Process work is the hours of background work that fill never see the spotlight and (for me), especially in the creation process, is usually pretty scattered as I explore ideas and concepts. Let me share some of that process work below.
Vector images and web
SVG graphics look cool because they are cool, sure, but why use them? .EPS and .SVG graphics are math-based (vs. pixel-based with photos). If you try scaling a photo up, it’ll eventually blur past the point of recognition. This is because raster images are composed of colored blocks we call pixels. Vector files, on the flipside, are composed by mathematic formulas which plot points on a grid.
The most common vector files are:
- .ai: Short for Adobe Illustrator, this file is commonly used in print media and digital graphics, such as logos.
- .svg: The Scalable Vector Graphics format is based in XML (a markup language used widely across the Internet that’s readable by both machines and humans). It’s useful for the web, where it can be indexed, searched, and scripted.
- .eps: Encapsulated PostScript is an older type of vector graphics file. .eps files don’t support transparency in the way more modern file formats like .ai do.
- .pdf: The Portable Document Format is built for the exchange of documents across platforms and is editable in Adobe Acrobat.
Vector graphics look sweet but unlike the more common .jpg and .png image file formats, you can’t just double click on and preview a .svg, .eps, or .ai file unless you have vector-editing apps or software.
The result is a image that preserves the integrity of a real vector graphic. One can’t scale this from here without editing billions of lines of html, but if I want to change anything I edit it like normal in Adobe Illustrator, re-save my vector graphic as an .SVG, copy the generated .SVG code, and paste it into my site as HTML. It sounds like a lot of steps but is really simple and I think a fantastic way of adding genuine vector files to a website.