Sign in to follow this  
Followers 0

[Photoshop] How To Make a Capsule Button


Guest
  • This tutorial will show you how to make a capsule button. Make it to whatever size you want. Take a look!

Here is a neat button to use in your websites. It basically is a capsule style button with an inset center for entering any text that you want. It can also be used as an accessory to an interface to give a more futuristic/modern effect.

 

1. Open a New Document in Photoshop. Set width to 300 px and height to 120 px.

2. Create a new layer. Name it "Capsule Button".

3. Select the Rectangle Tool and draw a rectangular grey colored square.

ftphyo.gif

4. Right click the "Capsule Button" layer in the layers palette. Choose "Blending Options" from the pop-up list.

5. Set the properties for "Gradient Overlay" to the following:

30ix0sp.gif

. Create a new layer under the "Capsule Button" layer. Name this new layer "Connect Tube".

7. Select the Rectangle Tool and draw a grey colored rectangle on this layer.

8. Right click the "Connect Tube" layer in the layers palette. Choose "Blending Options" from the pop-up list.

9. Set the properties for "Gradient Overlay" to the following:

2hwvmh.gif

10. You should have a result similar to the following:

29njn78.gif

11. Highlight the "Capsule Button" layer from the layers palette. Goto Layer > Duplicate Layer... and name this new layer "End Piece Left".

12. Click CTRL+T to enter Free Transform Mode and use the shape handles to shortent the length of the end pieces. Then move the end piece to the left side of the capsule.

13. Hightlight the "End Piece Left", then goto Layer > Duplicate Layer... and name this new layer "End Piece Right".

14. Click CTRL+T to enter Free Transform Mode and use the shape handles to shortent the length of the end pieces. Then move the end piece to the right side of the capsule.

2ng7xps.gif

15. Create a new layer. Name this layer "Left Orb".

16. Select the Eliptical Marquee tool and create a circular selection.

17. Use the Gradient Tool, set gradient from white to black, and set to radial gradient.

18. Click in the top left of the circle selection and drag to the bottom right. This will create a 3D looking orb end piece.

2gxlp1f.gif

19. Highlight the "Left Orb" layer. Goto Layer > Duplicate Layer... and name this new layer "Right Orb".

20. Select the Move Tool and move the right orb to the far right side of the capsule.

2rdyamd.gif

21. Create a new layer. Name this new layer "Indent Box".

22. Select the Rectangle Tool and draw a rectangle over the upper portion of the capsule (as shown below).

29c8k6x.gif

23. Right click the "Indent Box" layer in the layers palette. Choose "Blending Options" from the pop-up list.

24. Set the properties for "Inner Shadow" to the following:

2drv4ph.gif

25. Click OK and you should now have your Capsule Button.

2m2gzts.gif



Sign in to follow this  
Followers 0


User Feedback


There are no comments to display.



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now