Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
add comment

5 Answers 5

up vote 8 down vote accepted

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.

share|improve this answer
    
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. –  Johannes May 16 '13 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. –  Matt May 16 '13 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 '13 at 16:16
    
Thanks a lot. I think thats the best answer. I have successfully created the button using this. –  AJ112 May 17 '13 at 4:33
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
    
It should be noted that this will not work for any Internet Explorer version under 9.0. –  Johannes May 16 '13 at 15:04
1  
op mentioned using photoshop:) –  Bala May 16 '13 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 '13 at 20:01
2  
according to the OP's tagging, he/she is looking for a website-design solution –  horatio May 16 '13 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 '13 at 22:50
show 1 more comment

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

share|improve this answer
add comment

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

share|improve this answer
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. –  Johannes May 16 '13 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 Rad May 16 '13 at 18:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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