Realistic 10-step 3D simulation with reflection in Fireworks 8

Posted in Resources > 3D effects by Lucian

This tutorial will show how a realistic 3d simulation, such as text, could be created in Fireworks 8, a 2d software.

Our first guest post is written by Lucian. Enjoy!

Getting started with our 3D simulation

1. Create a new file and have a rectangle with a gradient fill be the background.

3D simulation

2. Add some text. Be sure the font is thick/bold so the 3d effect will look better.

3. Give the text a perspective using the Distort tool or other method of choice. In this tutorial I will give the text an isometric perspective by first rotating it 45 degrees either way (holding Shift while rotating it), and subtracting 50% of its new height.

3D simulation

4. Now that we gave it a perspective, you can either choose to add an outline or not. I added a 2px white outline.

3D simulation

5. For better results and individual effects, we will convert the text to paths (Right-click > Convert To Paths) and ungroup the new group created.

3D simulation

6. Now we are ready to add some extrusion to the text. With all paths selected (step 5), add a Solid Shadow effect found under Shadow and Glow option in the Live Filters menu in the Propeties panel (bottom of window). The effect should have a value of 270 degrees angle (depending on the perspective), and the distance is up to you. Make sure you check the Solid Color box and change the color to a slightly darker gray than the white of our outlines, such as #EFEFEF.

NOTE: Rearrange the order of the letters after adding the Solid Shadow effect (in Layers panel or Ctrl+Up/Down) such as the closest letter to you is on the top layer and the farthest is on the bottom one.

3D simulation

7. This step is optional but it gives a touch of lightning to the scene and reinforces the 3d perspective. Having all letters selected, add a Inner Shadow effect to all of them (found under Shadow and Glow menu). Give this effect the following values: distance-10, opacity – 20%, softness-20, and angle-90 degrees (adjustments may be necesary depending on size, perspective, and Solid Shadow distance of the text).

The text should look like this:

3D simulation

Now that we have the 3d text created, we can group its letters for easier handling.

8. It is time to add a reflection into the floor. Duplicate the text, send it below the actual extruded text (in Layers panel or Ctrl+Up/Down) and move it down wherever you want the reflection. Reflecting the bottom face of the original 3d text, I recommend making the reflection darker by changing its brightness using the Brightness/Contrast filter found under Adjust Color in the Live Filters menu ( I reduced the brightness to -50 ). Take the opacity of the reflection down to about 10%.

Here is the outcome:

3D simulation

9. The final touch towards the 3d effect is adding a shadow casted by the extruded text onto the floor. Once again we will duplicate the text, ungroup the copy and remove both the Solid Shadow and Inner Shadow effects from the letters. Now we can regroup it and using the Color Fill option found under the Adjust Color menu, we give the group a black fill.

10. Place the shadow’s layer between the extruded text layer the and reflection layer. Its position on the canvas should be half way between the reflection and the extruded text (where all shadows should be) as shown in the below image . Now give the shadow a Gaussian Blur with a radius of 5, and reduce the opacity to 50%.

There you have it.

For more examples of 3d simulation in Fireworks, please visit http://dFever.deviantart.com .

Lucian Dragomir

Author: Firetuts.com

Website: firetuts.com

Get Source
There're 30 comments for this post.
  1. Can this effect be created with MX 2004?

    I don’t see the live filters menu under the shadow and glow.

    How could the same effect be accomplished on FW MX 2004?

    Thanks,

    FayeC

  2. The shadow and glow effect IS a filter. Just add a drop shadow with the configurations specified above. Anything to add, Lucian?

  3. My shadow on the solid shadow doesn’t look like this. The text on this looks broken into separate pieces, which looks realistic.

  4. As Matt said, it’s a new effect for FW8. However, if you have MX ’04 you can always try the technique many use in PS : while holding Alt, press Up repeatedly. This will give you an extrusion effect, by duplicating the selected shape over and over again. An optional Inner Shadow could be added to the grouped copies afterwards.

  5. @Jimmy: Check step 6 above. Apply the inner shadow to each letter ( you can select all of them) while they are ungrouped (step 5)

  6. Amazing what you can do when you lift the lid huh? Thanks for sharing, the results are brilliant -look like candy letters on my machine look forward to using this technique on some sites in the future. A1!

  7. Very creative use of the Solid Shadow filter! And I like the attention to detail (the reflection and soft shadow add to the realism of the effect). Personally, I’d push the Inner Shadow back a bit to it doesn’t go on top of the letters’ faces, but that’s just me.

    Keep up the great work! It’s always good to see Fireworks users coming up with quality tutorials. :)

  8. timmahh on said:

    Awesome tutorial! It made me realize that fireworks has more capacity for greater visual effects other than a few blurs and drop shadows. Thanks!

  9. This article regarding ic 10-step 3D simulation with reflection in Fireworks 8 | Firetuts.com sounds well, but how everything is related together?

  10. Carlybee on said:

    I really enjoyed this. I think i learned a lot from this tutorial because austin showed me how to do it.

  11. Pingback: Text design inspirations + photoshop tutorial | Webselecta

  12. Pingback: 【006】Fireworksのチュートリアルをしてみる | 新米WEB家ブログ|Muracchi.com

  13. Pingback: TUTORIAL, CREA UN TEXTO 3D EN FIREWORKS… « DISEÑO, ARTE Y MAS

  14. Pingback: fireworks チュートリアル | WebLab

  15. Pingback: [Fireworks] 手軽に3Dテキストの作成 | WEB-LABORATORY

  16. Pingback: [Fireworks] 手軽に3Dテキストの作成 | WEB-LABORATORY