How to create web button (Illustrator)

In this section we will introduce you how to create web buttons with slashes in Illustrator.

These are gradational web buttons with slashes. You can find this type of buttons on many websites. You can start using them right away.

The brief steps of the tutorial are (1) create the web button base using the gradient and blend tools (2) Apply slashes with clipping mask (3) create shadows for enhanced texture. These techniques will be useful in design so try mastering them.

First, we create a web button base.

Start Illustrator, draw a rounded rectangle with the [Rounded Rectangle Tool]. Set the gradient value using the example above. I applied light blue gradation in the example.

Make a reduced copy of the rounded rectangle created in Step01.

Select the rounded rectangle, click [Object -> Transform -> Scale]. The [Scale] dialog box appears. Set the aspect ratio using the example above. Click copy.

Now you have a reduced copied rounded rectangle inside the rounded rectangle from Step01.

Apply gradation on the reduced-scale rounded rectangle using the example above.

Select both of the rectangles. Click [Object -> Blend -> Blend Option]. [Blend Option] dialog box appears. Select [Smooth Color] and click OK.

Keep selecting the two objects and click [Object -> Blend -> Create].

Then [Smooth Color] is applied on the two rectangles and they transform into smooth gradational rectangles.

This becomes the base pattern of the web buttons. By applying [Smooth Color], you can create enhanced texture than simple gradations.

Expand Blend for later tasks.

Select Object and click [Object > Blend > Expand]. Now Blend is expanded and modifiable.

Next, we prepare to apply slashes on the buttons.

Draw two tilted lines with the Pen Tool as shown above. Set the Pen Tool preference 2pt and black. Draw the lines as they barely touch the corners.

Duplicate multiple lines in between the lines you drew in Step08.

Select the two straight lines and click [Object > Blend > Blend Option]. The [Blend Option] dialog box pops up, set the distance 8px as shown above. Click OK.

Keep selecting the two lines and click [Object > Blend > Create].

The distance setting you set in the Blend Option is applied and 8px distanced straight lines are generated. This will be the base for the web button slashes.

Set the slash color white (#FFFFFF) and the transparency 30%. Expand the Blend for slashes for later tasks. (Please see Step07)

In the next steps, we will clip the slashes according to the web button size using the Clipping Mask.

Create a mask to clip using the [Clipping Mask].

Open [Layer Panel (Window > Layer)], select the rounded rectangle layer in the most bottom and do Ctrl + C (copy) and Ctrl + F (front copy).

Next, drag the copied layer to front (see above). Now you have a mask prepared to clip the slashes.

Select the slashes and the mask created in Step12 and click [Object > Clipping Mask > Create].

You cannot create clipping mask if you did not expand Blend of the slashes. Make sure you expand Blend of the slashes. (See Step07 for Blend expansion)

Clipping Mask is applies and now the button has slashes.

You are almost there. You can already use it as a web button but let’s add some shadows for enhanced texture.

Draw the web button shadow using the Pen Tool.

Set the width the same as the button width. If you cannot draw directly, you can make one by creating a rounded rectangle like the web button, deleting anchor points and adjusting with the [Direct Selection Tool].

Arrange the created shadow on the web button, set the color white (#FFFFFF) and the transparency about 20%. You can adjust the transparency as you like for more realistic texture.

Arrange texts on the button and you are done!

These are web buttons with the perfect contrast of the smooth gradation, slashes and shadow. You might have found this tutorial complicated with smooth color, clipping mask, creating shadow and such for enhanced texture.

Web buttons are necessity for web designs. You can create various web buttons by changing the gradation, color, shadow, and slashes and so on in Illustrator. Please try creating some.

この投稿文は次の言語で読めます: Chinese (Simplified), Japanese

Related article