Give ‘Em an Act That’s Unassailable! (Making Buttons in Vector, Cross-Examination)

I think that Billy Flynn had a much easier job explaining to Roxy what to do in the courthouse than I have been having making this tutorial.  As you may have noticed, dear reader, it's been over a week now (a week and a half even!) since I have had a blog post of note, or perhaps not of note, but a post in general.  The fact of the matter is, teaching you how to Razzle Dazzle has not been either easy or quick.  However, will it be extremely gratifying?  One can only hope.

Unfortunately, I don't have much witty, sarcastic, or informative to add to this other than the to give you a quick and concise overview of creating vector graphics.  And so, to the meat of the matter:

In my last post, Give 'Em an Act That's Unassailable! (Making Buttons in Vector, Cross-Examination), I showed you the basic tools that you will need to make your vector graphic, in this case a lovely gradient flower.  Since it's been a while since I posted (as mentioned earlier, I know, I know), I would suggest going back and looking over them, making sure you understand what they are so you'll be comfortable as I show you here how to use them.

  1. Your first task is to create a new document.  I usually like to work a lot larger than the image will actually be in the end so that I can see the details in the beginning.  If you start too small, then editting your vector is going to be very difficult.  I started with 600×600
  2. Once you have your new document open, you're going to want to select your pen tool and put a point somewhere slightly below the center of the page.
  3. Put another point about an inch or so below it and slightly to the right.
  4. Bring the point back up next to the original one so that you have a triangular shape.
  5. Next, make another one to the right and slightly above.  The end goal of this is to make a sort of star shape.
  6. Continue to do this until you have five points and something that looks relatively like what you see here.
    1. I noticed here that my top left point seemed a bit out of skew with the others, so I took my direct selection tool and moved it over a bit to make it more even.
  7. Now it's time to start getting to the prettifying. Switch to your convert point tool, and pull to the right on your bottom point.  This should make it appear rounded and will probably look a bit odd at this stage.  Don't worry, this isn't the end.
  8. On the point above it, use the same tool and also pull.  You'll notice that if you pull in different directions it will do different things.  You'll want something that looks relatively close to what you see here.
  9. Now, if you release your hold on the point, you'll see that the two adjustors stay out.  Pull the one on the right around until it matches the image, or at least close enough.
  10. Now, pull the other up until they aren't ovelappling any longer and end up just barely touching.  You'll see how these are slowly beginning to look like petals.
  11. All right, we're done with the points for the moment.  Let's take a look at the lines.  The bottom right line that you've adjusted is ready to be fiddled with to make even prettier petals.  Pull the bottom tab inward, like so, so you get a nice point.
  12. Repeat these steps all the way around until your flower ends up finished and looking like this.
  13. Now to add the gradient!  I picked a pretty blue to go with my yellow.
    1. Double click on your layer in the layers screen. If you don't have this open, it's easy. Go up to Window and select Layer.
    2. Double clicking should pop up a new window with layer styles on it. Go down and check "Gradient Overlay".
    3. Inside this, double-click where you see the gradient appearing. This will pop up another window where you can select what kind of gradient you want to use. I kept mine simple.
  14. The final touch will be to add what we'll eventually use for our hover. Back on your layer screen, click the New Layer button (This is the image that looks relatively like a sticky note).
  15. Select the original layer, and using your direct selection tool, right click on the flower image (not the layer!).
  16. Select "Make Selection" and leave the feather radius at 0, Anti-aliased, clicked, and you want it to be a new selection.
  17. Switch back to your new layer and use your gradient tool.  As you can see in the image, pull from the bottom to the top, with your colors in the order on the toolbar as you see.
  18. Go to "Select" at the top of the screen and hit "Deselect".
  19. You should be left with layers with these two images!

If you think you're finished, I can promise you this isn't quite the end.  I did say that I was going to show you, dear readers, how to make buttons, did I not?  Well, buttons I will indeed show you.

I'm sure there is something witty and important to say now, but after all that, I'm failing.  Stay tuned for turning these into lovely hover buttons in "Daze and Dizzy 'Em! (Making Buttons in Vector, Closing Statement).

–

To see the prior and latter discussions on vector button creation, go to:

Give 'Em the Old Razzle Dazzle (Making Buttons in Vector, Opening Argument)
Daze and Dizzy 'Em! (Making Buttons in Vector, Closing Statement)