Give ‘Em the Old Razzle Dazzle (Making Buttons in Vector, Opening Argument)
Vector. As long as I've used Photoshop (and it's been going on some ten years now), using the vector tool has been the one thing I have avoided. As an artist who never particularly used cell shading, cared much for smooth beautiful lines – okay, not true. Rather, didn't understand smooth, beautiful lines- vector never came into the picture for me. I've had a few moments where I've been coloring a piece of art or trying to add a functional square or circle to an image and accidentally clicked the pen tool or (and this created a panic), the "add vector mask" option, but all of these situations resulted in a frantic spamming of the undo button (or ctrl+Z for all you hot-keyers out there. Better yet, cmnd+z for all you mac users!). I would wipe the sweat off my forehead and go "What in the world did I do?", although, as we like to say… ignorance is bliss and I was very happy to be a blissful, clueless, non-vector user.
I have been well-informed that vectoring in Photoshop is not necessarily the best option. I don't have Illustrator at home to play with, so I just assumed that if I really wanted to use vector, then I'd have to snag myself another program. Oh, what a boring creature I was.
The question that should be coming to your mind now is: Well, why is she talking about vector if she isn't using it? I mean, really, don't blog about things you're ignorant about!
My response: And why not? People blog about things they're ignorant about all the time!
The honest truth of the matter, however, is that I have given up bliss for the world of knowledge and sparkles. Why have I done this? Simple. Karina asked me to make an image for her personal blog, Guts and Garters, in a whimsical (for any of you who follow her on twitter, this should be no surprise as her name is @whimsikay) fashion that I am completely unaccustomed to drawing in. However, my competitive nature coming to the front I decided, what the heck? Give it a try and see what we can do.
The old way of creating smooth, beautiful lines in Photoshop was not amazingly effective or smooth, not to mention time consuming. Looking back, I think this may be another one of those criminal sins that I should be put on trial for along with frames, tables, and photoshop slicing (eviscerating?) web pages. Luckily, although I may not be as cute as Renée Zellweger, I feel that if I were to throw myself at Richard Gere's feet, he'll give me the same glorious speech Roxie got in Chicago:
When you're in trouble, go into your dance
Though you are stiffer than a girder
They let ya get away with a murder
Razzle dazzle 'em
And you've got a romance!
In other words: Go to deviantART, kid, and find yourself a vector tutorial!
You, dear reader, are luckily going to get something even better: a simple tutorial from yours truly.
To start with, open Photoshop. Next, you're going to need to have the following tools ready for use:
| The pen tool: | The path selector: | The brush tool: |
![]() |
![]() |
![]() |
Make sure your brush tool is set to size three, full hardness, with full opacity and flow like the following:
Now you're ready to get started with vector, and I will be happy to show you how!
–
To see the later discussions on vector button creation, go to:
Give 'Em an Act That's Unassailable! (Making Buttons in Vector, Cross-Examination)
Daze and Dizzy 'Em! (Making Buttons in Vector, Closing Statement)



