Illustrator
Intro to Adobe Illustrator for the web.
WEEK 4
ASSIGNMENT:
GLASS BUTTON TUTORIAL - An online link to the tutorial:
This week we will work on creating wire frame templates.
Our in class assignment which needs to be posted to your site will be the glass buttons:
Creating Glass buttons:
We will be using Gradient and creating gradient masks to demonstrate a fade from color to transparency..
To create the following buttons below, you will need to create the arrow shape.
1. open Illustrator and then start by creating a web document.
2. select the rounded rectangle square and click once on your art board.
3. set width to 100px - height to 20px and corner radius to 10px
4. duplicate the box three times and rotate one to 45 degrees and one to 90 degrees.
5. Using pathfinder... align the horizontal with the box on a 45 degree angle. then use the "add to shape" from the pathfinder to blend the two shapes into "V" shape on its side.
6. Using rotate, we will rotate the "V" shape so it looks like an arrow and then right click and create compound path.
7. Select the fill to black and the stroke to transparent.
8. Draw a Square using rounded rectangle tool. Make sure the square is big enough to fit your arrow in it.
9. With the square selected click on gradient and set the angle to -90. This should put the dark on the bottom.
10. Duplicate the square and decrease the size by about 90 percent then color it white and align it over the button.
See Below:
The White square is on top of the gradated square we built:
11. Select the white Square on top of the red gradated square and click on your transparency panel in your tool bars. Select "Make Opacity Mask" from the option menu on that panel:
Your white square has disappeared, but don't worry... On your tool bar select the rectangle path and (while making sure you are in the mask area) Create a square over the area your white square previously was.
Your tool pallete should now look like this:
Now Select your gradient and set it to Black and White with the angle at -90%
Your Square should now look like this:
By Clicking back on your stage area in your panel (NOTE THE HEAVIER BORDER IS NOW AROUND THE STAGE AREA) you can now alter your masked area with the pen tool.
Add an anchor point on your masked area here:
now select your Convert Anchor tool:
And select your new anchor and drag away at a slight angle.
Now if you want to add a black square above the Red Gradated area and below the mask you just create, you will have something similar to the stop button below
Web Buttons using gradients to create Glass effect
Today we will work on creating glass like buttons and elements for our web site.
