How do I create a button with two shadows in the bottom?

I am not much of a designer. I want to know how I can create Wix like buttons in Photoshop.

They offer many kinds of buttons, but I want the one with a shadow on both sides of its bottom. Any help would be appreciated.

enter image description here

Answer

This is a common question but usually for code. To create this in Photoshop:

  • New layer in Photoshop

enter image description here

  • Draw rectangle slightly smaller below
  • Fill with black

enter image description here

  • Filter>Gaussian Blur
  • radius around 5-7 pixels, play with the settings

enter image description here

  • Edit > Transform > Warp

enter image description here

  • Drop opacity around 20%

enter image description here

Another tutorial here.

Free Files

Free .psd files here for shadows.

Code

Personally if it is going to be within a site I would code it. To learn how to code it you can review stack’s answer here. A drop shadow generator here and another option here.

EDIT:
After looking at your example be aware that is done twice. The layer is with an opacity of around 80-90% and warped closer to the edge and then duplicated with a wider shadow changed to around 15-20% and stretched.

Attribution
Source : Link , Question Author : AJ112 , Answer Author : Community

Leave a Comment