5

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

Improve this question

5 Answers 5

Reset to default
9

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.

Improve this answer
5
  • You could also just create a drop shadow via layer style and then split the layers (or duplicate and set fill to 0%) and then do that transformation.
    – Hanna
    May 16, 2013 at 15:02
  • agreed, but in reality and workflow unless this is for a proof to a client I would just code it. If you need this for IE I would extract that layer as an image OR use css3 pie.
    – user9447
    May 16, 2013 at 15:08
  • 1
    You can code layer styles AFAIK. I agree that there are 2 shadows, One looks smaller and even possibly circular. If one codes a solution, the code can be easily replayed after the inevitable edits.
    – horatio
    May 16, 2013 at 16:16
  • Thanks a lot. I think thats the best answer. I have successfully created the button using this.
    – AJ112
    May 17, 2013 at 4:33
  • 1
    Thank you so much. It works perfectly. I am a developer, just needed a small design work. I cant believe that I did it myself.
    – Neela
    Aug 2, 2018 at 17:40
2

It is very likely that the person used a 3D software tool or the rudimentary 3D tools in Photoshop to create the shadow.

However, this particular example can be made by duplicating the blue shape layer, creating a drop shadow on the duplicate, setting the fill to 0%, rendering the layer, and using the warp tool to adjust the shadow shape. The shadow layer would be placed under the blue shape layer.

Improve this answer
2

Anymore, with the continued proliferation and support for Cascading Style Sheets rev. 3, you can simply create the shadow with CSS:

CSS shadow code samples

Improve this answer
6
  • It should be noted that this will not work for any Internet Explorer version under 9.0.
    – Hanna
    May 16, 2013 at 15:04
  • 1
    op mentioned using photoshop:)
    – Bala
    May 16, 2013 at 19:55
  • @Bala I'm aware of that. But Photoshop is not the best option in many instances given the advanced of CSS3. If you don't need IE8 support, as Johannes points out, CSS3 shadows will render much faster and load less kb than any image.
    – Scott
    May 16, 2013 at 20:01
  • 2
    according to the OP's tagging, he/she is looking for a website-design solution
    – horatio
    May 16, 2013 at 21:13
  • The OP could be designing for a website and hand off the comps to a frontend coder who could later implement shadows. But since this was specifically tagged as photoshop, it should be addressed as such.
    – JGallardo
    May 16, 2013 at 22:50
1

The image you've given looks like it has a black line that has an opacity filter set against it so that it partly shows. You could create this by carefully aligning a curved line with the bottom of the button.

HTH

Improve this answer
1

Check this amazing tutorial Alternative Drop Shadow Effects in Photoshop on YouTube. I believe you can make something very similar after watching this.

Improve this answer
2
  • 2
    Do you think you could provide a quick and dirty summary of how this may be accomplished without watching the video? What I mean is that should the video every get pulled or if someone can't watch the video for whatever reason, your answer doesn't help anyone. It the same reason we usually don't like a simple link to an article as a question.
    – Hanna
    May 16, 2013 at 15:06
  • @Johannes, thanks for your considerations. I didn't include additional information cuz Matt_2.0 has already answered the technique and this is just a video tutorial of that. I upvoted Matt's answer so I think it's not really necessary.
    – Sam R.
    May 16, 2013 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.