: How to creat this background patterns which gives a 3 effect - either in Photoshop or PAINT.net You can see this is very faint image (below), only one pixel tall. The demo can be 100 px

@Jennifer810

Photoshop has built-in tools to select 1 px tall or 1 px wide slices from an image. Look under the Marquee selection tool. Just build your gradient any way that's convenient, then use the 1 px selection tool to select a sliver, copy to a new document and Save for Web.

What you see in the example is shading applied over the background gradient. The fact that it's a png is a clue: png allows for transparency, and this is a semi-transparent grey applied to create a faux shadow.


Create a new layer above your background, then use a soft-edged large brush to make a black vertical stroke. Don't worry about the top and bottom being rounded; you're only going to use a sliver anyway.
Adjust the opacity of this layer until you see the shadow effect you're looking for.
Duplicate the layer and move the stroke until the two are the right distance apart. (Add a layer above that's the same size your container div will be so you can gauge the effect.)
When you have the shading the way you want it, merge the two stroke layers, make a 1px selection somewhere in the middle, copy to a new document and save for web as a png with transparency.


You should end up with something like this:



The body tag uses a gradient jpeg, similar to your example, and the container div has the 1px tall png with the "shadows", created as described. inside the container div is a content div (the grey box).

Vote Up Vote Down