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.

Possible Duplicate:
Name and possibly a tutorial for this inset rounded rectangle technique

I'm looking for some special effect to accomplish in Photoshop for both text and a rectangle. Please have a look of below screen cast:

Example image

http://screencast.com/t/TSeeuWAfgMyh

You can see rectangle with some inside effect and seems empty area. Can anyone guide how to get this effect in Photoshop?

share|improve this question

marked as duplicate by Scott, Yisela, JohnB, Vincent, kontur Feb 4 '13 at 11:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1  
That's called a deboss, the inverse of an emboss. In the digital world it's also come to be known as an inner shadow. –  plainclothes Dec 9 '12 at 21:40

3 Answers 3

This effect is way easier with css, but I'll outline the photoshop technique for you.

Photoshop: You're going to need three layers for this. First layer is for the larger rectangle that contains the one in question.

  1. Layer 1 > Fill with grey background color. Filter > Noise > Add Noise (5% uniform monochromatic). Double click layer to bring up layer style. Bevel and Emboss > 1px, Inner Bevel, Chisel Soft, Angle: 90, Highlight Mode: Normal, 100%, uncheck use global light.
  2. Layer 2 > Select the larger area of the internal rectangle with your rectangle marquee tool. Layer > Fill > White. Right click the first layer, select copy layer style. Right click the second layer, select paste layer style. Set layer fill in the layers pane (directly under opacity) to 0%. Double click the layer to bring up the layer style pane. Check inner shadow (Distance:1(ish)px, Choke:33%, Size:7(ish)px, Quality Gaussian(The one that looks like a sloped hill), anti-aliased).
  3. Layer 3 > Select the smaller area of the internal rectangle with your rectangle marquee tool. Edit > Fill > white. Set layer fill (or opacity) to 15%.
  4. Done
share|improve this answer
    
CSS: {border-top:1px white; -moz-box-shadow: inset 0 0 10px black; -webkit-box-shadow: inset 0 0 10px black; box-shadow: inset 0 0 10px black;} –  mopsyd Dec 9 '12 at 15:09
    
For the text do the same thing with the inner shadow, set layer fill to 0%. –  mopsyd Dec 9 '12 at 15:11

i made a video here you can watch it http://www.youtube.com/watch?v=tAs_hOYMulo basically you drop shadow and turn its blending from multiply to normal and color to white and then adjust and have inner shadow it is really simple.

share|improve this answer

I believe the effect your after is something like this?

enter image description here

This effect is easily made in Photoshop:

1) Create your shape (or text) that you want to have this effect.

2) Lower the Fill to 0%

3) Open up the layer styles and apply the Inner Shadow & Bevel and Emboss effect, or any other effects you would like.

enter image description here

This creates a transparent shapes/text that has effects on it.

share|improve this answer

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