The Holy Order Of The Asian Pussy Pounders
iWeb tutorial: How to create aqua buttons
by Tironius, created Wednesday, July 18, 2007, with permalink

iWeb bests Photoshop in making simple graphics for the web

For those who find Photoshop intimidating or bloated, let Tironius be your guide to creating lickable buttons with li’l ol’ iWeb for web or print

Bloggers and amateur web site creators who don’t find Apple’s aqua look passé will cheer in ecstasy when realized how easy it is to create those style of buttons using Apple’s oft-overlooked little trooper, iWeb. Now, I’ve already shown you how you can create print-quality flyers and posters in my iWeb for print hack. (There’s not much this little program can’t do.) In that, I explain how iWeb creates stunning flyers just like InDesign or Apple’s iWork.


Today, however, I will concentrate how easy you can create simple buttons simply by creating them in iWeb using shapes, and either using them for your iWeb site, or copying them to any other program. So let’s get started.

How to create an aqua-style button

First, let’s see an example of what we’re up against:


Not too shabby. Photoshop would give me a little more finesse, but creating this for your own website will make yours better than ninety per cent of the rest.

Open iWeb and create a new page

Open the page you want to place your new delicious button; or, open a new page if you plan to export this button for some other use (say) in another web page. Select New Page in the File menu. Up pops the template dialogue sheet, and to the left side select White for your template family, and Blank for the actual template. This will give us a clean workspace.

Select a shape

To create our pill-shaped button, we will select one of the shapes in the Shapes button located in the lower left of the main workspace. It is the rounded corner rectangle, fifth from the top of the pop-up menu.


You should see a shape similar to this one (though, size and color might be different if you’re on a different template):


This is our building block.

Adjust the size, color and shape

It’s a nice looking box, but it doesn’t much look like our end product. Let’s fix that by altering its shape. If it isn’t already, select the rectangular box you just created. When an object is selected, that object’s bounding box will appear. A total of eight little squares appear in the corners and on the sides. Dragging these will reshape the object. Drag the top center one downward so that your rectangle becomes a pill shape.


If the shape is still too rectangular (that is to say, if the corners are too sharp), then iWeb allows you to adjust the radius of those corners. That is the little circle in the top left of our shape (under the cursor in the above picture). Use this to adjust the shape into more of a pill:


Part of what gives the button its glassy look is the gradient you see underneath the glare. In this instance, the pill gradates from a dark blue to a brilliant blue. Let’s do this now.


It’s time to use the inspector. In the lower right corner of the program, there is a blue letter “i.” Click it and up pops the inspector, a pane that allows you to control all aspects of the site, including colors, size, and links. In this lesson, we’ll mostly use the color options located in object inspector. Click the tab shown in the above picture, fifth tab from the left.

Picture 1-1

The object pane should look like this:

Picture 1

Let’s fill our shape a different color. But, instead of just filling it with one color, we will fill it with two, whereby one subtly changes to the other. That’s a gradient fill.

Picture 1-2

Click the pop-up menu in the inspector where it says Color Fill, and select Gradient Fill.


Now, instead of one color swatch, you see two. Click the top swatch, and up pops the color inspector. Mac OS X’s color inspector is the best. I find it to be superior to Adobe’s in ease of use. It’s time select our base color; for this, I chose a classic aqua blue. Any color works, but blue is classy.


For now, we want both colors to be the same. You’re able to drag swatches around, so to make the other color the same, simply drag the first color on top of the second:


Now, select the top one again, and using the slider in the color inspector, make the blue just a hair darker. Don’t go crazy; subtlety is the way to go:


Picture 2

Note, if you accidentally make the bottom color the darker color, no worries: just click that little double arrow right by the swatches. That switches them. Also, if you choose to have a stroke (an outer line) like mine, make the color the same as your darker blue. You can select the stroke using the pop-up menu. Select Line, and just drag the darker blue swatch right onto the swatch of the stroke below. Final note: already this is a great button and looks more like “Web 2.0” style now than the final.

Create the button’s text


So what is the purpose of this button? Are you sending your reader to a picture page? Or your blog? It’s time to tell them where to go with text. In the lower left corner of the work space, click the Text button. This will plop a brand spankin’ new text box right in the center of your work space. Type your words. To make sure the words align exactly to the button, we want to center the text both horizontally and vertically.

Picture 4-1

We’ll now switch over to the text inspector. It’s the big “T” tab right in the middle as shown. In the Color & Alignment section, select the center alignment button, and center vertically button. If it isn’t already, select white as the text’s color. To give the text a teensy bit of contrast from the background, we will apply a very subtle drop shadow. Go back to the object inspector (fifth tab from the left), and tick the Shadow checkbox.

Picture 5-1

The following separates the pros from the amateurs. A real design snob will scoff at the use of a drop shadow. They seem to be accepted and prevalent in package design, however. I can always spot the Photoshop lover by his use of the default drop shadow settings (which by the way is 75% opacity). These are much too dark and gaudy! In our design we will tone it down to an acceptable level. Use my settings as shown in the picture. No need to type “pt” in the settings fields.

You may need to adjust the size and font face of your text. This is done in a separate inspector called the font inspector. (This is one part of OS X that needs an overhaul.) Myriad Pro is the font of choice for Apple.Click the “A” button, the Fonts button, in the lower right corner. Up pops the font inspector. With your text box selected, find the Myriad Pro font family in the inspector. You can search for Myriad Pro using the Search field at the bottom of the inspector, or simply browse for it. Select Semibold if you have it. Another good choice is Helvetica (but rather boring). Keep it classy: simple is better.

Picture 7

My size for text is 32, but your button size might be different. It’s an arbitrary decision; whatever size text fits well in the button is what you should use.


Create the highlight

This is the component that makes the glass button glassy. And, iWeb makes it so easy to create. In Photoshop, one must muck with layer masks or the gradient tool, but in iWeb, its all about the color inspector, baby! Easy as pie.

First, we must copy our pill shape, because it will become the highlight. I simply held down the Option key before dragging the shape upward, thus creating a second pill.


We must then change its color and size. For now, we can change its color to white (for both swatches, since it is a gradient). By clicking and dragging the second shape’s bounding box (on the top center or bottom), I can squish the shape a bit. Do the same for the sides: grab either the left or the right handle, and move it in. Hold the Option key while you do this will do both sides at the same time.

Align the new shape above the other; iWeb will help you keep it center. Use the picture as a guide to how things should look:


Now, the fun part. What makes the second shape look like glare on a glassy surface is its transparency. iWeb does this beautifully. With the white pill shape selected, in the object inspector, select the top swatch for its gradient. Now, in the color inspector, there is a horizontal slider near the bottom pane that controls the opacity of a color. We’re doing the top color, so set the opacity at 80% (by sliding or typing in the value).

Picture 6

Select the shapes second gradient swatch, and set it to just 10%. We’re on the last leg of the race! See how good your button looks now?


All that’s left is to set a drop shadow and export!

Complete and export

You know how to do the next part. Click your original blue button, and apply and adjust its drop shadow using similar settings as your text. You can maybe go a little darker, but don’t over-do it.

Exporting is easy. Simply select all and copy. To copy, hold the Command key and hit C. Or, in the Edit menu, select Copy. I can paste directly into iWork, Skitch, ImageWell, Photoshop, or Preview (by selecting New From Clipboard in the File menu). Pasting into Skitch, ImageWell and Photoshop retains transparency of the drop shadow. Preview annoyingly applied a white background. Apple’s Pages has a wonderful relationship with iWeb; pasting into Pages retains every single object as a separate entity. Text fields remain text fields, etc.

That’s a wrap

Hope you had fun. Who needs Photoshop when you can make such beautiful graphics for simple needs with little old iWeb, Apple’s best kept secret.


Labels: , , ,