Tutorials Navigation

Tutorials :: New :: Popular :: Top Rated

Tutorials: 18,326 Categories: 12

Total Tutorial Views: 41,428,838

Adobe Fireworks - Making Simple 3D text

Tutorial Name: Adobe Fireworks - Making Simple 3D text  

Category: PC Tutorials

Submitted By: MG4

Date Added:

Comments: 0

Views: 6,192

Related Forum: PC Building Forum

Share:

Step 1 Get the font and convert it to paths

We need a bold and rounded font. In this tutorial I used Anja Eliane, free font available from dafont.com.

Once you got the font, type the word BOOM with size 150:



Right-click on the text and select Convert to paths or go and select the same item from Text-menu. Ungroup the paths (from Rightclick or Modify-menu):



Select the letter B and give it a linear gradient fill from #ccc to #666. Set fill-edge to Feather and change feather-value to 1. Add 4px Basic stroke (go for Soft Rounded) with color #333:



Step 2 Add Filters.

Easy so far? Lets bring out the filters. Add Shadow & Glow / Inner Shadow with color #fff, 4px distance, 100% opacity, 10px softness and 270 angle:



Nice, we got some highlight, but we need more. Add another Inner Shadow with color #000, 5px distance, 100% opacity, 10px softness and 90 angle.



Now we have made simple Inner Bevel effect without actually using Inner Bevel. You can skip those 2 inner shadows and just use one Bevel & Emboss / Inner Bevel (smooth preset with default values is safe choice).

Lets bring out the 3D-factor. Add Shadow & Glow / Solid Shadow with 130 angle and 20px distance:



Cool, but be gentle with the angle.

Now lets get rid of the grey. Add Adjust Color / Hue/Saturation and adjust the saturation value to +50:



Now you got red B letter. If we had done the red color with normal fill, we would not have the solid shadow -filter shown as the same color.

Pro tip: Alternative and more accurate method is to use Adjust Color /Color Fill with #f00 and bending mode at Fuzzy light.

The letter needs more contrast. Go to filters-menu Adjust Color and select Brightness/Contrast and hit Contrast to 20:



Step 3 Fix object order

Select the letter B, copy it and select letters OOM. Go to Edit-menu and select Paste Attributes. Now each letter have the same looks:

Now youll notice that there is something wrong the picture. M is over last O and so on. We need to change order of the objects. Select letter M and right click (or open up Modify-menu) and select Arrange / Send to Back. Now select letters O M and send them back too. Do the same with letters O O M one more time and we have the right object order:



Step 4 Rotate letters in funny positions

Select Scale-tool and carefully rotate each letter in some funny angle:



Step 5 Adjust Funny Colors

Select one letter and check from the filters-menu the previously added Hue/Saturation. Check the image above and adjust the HUE in the same value. Repeat this same operation for each letter. Here is some example values:


Step 6 Adjust the Angle

Select one letter and check from the filters-menu the previously added Solid Shadow. Check the image above and adjust the Angle in the same value. Repeat this same operation for each letter, check out this example:


Boom and you are done!

Conclusion

I had some doubts that this tutorial is too simple and people are going to throw rotten shoes at me. After intense googling, I only could millions of 3D-text tutorials for Photoshop and not a single this kind of basic tutorial for Fireworks. Weird, huh?

I had idea of releasing bunch of 3D-text-styles, but then decided to whip up this tutorial and show how simple the process actually is (note: you can actually save this as a style). You can use this type of 3D text effect in things such as headers, illustrations, ad-banners etc. Just remember to be creative.

Ratings

Current rating: 1.67 by 3 users
Please take one second and rate this tutorial...

Not a Chance
1
2
3
4
5
6
7
8
9
10
Absolutely

Comments

"Adobe Fireworks - Making Simple 3D text" :: Login/Create an Account :: 0 comments

If you would like to post a comment please signin to your account or register for an account.