DesignTips > > How to Create Web Button with Slashes (Illustrator)

How to Create Web Button with Slashes (Illustrator)

How to Create Web Button with Slashes (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.

Step01 Create Web Button Base in Illustrator

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.

Step02 Make a Reduced Copy of the Rounded Rectangle

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.

Step03 The Rectangle is Copied!

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

Step04 Apply Gradation on the Reduced-Scale Rounded Rectangle

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

Step05 Set the Smooth Color

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

Step06 Base Web Button Pattern

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.

Step07 Expand Blend

Expand Blend for later tasks.

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

Step08 Prepare Slashes to Apply on the Buttons

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.

Step09 Blend Option

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.

Step10 Duplicate Slashes with Blend

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.

Step11 Change the Slash Color, Expand Blend

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.

Step12 Prepare a Mask to Clip

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.

Step13 Create Clipping Mask

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)

Step14 Slashes Applied on the Web Button

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.

Step15 Draw Web Button Shadow

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].

Step16 Apply the Shadow on the Web Button

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

How to Create Halloween Jack O’ Lantern Illustration (Illustrator)
How to Create Halloween Ghost Illustration (Illustrator)
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to Create Retro Photo in Photoshop
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white in Photoshop 1
How to Create Retro Picture in Photoshop