I've been trying to find a way to replicate these shadows under content that makes it look like the element is arched up.
Two examples are here at the W3C's new design (upper left hand corner the shadow under the blue box):
and here (same effect under the list):
Does anyone know if there is a term for this type of shadowing or any kind of tutorial to achieve it in photoshop or whatnot?
You can achieve that in any number of ways.
One of the more powerful ways are to use layer effects, something like this:
- Create a new vector layer with the Rectangle tool (U)
- Set it's Fill to 0 (below Opacity) in the layer palette
- Double click on the new layer to access it's effects
- On the first screen, remember to tick the "Layer Mask Hides Effects" box
- Add a outer glow: Color: black; Mode: Multiply: Size/Radius/Spread: Your choice :)
- Confirm the layer effect and add a layer mark to the new layer through the button in the layer palette
- Use Gradient Fill tool (ie Reflected Gradient) or a large soft brush to paint black and white to fade the graphic and crop it where needed
Ask away if something doesn't go as planned :)
Try using circular shapes that have layer effects like Jens described above for the shadow. Then use another layer with a rectangular shape on top of it that doesn't have any shadow. That's the easiest way I've found to make them.
I made a file that will help illustrate what I was referring to with an elliptical vector...
The W3C shadow effect is formed by 2 images:
This is just one of the ways, some methods use the shadow within the same image depending on your needs.