How can I produce custom vector based buttons in Photoshop?

Question

I want to create some vector based buttons which resemble the button design shown below:

I can just take a button and treat it as a bitmap and change text and appearance, but the output doesn't look professional. If I have a vector of the same design, it can easily be re-sized and modified without loss in quality.

How can I create vector versions of these in Photoshop CS6?

Answer 1

As the others have said, Photoshop won't create a true vector image. Although you can still create a shape like that in Photoshop that you can re-size with better results than re-sizing a PNG, GIF, or JPG.

1. Create a basic shape using the Rounded Rectangle Tool
2. Hold down the Pen Tool and select the add anchor points option
3. Click on the sides of the rectangle to add anchor points
4. Use the Direct Selection Tool (the white arrow) to move the anchor points to get the curls you want

Photoshop Help / Editing paths

Answer 2

If you have a vector, yes, it will resize at any scale without losing quality. However, you'll need to jump into illustrator to do this.

When using a bitmap, it should still only be deteriorating quality if you're scaling the image up, or saving it as a compressed format, like a jpg or a gif.