From Bitmaps to Vectors
Bitmap (also called Raster) graphics such as GIF’s and JPEG’s and PSD (Photoshop documents) are composed of an array of pixels or “dots” of various colors, which together form an image. Bitmap images are great - but they don't resize well and "fall apart" when they're enlarged.
The difference between a Bitmap and a Vector is that Vector graphics are constructed using mathematical formulas that essentially "redraw" the image every time it's duplicated or resized. Vector graphics are more flexible than raster graphics because they can be easily scaled up and down without any loss to the quality of the image. Vector images also have their own unique look!
In this tutorial we’ll explore turning the Photoshop documents (PSD) we made in project 2 into vector images using Adobe Illustrator. Illustrator is an enormously powerful design and illustration tool used by professional designers and illustrators the world over. Given our time constraints we’ll barely be able to scratch the surface of what this tool can really do. I set-up this brief tutorial so you can get a sense of what a vector graphic “IS” and how and why they are used.
Open a Photoshop document
To demonstrate, lets open one of the Photoshop files you created for "Project 2 the Art of the GIF". Once you have the file open, save it as a JPEG by clicking file/save as/ then on the bottom of the screen select Format/JPEG. Safe the JPEG to the desktop. Now, zoom into the image by holding down the command key and pressing the + key. Zoom way in so you can see all the pixels.
Leave Photoshop open as we proceed to the next step. You can minimize it by clicking the yellow circle in the upper left hand corner of the Photoshop window.
Vector graphics are constructed using mathematical formulas rather than individual colored pixels, so they're excellent for creating graphics that frequently require resizing. Vector images also have their own unique look!
Open the same document in Adobe Illustrator
Now we’re going to open the SAME JPEG file in Illustrator. Using the mouse, simply hover over the JPEG file on the desktop/right click/open with/Adobe illustrator. If a dialogue box opens that says "Photoshop Import Options" select "flatten layers to a single image". Click OK Once the image opens, click the image once so that it’s selected – it should be surrounded by a red (or blue) box. To zoom in press the command key and tap the + key
Now lets make it into a vector!
Open the Image trace tool by going to the top menu and select window/Image Trace. Once the Image Trace function appears, click the preview button in the right corner of the box. Tinker around with Mode selections and the Threshold slider until you get something you like. Once you’re content with the settings, “zoom-in” to the image by holding down the command key and pressing the + key.
Notice anything different?
Reopen Photoshop and compare the Bitmap to the Vector – note how the pixels have been replaced by mathematical curves and color values. These curves and values are redrawn every time the image is resized. Try moving the colors slider around and selecting a few different modes and preset options.
Finally, lets explore the most unique and powerful feature of a vector image. With the image selected, grab the corner and make it big – make it HUGE – make it WAY BIGGER than the 500 x 500 (7 inch x 7 inch) size we started with - and remember to hold down the shift key to maintain the aspect ratio. Let Illustrator do its "vectorizing" and explore the image again.
Consider the many applications for Vectors!
Saving your vector artwork in SVG format so you can upload it to your website.
I suggest making the image Black and white for uploading to WIX - just to keep the image small so WIX can handle it.
Close the file and reopen it again in Illustrator (or choose another). Follow the instructions above but don't resize the file, just get it to look the way you like. Once you're happy select File/save as. I suggest saving it to your desktop.
When the first dialogue box opens be sure to select SVG in the box labeled "format"
When the second dialogue box opens in the top box select SVG basic 1.1 (you may need to select "SVG tiny" if your file is too large) - and in the box below it select SVG.
Click OK
Uploading your vector artwork to WIX - For Arts majors also SAVE this image to removable drive before the end of the term.
First, make a page on your WIX site labeled "Vector Art"
-
Click Media on the left side of the Editor (The icon is 5 down from the top).
-
Click the blue "Upload Media icon and click upload media.
-
Select the .svg file(s) from your computer.
-
Click Open.
-
Select the vector art and click "Add to Page" to add it to your site.
-
Because its a vector, you can make it as big as you want with having the image fall apart and "pixilate".