syndication

rss feed

Enter your email address:

Delivered by FeedBurner

Adobe Illustrator Tutorial: Creating a button with a Mesh Gradient

Product Data

Pros: 0

Contras:

Link:

Score: score

Share This Story

Delve Deeper Into This Story

Screenshots For This Story

Cheats & Short Cuts

Creating a PDF of a web page for paying members of your site

How to create a downloadable PDF for paying members, in high quality, with everything in place.

To get more of these tips, join the mailing list.

Visit the Cheats Archives

by: Erik Vlietinck - Last Updated: Thu 16 February 2006

In Adobe Illustrator, you have the mesh gradient tool. This tool can be very powerful, for example to create web buttons that don’t look “perfect”. Plastic buttons rarely look perfect. They are often somewhat bumpy with asymmetric reflections when looked at from different angles.

The mesh gradient tool enables you to re-create that natural look better than what you can do with ordinary gradients and embossing. Here’s how it is done.

Check if the "Delve Into This Story" has content
Background, Screencasts,etc. - Article Continues...
Planning on buying one of the technologies we cover? Let us introduce you to exceptional vendors and get access to the Company Directory.
Fill in The Form.
V.I.P. users get access to strategic information that helps save costs and buy the best, and much more... Register today. Just 90.00 EUR per year.

First, you’ll create the button shape. For our purpose, a rounded rectangle will be best. Don’t mind the borders. They’ll disappear in just a moment.

Illustrator button mesh gradient

Select the mesh gradient tool, and click inside the button at about one quarter off the top left border of the button. The borders will disappear, and a mesh point will be created. We will be creating a blue button, so while leaving the mesh point untouched, we will select a blue colour shade from the collour palette.

Illustrator button mesh gradient upper point

The mesh point will turn blue with a gradient towards white. Now, without changing anything else, select the mesh tool again --if you accidentally de-selected it, that is-- and click at about one quarter off the bottom right. 

Illustrator button mesh gradient lower point

The same shade of blue will fill the point and the surrounding area. You now have two mesh points containing the same colour. To make it look more natural, you can change the shade of the bottom point to a slightly more lighter blue.

Now it’s time to fill in the borders. Select the Direct Selection tool --that’s the white arrow. With the Direct Selection tool, carefully select only the upper border points that contain no colour. If you do this right, you will not have selected the starting point. Go to the colour palette and select a dark blue. Do the same for the bottom border points and select a slightly lighter blue.

Illustrator button mesh gradient upper border

Deselect the whole button, and take a look. The button should look a bit rounded already. You will now repeat the same procedure with the side borders. Be careful to only select uncoloured points and areas. If you accidentally select filled areas, you will see by looking at the colour palette which will display either question marks if you selected multiple points already coloured, or the colour of the selected point.

Illustrator button mesh gradient all borders

Colour the sides with a shade of blue that makes the button look embossed without being perfect. There should remain a slightly bumpy look to the button. This look can only be accomplished by selecting different shades of the colour you’ve used as a starting point.

If you’re happy with what you’ve done, you can now apply a Drop Shadow Effect (not a Filter! Effects are “live”, filters are not).

Illustrator button mesh gradient result

And the result looks like a quite natural plastic button, I think.

Readers' Views

IT Enquirer welcomes your views.

Share your views - (0) so far.

IT Enquirer © Erik Vlietinck; 1999 - 2008 | All Rights Reserved

published with a Mac