Rusty Type Effects
with Joyce Evans
I thought I'd share this technique with you as I respond to a reader of my Fireworks 4 f/x & Design book writing in to ask how to make Type that looks rusty...
Thank you for writing... we always look forward to hearing from readers...
In this tutorial, you will use a pattern file and several effects to produce text that appears to be rusted. You can change the look by changing the pattern, the offset of the lower layer, and even the shadow. After you do this exercise, experiment by adding different effects to the edges of the text or try different strokes for a variety of results. Source PNG file and Rusty texture (Download Here)
To begin, follow these steps:
1 Open a new canvas (File|New) and give it a size of 400 pixels wide by 150 pixels high with a tan canvas color.
2 Select the Text tool and click on the canvas. Type the word "Rusty". The font used for this particular title is 96-point Whimsy TT and a color of black.
Note: If you open this file or any other that contains a font you don't have installed on your computer, a dialog box will open giving you the option to change the font or maintain its appearance. If you choose to maintain the appearance, the text will be converted to a bitmap image.
3 Fill & Load
This first text object is going to be used as the edge of the final or top text layer. To fill this bottom layer of the text, Open the Fill panel (Window|Fill) from the Fill category, choose Pattern. In the Pattern Name area, scroll down and choose Other. A dialog box will open allowing you to locate the pattern to fill with. Navigate to the location you saved rusty.png file; select it and click on Open.
4 Set the Lines:
In the Texture area of the Fill panel, choose Line-Horiz 1 and 100% for the Amount of Texture
5 Color & Texture
To bring back a bit of the color that was lost by applying the texture, open the Effects panel (Window|Effects), from the Add effects and presents drop-down menu, choose Adjust Color|Hue/Saturation.Enter the following values to obtain the result shown below:
* Hue: -13
* Saturation: -35
* Lightness: -37
6 Choose Edit|Clone.
You don't need the effects you added to the text for the top text object. To remove the existing effects from the cloned text, click on the Hue/Saturation Effect in the Effects panel and then click on the trash can icon to delete it.
7 Fill the Fill
In the Fill panel, change the Texture Amount to 0%
8 Place & Nudge
clicking on the up arrow three times and the left arrow three times. This placement allows the edge object to be seen a bit.
The amount you nudge the top text object will depend on the size of the text.
9 Stroke the Stroke
In the Stroke panel (Window|Stroke), from the Stroke Category, choose Charcoal and Soft for the Stroke name. The Tip size is 1. The image below shows the top text object moved with a stroke added.
10 Affect the Effects
From the Effects panel choose Adjust Color/Brightness And Contrast and enter a value of 20 in the Contrast area. Click on OK.
Note: You can select the top text object and change the Layer Blend Mode to Luminosity to achieve another nice effect by 150 pixels high with a tan canvas color.
11 Select both text objects. Shift+select or choose Select|Select All (Ctrl/Cmd+A).
12 Modify: Choose Modify|Group (Ctrl/Cmd+G).
13 The final touch
is to add a shadow from the Effects panel. From the Add Effects or choose a preset drop-down menu, Shadow And Glow|Drop Shadow.
Change the settings to the following:
* Distance: 10
* Softness: 6
* Opacity: 50%
And there you have it. Try different settings and experiment with the values I've given you for some other unusual effects.
Thanks for reading!
Joyce Evans is a web designer, Dreamweaver/Fireworks expert, and author of numerous books for web designers and developers. Visit Joyce at her web site: www.je-ideadesign.com copyright 2004, Joyce Evans
- Macromedia Studio MX 2004 Bible
- Dreamweaver MX 2004 Complete Course
- Macromedia Fireworks MX 2004 Zero to Hero
- Web Design Complete Course
Return to the Photoshop Department, or the Design Center Main Index
Participate in your Design CenterLots of fun and information for all... don't forget, any community is only as good as the participation of its members. We invite your tips, tricks, comments, suggestions and camaraderie.
- Ask for the DT&G Monthly: to receive DT&G newsletter each month, happenings in the Design Center and regular columns like the "Mail Bag" and "Cool Sites"
- SUBSCRIBE : to the Designers' CAFE email list
- Link to this site, and then show us the link. We'll send you any of our current door prizes, just for your trouble.
- SUBSCRIBE: to the Web Design & Review email list
- SUBMIT: a news link, new font, or product review
- SUBMIT: a link to a Photoshop web site