Mockups are all the rage. They're easy to edit and a major time-saver. In this enamel pin mockup tutorial, you will learn how to create a smart object in Adobe Photoshop, apply various layer styles to give your pin mockup a 3D effect, and finish it off with a drop shadow to give your enamel pin mockup a realistic result.
Before we jump into the gold enamel pin mockup, allow me to introduce you to this fantastic enamel pin design that's ready to download. You can find dozens of cool glossy pin mockups ready to use on Envato Elements!
Do you prefer video tutorials instead of written guides? The Envato Tuts+ YouTube channel is for you! There you'll find hundreds of interesting tutorials, like this new video on how to make an enamel pin mockup in Photoshop:
What You'll Learn in This Gold Enamel Pin Mockup Tutorial
- How to create a smart object in Photoshop to make a button badge mockup
- How to apply various layer styles to make a glossy pin mockup
- How to add a drop shadow to a pin template PSD
What You Will Need to Create a Glossy Pin Mockup
1. How to Create a Smart Object in Photoshop
Step 1
Let's learn how to make metallic enamel pin mockups! Open the Blue Jeans Texture photo in Photoshop. Save this file as EnamelPinMockup.psd. Grab the Rectangle Tool (U) and make a square using these dimensions: 2710 x 2535 px. Duplicate this square twice (right-click > Duplicate Layer). Name each layer Icon, Symbol, and Words.
Step 2
Select each layer one at a time and convert each to a smart object, right-click > Convert to Smart Object. To keep everything organized, let's color-code each layer by right-clicking and selecting a color from the list.
2. How to Make a Metal Badge Mockup
Step 1
Now let's focus on the enamel pin design. Enamel pin making isn't complicated if you follow this guide. Double-click inside the Symbol smart object layer. This should open a new file window. Make the Symbol background layer invisible by selecting the eye icon. Open the Logo EPS file in Adobe Illustrator. Copy and paste (Command-C and Command-V) this symbol into your Photoshop smart object file.
Step 2
Select the symbol you just pasted and right-click > Group From Layers. For this tutorial, I will name the Group: Bevel and Emboss. Double-click this group and apply a Bevel & Emboss layer style with the following settings.
Structure
- Style: Inner Bevel
- Technique: Smooth
- Depth: 261%
- Direction: Up
- Size: 56 px
- Soften: 0 px
Shading
- Angle: 30°
- Altitude: 30°
- Use Global Light (checked)
- Gloss Contour: Ring
- Highlight Mode: Screen | Opacity: 78% | #
FFFFFF - Shadow Mode: Multiply | Opacity: 0%
Select OK. Save this file by pressing Command-S on your keyboard.
Step 3
Go to the EnamelPinMockup.psd window and with the Symbol layer selected, duplicate it twice by right-clicking > Duplicate Layer. You can name these additional layers Symbol 2 and Symbol 3.
Step 4
Make the other two layers (Symbol 2 & 3) invisible while we work on the Symbol layer and apply these layer styles by double-clicking the layer. Let's start with Bevel & Emboss.
Structure
- Style: Outer Bevel
- Technique: Smooth
- Depth: 209%
- Direction: Up
- Size: 8 px
- Soften: 16 px
Shading
- Angle: 30°
- Altitude: 30°
- Gloss Contour: Linear
- Highlight Mode: Screen | 100%
- Shadow Mode: Multiply | 97% | #
574418
Contour
- Cone
- Range: 50%
Step 5
Apply a Stroke.
Structure
- Size: 38 px
- Position: Inside
- Blend Mode: Hue
- Opacity: 100%
Fill Type: Gradient
- Gradient: #
b58924| #c8a85e| #d1c061| #b58924 - Style: Linear
- Angle: 90°
- Scale: 100%
Step 6
Apply an Inner Shadow layer style.
Structure
- Blend Mode: Multiply #
000000 - Opacity: 82%
- Distance: 57 px
- Choke: 0%
- Size: 29 px
Quality
- Contour: Linear
- Noise: 0%
Step 7
Apply an Inner Glow layer style.
Structure
- Blend Mode: Color Dodge
- Opacity: 67%
- Noise: 5%
- Color:
#e6fae2
Elements
- Technique: Softer
- Source: Edge
- Choke: 8%
- Size: 76 px
Quality
- Contour: Linear
- Range: 50%
- Jitter: 0%
Step 8
Apply a Satin layer style.
Structure
- Blend Mode: Color Burn
#a1a1a1 - Opacity: 83%
- Angle: 90°
- Distance: 208 px
- Size: 213 px
- Contour: Linear
Step 9
Apply an Outer Glow layer style.
Structure
- Blend Mode: Multiply
- Opacity: 50%
- Noise: 0%
- Color:
#423a0b
Elements
- Technique: Softer
- Spread: 0%
- Size: 49 px
Quality
- Contour: Gaussian
- Range: 50%
- Jitter: 0%
Step 10
Now let's apply some noise to our Symbol layer. Go to Filter > Noise > Add Noise.
- Amount: 8%
- Uniform
- Monochromatic
3. How to Make a 3D Enamel Pin in Photoshop
Step 1
Our enamel pin making project is halfway there! Take the Symbol 2 layer and make it visible by selecting the eye icon. Place it beneath the Symbol layer. Apply a Drop Shadow layer style.
Structure
- Blend Mode: Normal |
#354e15 - Opacity: 100%
- Angle: 30°
- Distance: 54 px
- Spread: 0%
- Size: 0%
Quality
- Contour: Linear
- Noise: 0%
Step 2
Right-click the Symbol 2 layer and select Group from Layers, and name this group Drop Shadow.
Step 3
Apply these layer styles to the Drop Shadow group layer by double-clicking:
Structure
- Style: Inner Bevel
- Technique: Smooth
- Depth: 636%
- Direction: Up
- Size: 81 px
- Soften: 0 px
Shading
- Angle: 142°
- Altitude: 5°
- Gloss Contour: Ring
- Highlight Mode: Screen | Opacity: 74% |
#ffffff - Shadow Mode: Multiply | Opacity: 56% |
#171718
Step 4
Apply an Inner Glow layer style to the Drop Shadow group layer.
Structure
- Blend Mode: Color Dodge
- Opacity: 50%
- Noise: 0%
- Color:
#ffffff
Elements
- Technique: Softer
- Source: Edge
- Choke: 0%
- Size: 47 px
Quality
- Contour: Linear
- Range: 50%
- Jitter: 0%
Step 5
Apply a Satin layer style to the Drop Shadow group layer.
Structure
- Blend Mode: Linear Burn |
#5a5a5a - Opacity: 50%
- Angle: 162°
- Distance: 166 px
- Size: 170 px
- Contour: Linear
Step 6
Apply a Gradient Overlay layer style to the Drop Shadow group layer.
Gradient
- Blend Mode: Normal
- Opacity: 100%
- Gradient:
#b78b2f|#e6b441|#ba8e2e|#fff5b9|#bb8f3e - Style: Linear
- Angle: 63°
- Scale: 100%
Step 7
Your symbol should now look similar to the image below.
Step 8
Select the Symbol and Drop Shadow group layer and right-click > Group From Layers. Name this new group Symbol 3D and apply these layer settings. Let's start with Inner Glow.
Structure
- Blend Mode: Color Dodge
- Opacity: 36%
- Noise: 5%
- Color:
#f0f2f0
Elements
- Technique: Softer
- Source: Edge
- Choke: 8%
- Size 7 px
Quality
- Contour: Linear
- Range: 50%
- Jitter: 0%
Step 9
Apply a Satin layer style.
Structure
- Blend Mode: Color Burn |
#a1a1a1 - Opacity: 46%
- Angle: 90°
- Distance: 166 px
- Size: 170 px
- Contour: Linear
Step 10
Apply a Gradient Overlay layer style.
- Blend Mode: Multiply
- Opacity: 100%
- Gradient:
#d7d7d7|#ffffff - Style: Linear
- Angle: 90°
- Scale: 100%
Step 11
Take the Symbol 3 layer and move it beneath the Symbol 3D group. Apply a Color Overlay.
Color
- Blend Mode: Normal |
#000000 - Opacity: 100%
Step 12
Now let's apply a Gaussian Blur, so go to Filter > Blur > Gaussian Blur. Use a Radius of 5 pixels.
Step 13
Apply a Motion Blur. Go to Filter > Blur > Motion Blur. Use an Angle of -37° and a Distance of 197 pixels. Select OK.
Step 14
Using the Move Tool (V), move the Symbol 3 layer downward and to the right like the image below.
Step 15
Select the Symbol 3D group layer and the Symbol 3 layer. Press Command-T on your keyboard. Select OK if a smart filters dialog box pops up. Take your cursor and hover around the edge of the transform boxes. Now, rotate your pin about -6° to the left. Press Return/Enter.
Step 16
Repeat these same steps using the Words (Ginchiest) and Icon (angry bear) smart object layers by pasting the image, duplicating the layers, applying the layer styles, and making the drop shadow to create your pin template PSD.
All Done! Your Enamel Pin Design Is Finished!
You've just finished this tutorial on how to make an enamel pin mockup. Feel free to adjust these settings to get the perfect button mockup. Now you know how to start making enamel pins from scratch in PSD! Envato Elements is a great resource to use if you're looking for button mockups, lapel mockups, and pin metal mockups.
5 Pin Mockups So Good They Seem Realistic
Next up, we'll see some cool gold enamel pin mockups and glossy pin mockups from Envato Elements. These resources are great if you don't have time for making enamel pins from scratch and you need one ready to use!
1. Metallic Enamel Pin Mockup (PSD)
Consisting of silver and gold versions, this pin button mockup PSD template is perfect for showcasing your designs. Both enamel pin design templates come in one easy-to-edit Photoshop file.
2. Metal Pin Mockup Scene (PSD)
Rock on with this set of pin metal mockups. The great thing about this enamel pin design template is that every part of this scene can be altered and adjusted.
3. Enamel Pin Mockup (PSD)
Looking for a simple enamel pin template mockup? This easy-to-use PSD will have your button mockups standing out from the crowd.
4. Simple Enamel Pin (PSD)
Fan of metallic enamel pin mockups? Even though the title says 'simple', this collection of lapel mockups is fancy. Sko4 does an amazing job at executing these elaborate enamel pin template mockups, with various line styles to choose from.
5. Sweatshirt Enamel Pin Mockup (PSD)
This pin button mockup PSD template features not only awesome pins but also a cool sweatshirt to place your pins on. Put the finishing touches on your design with this awesome button badge mockup.
Yearning for More?
We've got you covered. Check out these vital resources to enhance your skillset.
How to Create a Wood Engraved Logo Mockup in Adobe Photoshop
How to Create a 3D Black and Gold Text and Logo Mockup
How to Make a Mockup in 5 Easy Steps
How to Create an iPhone Mockup Vector
How to Make a Face Mask Mockup Template in Photoshop (PSD)
How to Create a Photo-Realistic Wax Seal Mockup With Adobe Photoshop
41 Best Pin Mockups (Enamel, Metal, Button, PSDs, Maker)
By
