Real-world Gloss Effects in Fireworks

The internet — particularly its Web 2.0 version — is a very glossy place. In fact, I think if far-away aliens ever eavesdropped on our wireless internet transmissions, they’d conclude that humans must live in a hard world of polished marble, wet glass and high-gloss plastic.

While the gloss effect is probably getting a little ‘long in the tooth’, the main problem I have with it is the overall boring perfectness of the reflections. On the web, wet floors are always laser-cut mirrors, and glossy buttons always seem to exist in a perfect, evenly-lit vaccuum.

In the dirty, scratched and smudged real world, wet floors have dull spots and distortions in them and glossy surfaces warp, blur and reflect the patchy, organic world they inhabit.

Without wanting to wind the fashion clock back to the ‘distressed 90’s look’, you can give your reflections a bit more character without too much more work.

The Method

1). Let’s start with a rounded rectangle — it’s a button but it could just as easily be a nav bar, a banner or a content panel — and give it a vertical, linear red gradient. I’ve given it a subtle shdow too. This will be the edges of our button.

2). Next we will copy make a copy of that shape on top and and scale it down just a little. This will be the flat surface of our button.

3). Next we’ll take that upper shape back to a more basic white-to-black gradient and angle give it a slight angle. The anlge doesn’t matter, as long as it’s off the perpendicular.

4). Now if we switch the upper shape channel to ‘Screen’ (in the Layers panel) and position it centrally, we only get the light parts of the image showing, giving us the impression of a clean, highly-polished surface. I’ve moderated the gloss a little by lowering the opacity of the upper rectangle.

5). Alrighty, this is ok, but it’s exactly the kind of hyper-perfect gloss I talked about earlier. It needs a healthy dose of imperfection.

Go to your favorite stock imagery site and find an image with a strongly contrasting horizon (example:straymuse). The image contents don’t matter much otherwise, but we need a strong organic skyline. There is some trial and error in finding the right shot.

6). Bring the horizon image into Fireworks and take it’s opacity down to about 50%. Next position it centrally over your button and scale it down so the horizon is nicely framed by the button edges.

7). We’re getting close. Next we need to COPY the upper rectangle to the clipboard – BUT don’t paste it anywhere.

8). Select your horizon image again and go to ‘Edit/Paste as Mask‘. This will mask your horizon image down to the shape of our button surface.

9). We have a viable reflection now but the effect still looks a little too strong for me. We’ll tone it down a touch. First switch the channel of the horizon image to ‘Linear Dodge’ to keep only the light parts of the image which naturally reflect the most light.

Next we’ll add a slight Gaussian Blur — most reflections aren’t perfect mirrors, and a touch of blur will only remove the detail from the photo that we don’t need anyway.

And finally we’ll take the opacity down to around 30% — but this is really a personal preference decision. Keep in mind however you are probably going to have to place text on top, so legibility is a consideration.

Here’s the final graphic. The horizon image is barely recognizable but it still adds a really organic feel to the result. There are, of course, quite a few variables involved — layer opacity, channels and filter setting — and plenty of scope to tune the image to your liking.

I’ve kept this short and sweet, but if you’re looking to play around with the working PNG file, you can download a zipped version here.

Related posts:

1. Make A Big, Beautiful Call-To-Action Button In Photoshop Yesterday, we looked at some guidelines for creating a call...
2. Advice: Just Finish It! Ideas are only worth as much as their implementation, but...
3. Dreamweaver CS4: A Powerful Tool for an Imperfect World With the just-released Dreamweaver CS4, Adobe has conceded that web...
4. The Non-Virtual World of Freelancing: In-Person Meetings Reaching out to local businesses can be a good way...
5. Two Quick Illustrator Text Effects Jennifer shows you how to create two text effects in...

This entry was posted on Monday, April 21st, 2008 at 11:49 am, contains 776 words, 15 images, and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed. The views and opinions in this blog post are those of its author.