In this simple tutorial, we are going to use Adobe Illustrator make buttons that have a glass-like look to them.

I’m using Illustrator rather than Photoshop because once you make your button in Illustrator, you are left with a much more flexible button graphic that can be used to make more buttons of different sizes.

… This is thanks to Illustrator being a vector based program/application – vector graphics can scale up or down without losing any resolution.

On the other hand, Photoshop based images are pixel based, as such, if you scale/resize a button made there, you will see a degradation of the image quality.

Let’s begin:

Step 1: Open Illustrator and create a new “Web Document” of 800 x 600 pixels. Make sure “pixels” is used as a unit.

Step 2: Select the “Rounded Rectangle Tool” under the “Shape Tool” and click once on the artboard.

Step 3: Make a square of 100 x 100 pixels with a corner radius of 12 pixels.

Step 4: Select your square and give it a fill color by double clicking the “Fill Color Tool”.

Step 5: Give it a slightly darker stroke color as shown in the screen capture.

This will be our base shape.

Step 6: Select the square and press “Command + C” to copy (“Ctrl + C” for Windows users) and then “Command + V” to paste in front. This will position our copy square right on top of the first one.

Step 7: Select our new square and holding down “Alt + Shift” take one of the corners of the bounding box and resize it to a slightly smaller square.

Step 8: Remove the stroke from this smaller square by selecting the stroke color tool and then press the “ / “ key.

Step 9: Apply a gradient to the smaller square by selecting the Fill Color Tool and then press the “ > “ key.

Step 10: Bring up your gradient palette with “Command + F9” (Mac) or “Ctrl + F9” (Windows) and apply a linear gradient type with 90 degree angle gray to black like is shown in the image below. Make sure the black is RGB black, which is darker than CYMK. Then set a “screen” blend mode to the square.

Step 11: Select the small square and press “Command + C” to copy (“Ctrl + C” for Windows users) and then “Command + V” to paste in front. Rotate the new square 180 degrees.

Step 12: With the latest square selected open the “Gradient Palette” again and modify the gradient to look like the one shown bellow.

Step 13: Select the original base square and go to the “Effect” menu. Choose Stylize > Drop Shadow.

Now the only thing left is for us to add the content of our button. I have the RSS logo ready here. I applied a soft gradient from gray to white and a light
drop shadow. If you are doing text you have to convert it to outlines before you can apply gradients and shadows to it (“Command + Shift + O” for Mac, “Ctrl + Shift + O” for Windows).

Step 14: We change the depth of the RSS logo. We have to place it underneath the squares with the gradients so that it gets affected by the “screen blend mode”.

There we have it; a nice and simple way to make glass button. The best part is that modifying this button is extremely simple.

New color: just select the base square and give it a new fill and stroke color
New size: select all items and resize to your liking.

Saving the button: With nothing else but your button on your document, go to the “File” menu > Save for Web and Devices. Select the PNG-24 preset and check “transparency” so that your button blends to the background in your website.

Click save and on the dialog box on the “Format” section select “Images Only”.

To insert your button in your website and make it a link you only need the code bellow:

<a href=”link”><img src=”path/button.png” width=”100″ height=”100″ /></a>

In the exporting step I chose to use PNG over GIFF for a couple of reasons. First, PNG has better compression than GIFF and PNG is lossless. Although PNG may have some trouble rendering in older browsers, let’s be honest, no one should be using Microsoft IE anymore – download something better!

The basics about Illustrator: it’s compatible with both Mac and Windows, has a bevy of add-ons, plug-ins, and tutorials to choose from that will enhance your user experience. If you’re new to drawing, you’ll find help in the form of books, forums, how-to articles, and even videos. For the more seasoned users, if there’s something you want to do, there’s probably a (third-party) plug in for that. It’s a heavy app so make sure your hardware meets the requirements listed on Adobe’s page.

The catch is that Adobe Illustrator CS4 is unlike raster-based digital arts programs; Illustrator is vector based and therefore not designed to simulate the behavior of traditional media. If recreating an artist’s studio is what you’re into, then go straight for Corel Painter 11. To understand the differences, first know that vector based programs (like Illustrator) represent images and graphics in terms of mathematical formulas. Raster based programs represent images by their pixels, the individual points of color that collectively make up your image. The only thing you need to take away from these differences is that vector images, thanks to their mathematical properties, can be resized again and again without degrading. Raster images when scaled will lose clarity but raster graphics are much better for color-rich things like photographs.

With that said, Adobe Illustrator CS4 is a powerful graphics program and integrates seamlessly with the rest of the Adobe production suite (Photoshop, a raster based program, InDesign, and Dreamweaver).

Functionality and User Friendliness:

For those who have already used Adobe’s products, the user interface is very similar so you won’t have a lot to learn. I find the interface intuitive, even without much training in the software and like the “tabbed” appearance.

This version seems streamlined. For example, the new Appearance panel merges several panels you would have had to use separately in the past and gives a one-click access to editing your selected object. There have also been some definite improvements with the gradient tool from previous versions.

Awesome Features:

Probably the best improvement to the new Illustrator is the ability to work with multiple pages and the new Artboard tool. Basically, cropped areas become new Artboards and each Artboard is treated as a separate page. There are still some things Adobe needs to figure about this approach, but it’s definitely a good, much-anticipated feature.  

Another great improvement is the new Blob brush tool. It can best be described as an “intelligent” brush, one that is pressure sensitive and merges with other (same colored) objects to create one seamless path. You can even use the Eraser tool with it.

Features to Write Home About…

Aside from the previous mentions of the new multipage Artboards and the Blob brush tool, here are some fun tidbits of the new version.

This tool, which doesn’t have an official name, allows you to view your image on screen, as someone who is colorblind would see it. Why is this important, you might ask? Well, other than the entertainment value, it allows you as a designer to see the contrast (or lack of) in your image and whether the almost 8% of colorblind people will see it clearly enough.

The Bottom Line:

If you need a program that will improve your productivity, allow you to manage multiple files, has an entire slew of plug-ins and teaching resources available to help you, then Adobe Illustrator is for you. $599 without upgrade, that’s a bit steep but if this is what you’re doing as a living, you’ll want Illustrator. Upgrade is only $99.

Final Mentions:

You’re going to need a lot of RAM! Don’t skimp when it comes to using Illustrator.

Elements is a great choice for those web designers who want great functionality at a fraction of the Photoshop’s price.  If you’re looking for a piece of photo editing software that doesn’t sacrifice features for simplicity, look no further than creative software giants Adobe’s Photoshop Elements program.  Although not as robust as the full-fledged Photoshop or as interfaced with the Creative Suite, the new Photoshop Elements 7 has proven itself through its consistent high rankings in ease of use, features, and best of all – price.

Like its predecessors, Elements 7 appeals to both those beginners looking to do a bit more editing than what iPhoto has to offer and the more savvy photogs who choose not to foot the bill for the higher-priced Photoshop application. 

Functionality and User Friendliness:

In everything that Elements is designed to do, it exceeds expectations for its ease of use and compatibility with multiple formats (PDF included!). 

Easy to Import

Elements can import files from almost any media:  camera, scanner, cell phone, CD, etc).  Bonus points for allowing PDF files and saved video frames into your library; Elements help you organize all of your files within one program. 

Easy to Organize

Organizing photos is also easy as the photos organize as they import.  You can also add keyword icons and ratings and if you’re easily influenced, you can take the built in suggestions for “stacks”.  Everything is pretty much drag and drop.

Easy to Share:

This helps those using Elements to create projects they plan on sharing (also made surprisingly simple with a click of the Elements’ “Share” button, linked with several  functions like Kodak Gallery, SmugMug, and Photostamps.)

The Elements interface is also enjoyably simple.  By clustering similar functions, you’ll not need to navigate through countless tools or a complicated interface to find the ones you’ll use most, a definite plus for those who get frustrated by the full Photoshop’s overwhelming toolsets.

Awesome Features:

Notable features include three editing modes:  quick, guided, and full. 

·      Quick mode let you access a few features to tweak lighting, sharpness, and colour, amongst others for those quick fixes. 

·      Guided mode provides you with step-by-step How to’s on common editing choices and shows even the beginners the robust functionality of the Elements program.  In fact, its almost like having a private tutour to show you how to work through the program, saving you the trouble and aggravation of looking for third-party tutourials or the dreaded instructional books. 

·      Full mode opens up twenty-two different tools and the opportunity to work with multiple layers, for those more seasoned editors. 

Features to Write Home About…

Elements’ “Photomerge” feature lets you pick the best of all worlds when trying to edit a group photo.  If someone wasn’t smiling or their eyes were closed, simply choose the best side of each person (providing you have several photos of the group) and merge the photos to create the perfect group shot, ensuring that everyone is happy with the next pic they’re tagged in.  And, as mentioned before, definitely use Elements’ “Guided Help” if you need to beef up on your editing skills.

If you need more help outside of the built-in assistance that Elements has to offer, you can find your pick of online tutourials and printed books – but play around with the “Guided” editing and you’ll find that you may not need them.  Because of Adobe’s popularity, you can find a lot of forums and third-party help.

The Bottom Line:

A great program for anyone who wants an (almost) full-fledged photo-editing suite without paying the price for Adobe’s Photoshop program.  At an MSRP of $99.99 (USD) and many outlets offering a lower price, Elements is the way to go if you’re looking for hassle-free photo editing without sacrificing functionality. 

Final Mentions:

Elements works incredibly with the Adobe Premiere bundle if you’re also interested in video editing.

Look for our upcoming reviews of the Top Ten Photo Editing Applications (including freeware) and an upcoming series of articles on web design software.