Pin Me

Introduction to Creating Web Buttons in Adobe Illustrator CS3

written by: Amanda Presley•edited by: Michele McDonough•updated: 11/2/2010

If you'd like to design customized web buttons for your web site, this collection of tutorials will walk you through the steps of the process using Adobe Illustrator.

  • slide 1 of 1

    This is an introduction to my Adobe Illustrator CS3 Buttons tutorials. This series consists of many types of buttons that you can create using Adobe Illustrator CS3. I will create different types of buttons and then show you how to create them. I will show you step by step how to create the buttons and I will also provide images to help you along the way.

    Most of these tutorials are easy enough for beginners. Some of the buttons are created using downloaded symbols, brushes, graphics, and swatches. When creating a button that requires you to download one of those before starting, I will tell you in the beginning of the article and provide a link in most cases for you to download what you need. Here are some of the button tutorials that you can expect to find in this series.

    Slanted Gold Chrome Pipe Buttons – This tutorial will show you how to create the slanted gold chrome pipe buttons. This is a pipe looking button with the ends of the buttons slanted. The pipe effect comes from applying a gradient to it.Adobe Illustrator CS3 Buttons - slanted gold chrome pipe buttons - finished 

    Blue Steel 3D Slanted Button – These are buttons with a 3D effect applied to them and then a gradient on top of that. This tutorial will show you how to create the blue steel 3D slanted buttons.Adobe Illustrator CS3 Buttons - blue steel 3d slanted button - finished 

    Black and Silver Chrome Pill Buttons – Pill buttons are very popular among web designers, so are chrome buttons. In this tutorial you will learn how to create the black and silver chrome pill buttons. This button is created using the rounded rectangle tool and a gradient.Adobe Illustrator CS3 Buttons - black and silver pill button - finished 

    Pink and Silver Bullet Buttons – These buttons are silver with a small pink bullet on the left of the button. This button was created using gradient styles and a graphic style. This tutorial will show you how to create the pink and silver bullet buttons.Adobe Illustrator CS3 Buttons - Oink and silver bullet button - finished 

    Water Blue and Yellow Buttons – This is a water blue button with a narrow yellow rectangle on the left side of it. This button is very simple to create. It is simply two rectangles with two gradients applied. This tutorial will show you how to create the water blue and yellow buttons.Adobe Illustrators CS3 Buttons - water blue and yellow buttons - finished 

    Pink Gradient Leaf Buttons – Buttons do not always have to be rectangle or oval. This tutorial will show you how to get creative and create a leaf button. This leaf button was created using the arc tool and a gradient.Adobe Illustrator CS3 Buttons - pink gradient leaf buttons - finished leaf 

    Those are just a few of the button tutorials that you can expect to find in this series. There are so many different types of buttons that you can create in Adobe Illustrator CS3. You will also learn how to make creative buttons like the leaf buttons. So keep checking this series daily for my button tutorials.