Pinback button mockups are a great way to advertise your new products. Create photo-realistic mockups of your design in seconds and share them on social media. With this in-depth tutorial, you'll learn how to create smart objects, apply layer styles, and add textures.
Looking for a shortcut? This set of button mockups is a great way to display your designs. Get noticed and take your badge mockup to the next level. It's simple: just upload your design and get a beautiful button pin design in seconds!
What You'll Learn in This Button Pin Design Tutorial
- How to create a smart object
- How to apply layer styles in Photoshop
- How to apply shine and texture to a button mockup
What You Will Need
1. How to Create a Smart Object
Step 1
Open the jean pocket image in Photoshop. Use the Crop Tool (C) and adjust the image so that it's square.
Step 2
Use the Ellipse Tool (U) and make a circle that's 1191 px wide. Name this layer 'Lemon' in the Layers panel and change the color to #6db6e4.
Step 3
Right-Click the Lemon layer and select Convert to Smart Object. Double-Click inside the Lemon thumbnail in the Layers panel. A new window should appear showing only the circle you just created. Open the lemon vector file in Adobe Illustrator. Copy (Command-C) and paste (Command-V) the lemon icon from Illustrator into the Photoshop smart object. Save (Command-S) the file so it updates in our main file.
2. How to Apply Layer Styles in Photoshop
Step 1
Go back to our main file. Select the 'Lemon' layer and drag it to the folder icon (highlighted in red below) in the Layers panel to place it in a group. Name the layer 'Lemon Button.'
Step 2
Double-Click the Lemon Button layer and add several layer styles, starting with Bevel & Emboss:
- Style: Inner Bevel
- Technique: Chisel Soft
- Depth: 1000%
- Direction: Up
- Size: 68 px
- Soften: 16 px
- Angle: -111
- Altitude: 37°
- Gloss Contour: Linear
- Highlight Mode: Vivid Light -
#ffffff- Opacity 83% - Shadow Mode: Multiply -
#000000- Opacity 0%
Step 3
Add a Contour layer style:
- Contour: Cone
- Range: 45%
Step 4
Add an Inner Shadow layer style:
- Blend Mode: Multiply -
#000000 - Opacity: 69%
- Angle: -111°
- Distance: 14px
- Choke: 0%
- Size: 196px
- Contour: Cone
- Noise 7%
Step 5
Add an Inner Glow layer style:
- Blend Mode: Overlay
- Opacity: 34%
- Noise: 0%
- Color:
#000000 - Technique: Softer
- Source: Center
- Choke: 0
- Size: 250px
- Contour: Gaussian
- Range: 50%
- Jitter: 0%
Step 6
Add a Satin layer style:
- Blend Mode: Color Burn -
#5e5e5e - Opacity: 67%
- Angle: -14°
- Distance: 246px
- Size: 250px
- Contour: Half Round
Step 7
Add a Gradient Overlay layer style:
- Blend Mode: Multiply
- Opacity: 100%
- Gradient:
#d7d7d7-#ffffff - Style: Linear
- Angle: 90°
- Scale: 100%
- Method: Perceptual
Step 8
Add a Drop Shadow layer style:
- Blend Mode: Multiply -
#000000 - Opacity: 61%
- Angle: 90°
- Distance: 42px
- Spread: 22%
- Size: 51px
- Contour: Linear
- Noise: 0%
Step 9
Add a second Drop Shadow layer style:
- Blend Mode: Multiply -
#000000 - Opacity: 60%
- Angle: 90°
- Distance: 89px
- Spread: 27%
- Size: 73px
- Contour: Rounded Steps
- Noise: 0%
3. How to Apply Shine and Texture to a Button Mockup
Step 1
Create a new layer above the Lemon Button group and name it 'Shine' in the Layers panel.
Step 2
Grab the Pen Tool (P) and make a curved path that looks similar to the image below.
Step 3
Right-Click the path and select Make Selection. Change the Feather Radius to 0 pixels and the Operation to New Selection. Select OK.
Step 4
Fill the active selection with #ffffff using the Paint Bucket Tool (G).
Step 5
Select the Shine layer and change the Blending Mode to Overlay.
Step 6
Go to Filter > Blur > Gaussian Blur, and change the Radius to 3.5 pixels.
Step 7
Open the texture file in Photoshop. Drag and drop it into our main file. Resize the image to 50%.
Step 8
Make a selection from the Lemon layer by pressing Command and the Lemon thumbnail. You should now have an active selection. Create a vector mask (highlighted in red).
Step 9
Change the Blending Mode of the Texture layer to Soft Light and the Opacity to 94%.
Step 10
Select the Texture, Shine and Lemon Button layers and place them in a group. Name this folder 'Button #1'.
Step 11
Duplicate (Command-J) the Button #1 group twice. Name them Button #2 and Button #3. Select the Lemon layer from the Button #2 group and Right-Click > New Smart Object via Copy. Change the name of this layer to 'Heart.'
Step 12
Double-Click the Heart smart object thumbnail. Open the heart emoji icons in Illustrator and copy (Command-C) and paste (Command-V) it into the smart object. Create a circle using the Ellipse Tool (U). Select the Type Tool (T) and type "You Are Enough" using the Malto font, 307 pt, and #fffefe.
Step 13
Double-Click the button background and apply a Gradient Overlay:
- Blend Mode: Normal
- Opacity: 100%
- Gradient:
#7776ff-#ae2cf1 - Style: Linear
- Angle: 90°
- Scale: 100%
- Method: Perceptual
Step 14
Save (Command-S) the smart object. Button #2 should have updated to the new design. Select the Lemon layer from the Button #3 group and Right-Click > New Smart Object via Copy. Change the name of this layer to 'Dog.' Double-Click the Dog smart object thumbnail. Open the dog icons in Illustrator and copy (Command-C) and paste (Command-V) it into the smart object.
Step 15
Change the button background color to #83e46d.
All Done!
Thank you for following my pin PSD mockup tutorial. You learned several Photoshop skills like how to create smart objects, apply layer styles, and add textures and highlights. Use these same techniques to create your own badge mockups.
5 Download-Worthy Pin PSD Mockups
The best way to get noticed is through design. For creatives, pinback button mockups provide an easy way to create a customized presentation, display your work, or launch a new product.
1. Pin Mockup (PSD)
Have we got a pin mockup for you! Create a stunning presentation in seconds with this pinback button mockup template. Add your artwork, customize your layout, and export the finished design.
2. Badge Mockup (PSD)
When you need to share your ideas, show off your work or get a project across the finish line, you should be able to do it in style. That's where this pin mockup template comes in handy.
3. Realistic Pin Button Mockup (PSD)
The pin button mockup template is the perfect way to present your design ideas. Show off the front and back of your pin mockup today.
4. Button Badge Mockup Set (PSD)
Looking for a way to showcase your creativity? It's great for any occasion, whether you're looking to use this button badge to promote your business, or just create something cool. This template is designed with simplicity in mind and is fast and easy to use, so jump right in and make something amazing!
5. Glossy Pin Button Mockup (PSD)
Utilize this photo-realistic pinback button mockup to display your share-worthy designs with the world. With seamless integration into Adobe Photoshop, this template can help take your artwork and designs to the next level.
But Wait, There's More!
Designing mockups is not a simple task. It requires a lot of time, creativity, and a set of resources. At Envato Tuts+, we provide you with all the necessary resources to design your own mockups. You can find well-written tutorials to help you on your design journey.
By
