Adobe Illustrator Tutorial: Creating a button with a Mesh Gradient
Product Data
Pros: 0
Contras:
Link:
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.
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.
Background, Screencasts,etc. - Article Continues...
Fill in The Form.
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.
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.
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.
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.
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.
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).
And the result looks like a quite natural plastic button, I think.



Email this story




Share your views