🎉 Try Slides With Friends — Zoom Trivia, Live Polls, Icebreakers & more! Check it out →
Fireworks Tip: Create a Detailed Leather Button Using Only One Layer

Fireworks Tip: Create a Detailed Leather Button Using Only One Layer

In this tutorial we will show you how it's possible to create a detailed, fully scalable web button, using just one layer in Fireworks. This was originally an experiment with styles and Live Filters (Layer Styles), to see what is achievable. The benefits of this method, over layering objects on top of one-another, is that by saving the styles as a preset, they can instantly be applied to any other object in your document without the need to re-draw. Saving designers time, stress, and money!

Requirements

This tutorial is made using Adobe Fireworks CS5 (Some functionality used in this article may not be available in older versions). Photoshop Live Filters are used, so you will also need to have Photoshop installed on your system to take advantage of those. You will also need to download this seamless leather pattern.

Step 1: New Document

Create a new document in Fireworks and either set a canvas color or draw a rectangle to fill the whole document for the background layer. Here are the settings that I used for the background: fireworks tutorial

Step 2: Rectangle

Draw a new rectangle on the canvas (this is our "one layer"). fireworks tutorial

Step 3: Round Corners

Set the Roundness of the corners to about 10px. fireworks tutorial

Step 4: Gradient

Set the fill type to Linear Gradient and use the settings below for your gradient. fireworks tutorial

Step 5: Leather Pattern

For the Texture, select Other at the bottom of the list, and locate the leather pattern on your computer. fireworks tutorial

Step 6: Leather Pattern

Once you have located the leather pattern it should look like this. fireworks tutorial

Step 7: Dashed Border

Apply a stroke around the rectangle with a Basic Dash. fireworks tutorial

Step 8: Stroke

fireworks tutorial In the Filters panel, select Photoshop Live Effects and apply a stroke around the rectangle as shown below.

Step 9: Inner Glow

Apply an Inner Glow with the settings shown below. fireworks tutorial

Step 10: Inner Glow

Apply an Inner Glow with the settings shown below. fireworks tutorial

Step 11: Inner Glow

Apply an Inner Glow with the settings shown below. fireworks tutorial

Step 12: Drop Shadow

Apply a Drop Shadow with the settings shown below. fireworks tutorial

Step 13: Drop Shadow

Apply a Drop Shadow with the settings shown below. fireworks tutorial

Step 14: Add Noise

Apply the Add Noise.. filter with the settings shown below. fireworks tutorial

Step 15: Glow

Apply a Glow with the settings shown below. fireworks tutorial

Step 16: Inner Shadow

Apply an Inner Shadow with the settings shown below. fireworks tutorial

Step 17: Drop Shadow

Apply a Drop Shadow with the settings shown below. fireworks tutorial

Step 18: Finishing Touches

Obviously this is the bit where we can add extra layers to finish the button off, like a nice "Press Me" label fireworks tutorial

Comments

X

You've successfully logged in!