Tutorial: Creating a 3D Icon/Logo in Fireworks in 10 Easy Steps

Here’s a little Fireworks CS5 tutorial for creating a 3D looking icon. I’m a big fan of Fireworks, have been for the last 8 years. I use it mainly for web design. It’s a great tool and I could never use Photoshop to do the things I do in Fireworks. But this post is not about the benefits of using Fireworks. It’s about building this 3d looking white slab with a slightly inset logo on it.

The Final Result

Creating a 3D Logo in Fireworks. Final Result.

Let’s get to it. You should start with a 600 x 600 pixels white canvas. Then I drew a brain using a pencil sketch I made as a guide. Nothing fancy, basic Pen (P) and Subselection Tool (A) manipulation of bezier curves. You could use another shape if you wanted. It helps if it looks thick and flat.

Step 1 - Pen Tool to create paths

Create a Rectange (U) about 456 by 356 in size. Set rectangle roundness to about 45%. Add a white-gray linear gradient to it. Top color is #F5F5F5, bottom color #E9E9E9. I call this shape “body” (you can double-click in the Layers palette and rename it).

Step 2 - Rounded rectangle

Put the logo on top of the “body” (I resized my logo to about 65% using the Numeric Transform Tool (Cmd+Shift+T on a Mac). Add a linear gradient to the logo. Mine was #079FF5 to #0695E5. Name it “logo main” if you want.

Duplicate the logo and move it backwards (Cmd + Down Arrow). Then move it 2 pixels down. I made this new instance of the logo a solid white. Select the blue logo again, duplicate it, move it backwards and give it a darker solid color (mine is #0179BA). This will give it an inset look. I named them “logo light” and “logo dark” respectively.

Step 3 - Combine path and rounded rectangle

Now duplicate the main rectangle (“body”), move it to the back, give it a horizontal linear gradient from #EAEAEA on the left, then #DDDDDD in the middle, then #EAEAEA again at the end. Manipulating the colors in the gradient should be easy: select color to change it, click under the gradient to add new color, drag color outside to remove it.

Move the new rectangle down by 60 pixels. Call it “body 3d 1″.

Step 4 - Duplicate rectangle

Duplicate the main rectangle again, move it backwards once, and make it a solid white. Move it down by 5 pixels. Call it “highlight 1″.

Step 5 - Linear gradient on rectangle

Duplicate the “body 3d 1″ and create a “body 3d 2″. Move it above “body 3d 1″ and give it a linear gradient like in the picture. I used black as both colors and the opacity goes from from 18% to 0% (18% is at the bottom of the rectangle).

Note on the gradient: to change opacity, select the swatch above the respective color and drag the slider. Check out the little image below for details:

The Gradient Tool in Fireworks

Step 6 - Add strong highlight

Create a shape like in the next picture and call it “highlight 2″. I created it by duplicating the “body” twice, moving the top one upwards 20 pixels and using Modify > Combine Paths > Punch from the menu, whith both of them selected. We then use the Subselection Tool (A) to drag the extremities a little bit towards the middle (I didn’t drag with the mouse, I use Shift+click to select 4 points on either side and then move them using the arrow keys). Make the resulting shape a solid white, give it a feather of 10 and move it slightly upwards.

Note on combining paths: you can create amazing shapes if you get creative with the Modify > Combine Paths menu. Unite, Punch and Intersect the hell out of those shapes! You’ll get interesting results. Check out the Path Panel as well (if it’s not already open, look for Window > Others > Path):

The Path Panel in Fireworks

Step 7 - Add soft highlight

Using the exact same technique, we create a slim shape to use as a black shadow. Position it right below the 3d body, like in the image:

Step 8 - Add a small shadow

Duplicate the body again, move it to the back, make it black and give it a 100% feather. It will be used as a big black back shadow. You could also skew the shape a little to make it look like the picture below:

Step 9 - Add a background shadow

Using a duplicate of the body and an elipse (plus the Modify > Combine Paths > Punch command) we create a glassy white highlight. Make it slightly smaller than the body and use a white gradient (I used opacity from 50% to 25%).

Step 10 - Add a glossy highlight

Note: if you need more help with combining paths, here’s how they work:

Path Manipulation in Fireworks: Union, Punch, Intersect

I then grouped the whole thing ande resized it to 50%. Then I added a background (linear gradient from #434343 to #2E2E2E) with a “Mesh” texture of 4% opacity.

Creating a 3D Logo in Fireworks. Final Result.

You could use another logo or object, different colors for the gradients and get the same (or better) results using other techniques. The lighting in this tutorial is obviously not realistic and could be improved a lot (different highlights and shadows). But I enjoyed making it :)

Let me know if you need any help in the comments below.

Also, if you’re interested in Fireworks alternatives, I created this same logo as a tutorial for Sketch.

Leave a Reply