In this tutorial I will demonstrate that Fireworks as an underdog can create similar effects as Photoshop. Lately I have been obsessed with Fireworks for that fact of the matter that its much easier to use for the web than Photoshop is (at least for me). Fireworks is a powerful tool that can increase production time and make your life much easier. Here I have recreated the Fireworks CS4 icon with 10 steps. Sure you can do this is PS, but again this is just to show you that Fireworks is capable of the same effects, not all but most. Please leave any comments below if you’d like to share any shortcuts or technique with Fireworks. Thanks and hope you have found this tutorial useful. Enjoy!

Step 1

Fire up FW! Create a new document 500px x 500px.

Step 2

Create a new bitmap.

Step 3

Use the Gradient Tool (Keyboard Shortcut ‘G’).Then go to the bottom where the properties panel is located, find the color option box and select it. Use the colors: #FCE53D and #A88A28. These were sampled from the actual FW Icon.Then create your gradient on the newly created bitmap image.

Step 4

Press ‘T’ for the Type Tool or go to the panel, Type “Fw” and use the “Myriad Pro” font (as close I got to the actual Adobe Font). Make sure it’s Bold and the Hex color is ‘#373737′.When you’re done with that, select both the Text and the Gradient you created.

Step 5

Assuming you still have both selected, bring out the Align Panel (Window>Align) and select ‘Align Horizontal Center’ and ‘Align Vertical Center’. You should now have the text ‘Fw’ centered mathematically.

Step 6

Go to the bottom again to the Properties Panel and find the Plus (+) sign next to ‘Filters’ and click it.

Step 7

You should get a fly-out menu with options. Find ‘Shadow and Glow’>'Inner Shadow’.

Step 8

Set the Opacity of the Inner Shadow to 25%.

Step 9

Set the Opacity of the Drop Shadow to 7%

Step 10

The Inner Shadow and the Drop Shadow should now appear in your Properties Panel in the bottom on the document.Lastly, add a 1px border around the text and set the color to #F9E137. That should give it a more realistic Letterpress feel to it.

Properties

Your Properties Panel should have the same settings or similar to the image.One last note. I used ‘Custom Anti-Alias’ and set it to max so that the border on the type won’t look pixelated. For smooth effects.

Final

This is the Final outcome. Hope you have found this to be somewhat of a super easy tutorial on Fireworks. If you are trying to switch from Photoshop for the web works, then maybe you won’t miss Photoshop as much since it has similar but not all effects.

Related posts:

1. Graphic Design 101
2. 10 Essential Firefox Add-ons for Web Designers
3. 25+ Amazing Social Media Icon Sets
4. Daily Creative Inspiration #3
5. 30+ Beautiful firework photography

This post is tagged Fireworks, tutorial