Create a Scrap-booking Button in Photoshop

| By Jess
Basic run-through on creating scrap-booking/epoxy-style buttons in Photoshop

A little throwback to the Web 2.0 days. A quick and dirty basic guide on how to create a scrap-booking button in Photoshop.

During my final two quarters in college, I created a series of scrap-booking buttons in Photoshop for popular social media sites. Essentially, the buttons I created were supposed to look like metal-ring/epoxy buttons that were popular for scrap-booking and other art projects back then, as well as bringing in elements of Web 2.0 with the reflections and gradients.

At that time, there was still a grunge element present in web design trends (before the stuffy/not-fun/corporate trend we have now had a chance to set in), and my approach to web design combined both elements by introducing scrap-book style buttons and other elements. Some of my efforts are still available for viewing on DeviantArt, and that’s what has spawned this tutorial 10 years later. It should be noted that this is an improved rewrite of the tutorial I posted on DeviantArt just 3 years ago.


Scrap-booking Buttons in Photoshop

A quick run-though on the basics of creating scrap-booking/epoxy-style buttons in Photoshop.

Scrap-booking button ring

Metal Ring for Your Scrap-booking Button

Start by selecting the Ellipse Tool and draw a circle with a diameter of roughly 65px. Color doesn’t particularly matter because we’ll be using Layer Styles to change the appearance.

In Layer Styles, we’ll be using Drop Shadow, Bevel and Emboss, Satin, Color Overlay and Stroke. Use the following settings for each of the styles:

Bevel & Emboss

Style: Inner Bevel
Technique: Smooth
Depth: 75%
Direction: Up
Size: 20px
Angle: 125 degrees (leave Use Global Lighting checked)
Attitude: 65 degrees
Gloss Contour: Ring (Preset)
Highlight Mode: Screen / 100%
Shadow Mode: Normal / 65%


Contour (Under Bevel & Emboss)

Modify Contour by clicking on the preset and then dragging the left corner to 70%, and then change Range to 22%


Drop Shadow

Blend Mode: Multiply (Black)
Opacity: 50%
Angle: 125 degrees
Distance: 0
Spread: 21%
Size: 11px
Contour: Gaussian (Preset)
Noise: 0

Color Overlay

Blend Mode should stay on Normal
Change color to Black
Set Opacity to 100%


Stroke

Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 90%
Color: 51, 51, 51


Satin

Blend Mode: Screen (White)
Opacity: 100%
Angle: 150 degrees
Distance: 11px
Size: 11px
Contour: Custom (See picture)

You should have a circle that now resembles this:

How the ring should look before the subtraction mask is applied

Make sure that you are on the same layer path, and using the ellipse tool again, create a circle that is 10px smaller than the first one and then center it inside the other circle. While the new path is selected, press the – key to subtract from the outer shape area. Now, you should have a ring that looks like this:

Completed metal ring
Newly created ring
Create an epoxy appearance.

The “Epoxy” portion of Your Scrap-booking Button

Start a new circle path layer above the one we just created. Make sure that the new path is slightly bigger than the inner circle of the ring without showing on the outside.

Once again, we’ll use Layer Styles to adjust the appearance:

Fill Opacity: 0%

Bevel & Emboss

Style: Inner Bevel
Technique: Smooth
Depth: 100%
Direction: Up
Size: 15px
Soften: 3px
Angle: 125 degrees
Altitude: 65 degrees
Gloss Contour: Linear (Default)
Highlight Mode: Screen (White)
Opacity: 100%
Shadow Mode: Normal (Black)
Opacity: 0


Contour (Below Bevel & Emboss)

Contour: Half Round preset
Range: 90%

Inner Shadow

Blend Mode: Multiply (Gray 144, 144, 144)
Opacity: 85%
Angle: 125 degrees
Distance: 15px
Choke: 25%
Size: 31px
Contour: Linear preset
Noise: 0


Inner Glow

Blend Mode: Multiple
Opacity: 50%
Color: Gray 168, 168, 168
Technique: Softer
Source: Edge
Choke: 0
Size: 11px
Contour: Linear preset
Range: 50%
Jitter: 0

Once you’re through all of that, your button should now look like this:

Button is almost completed.

Icon of Choice

The icon can be anything you want it to be. If you want, you can do a quick search on Google, Bing or Yahoo for the vector logos of your favorite social networking sites to use. For the example, we’ll just use one of the custom shapes that comes with Adobe Photoshop CS4.

Find an icon of your choice and use it!

Adding the Finishing Touches to Your Scrap-booking Button

Now, we can stop with what we have, or you can continue on and add the reflections. The reflections use a combination of paths and gradient layers.

Once again, it’s up to you to decide how the reflections should look. Yes, the buttons can be any color you choose. You can see finished examples here. Have fun!

Finished button

And that’s it!

Related Photoshop tutorials

Metal/Wood Grain Tutorial

Posted on by Jess | Categories: Photoshop .

Comments & Pingbacks

Leave a Reply

Your email address will not be published. Required fields are marked *