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, 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 the Photoshop document open as we proceed to the next step. You can minimize it by clicking the yello 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
Go to the applications folder and open Adobe Illustrator. Now we’re going to open the SAME Photoshop file in Illustrator by selecting file/open/(select your file). A dialogue box will appear, click “flatten layers to a single image”. Once the image opens, click the image once so that it’s selected – it should be surrounded by a red box.
Now lets make it into a vector!
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.
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
First, make a page on your WIX site labeled "Vector Art"
-
Click My Uploads on the left side of the Editor (The icon is a cloud with an arrow in it.).
-
Click Vector Art.
-
Click Upload Vector Art.
-
Select your file(s) from your computer.
-
Click Open.
-
Select the vector art and click Add to Page to add it to your site.