Calvin’s Hub

You gotta love Apple and its inspiring designs. One of which is the style used for the iPhone apps. It is simple yet elegant and can easily blend into web 2.0 sites.

Here’s a quick tutorial on how to create such icons in Fireworks. Just a couple of design guidelines to help you out first:

• Choose vivid colors for your background. Linear or radial gradients is fine but don’t mix a lot of contrasting colors.
• For the icon design, use vector shapes or something from the Wingdings or Webdings font. Simple illustration is good while photos do not fit well.

Ok now that’s out of the way, let’s do this. I’m using Fireworks MX 2004 here but the instructions are pretty basic so any version will do.

1. First create your rounded square. You can either choose the Rectangle tool and just adjust the Rectangle roundness or you could use the Rounded Rectangle tool.

2. Now use a gradient fill. I’ll be using a linear gradient from #000066 down to #3366CC.

3. Let’s now do the “shine” effect for the icon. It’s practically the same as what we did on the web 2.0 badge tutorial. Create a copy of your box and then create an ellipse overlapping the top part.

I made the ellipse semi-transparent so you could see the box behind it.

4. Select both box and the ellipse then Modify > Combine Paths > Intersect. That should leave you with the top part of the box.

5. With the top part selected, change its gradient fill to white. Then change the bottom opacity of the gradient to 50.

6. Now that effect is done, it’s time to put in your icon. To make things interesting, I will use an icon that is bigger than the box and will put it in without resizing the image.

All I have to do is position Mario over my box…

7. Then cut it (Ctrl-X). Select my box and Edit > Paste Inside.

8. Now Mario’s inside the box! Let’s just add some finishing touches. Select the top part of your box (shine effect) and change its opacity to 50.

9. If you want to add a bevel effect, go ahead. Select your box, go to Effects > Bevel and Emboss > Inner Bevel. Change the bevel width to 2.

There you go! Your sparkling iPhone App icon. If you want to add more style if you’re going to use it on your site, I recommend the reflection effect.

• Creating a Web 2.0 style badge in Fireworks
• Creating shiny web 2.0 buttons with Fireworks
• Creating the “Aqua Sphere” effect in Fireworks
• Creating a Web 2.0 Shiny Text in Fireworks

Filed under: Fireworks Tutorials