Adobe Illustrator CS3 Buttons: Pink Gradient Leaf Buttons

Adobe Illustrator CS3 Buttons: Pink Gradient Leaf Buttons
Page content

These buttons are in the shape of a leaf. I created these buttons using the arc tool in the main toolbar. This tutorial will show you step by step how to create the pink gradient leaf buttons. Let’s get started.

Open your Illustrator program and create a new document to work on.

Drawing the Leaf

We will start off with drawing the leaf. If you are unfamiliar with the arc tool, this part may take you a little while. Grab the Arc Tool from your toolbar. Draw an arc on your document. Then draw another arc the other way. You may need to take a look at the graphic below to get a visual of this. You will need to draw the two arcs together so that they form a leaf. We will have to turn the leaf, so don’t try to draw it like it looks in the finished image. Look at the image below to see how the leaf should look now.

Adobe Illustrator CS3 Buttons - pink gradient leaf buttons - leaf outline

Grouping the Leaf

Next, you will need to make the two arcs become one arc. It is easier to manage like that. Grab your Pointer Tool and hold down your shift key and click both arcs. With both arcs selected, click Object > Group. The two arcs are now one.

Applying the Gradient and Stroke Color to the Leaf

Go to the top of your window and click Window > Swatch Libraries > Gradients > Gem and Jewels. Look for the Pink Tourmaline gradient style by placing your mouse over the styles. Once you find it, click it. Now your leaf will have the gradient applied to it. Double click the stroke box in the toolbar and change the color to # 635B62. That will be your border for the leaf.

Adobe Illustrator CS3 Buttons - pink gradient leaf buttons - gradient leaf

Rotating the Leaf Button

Now you will need to rotate the leaf button. Grab the transform tool from the toolbar. Place your mouse right below the right bottom corner. When your mouse turns into a half circle, click your mouse and turn the leaf. Position the leaf like the one in the finished image.

Adding the Stem for the Leaf

Adobe Illustrator CS3 Buttons - pink gradient leaf buttons - finished leaf

Next, you will need to add the stem for the leaf. I used the arc tool again to create the little stem. So, grab the arc tool and draw a little arc for the stem. Change the stroke color to # 635B62 and the color fill to transparent. Hook the stem onto the leaf by dragging it.

Group the leaf and the stem together like you did the two arcs. Now you can copy and paste your other buttons. After you have all of your buttons, you can start adding your text.

This post is part of the series: Adobe Illustrator CS3 Buttons

This series will show you how to create buttons in Adobe Illustrator.

  1. Introduction to Creating Web Buttons in Adobe Illustrator CS3
  2. Adobe Illustrator CS3 Buttons: Rose Faded Drop Shadow Button
  3. Applying a Chrome Effect to Web Buttons in Adobe Illustrator
  4. Adobe Illustrator CS3 Buttons: Pink Gradient Leaf Buttons
  5. Adobe Illustrator CS3 Buttons: Green Gradient Cross Buttons
  6. Creating Glass Buttons With Illustrator
  7. Adobe Illustrator CS3 Buttons: Pink and Silver Bullet Button
  8. Adobe Illustrators CS3 Buttons: Water Blue and Yellow Buttons
  9. Adobe Illustrator CS3 Buttons: Black and Silver Chrome Pill Button
  10. Creating Slanted Gold Web Buttons in Illustrator
  11. Adobe Illustrator CS3 Buttons: Blue Steel 3D Slanted Button
  12. Adobe Illustrator CS3 Buttons: Silver Plastic Pill Button with Spirals
  13. Adobe Illustrator CS3 Buttons: Silver Bullet Buttons