How to apply a radial-subtle gradient to a 1px line Photoshop?

September 16, 2009 11:26 AM

How to apply a web 2.0 radial-subtle gradient to a 1px line Photoshop?

Hi All, I'm a freshman Web/Graphic design student and am looking to achieve the following:

How to apply a subtle gradient to a line tool in Photoshop? In other words I see a trend in web 2.0 graphic-rich websites that use these horizontal rules that fade on both sides.

I have been able to achieve all effects with linear gradients. But am unable to master the radial gradient. It seems that if I start from center it blends the middle of the line instead of the outer edges.

Essentially I'm looking to learn to achieve two effects:

1: http://www.cobblestonecn.com/
- the top-most tab's bottom border fades on both sides seemlessly

2: http://onwired.com/
- the border of the green strip fades on both sides and also has a shadow under it to make a pop effect.

Are there good tutorials for both web 2.0 effects?

I know my way around Photoshop, but have not had experience with achieving certain effects.

Thanks in advance!

posted by wildrain2008 to computers & internet (5 comments total)

Nothing on those sites is 1-pixel thick. Not sure why you think they are.

On the first website...
The background of the tabs is a 1225x41 jpeg. Basic gray to black radial blend. The tab rollovers are, I think, a CSS transparency effect. The tab titles are transparent pngs.

The second website...
The shadows are 950x14 png images. They look to be the very bottom edge of a very large circle or ellipse area with a drop-shadow applied. At least, that's one way to make it.

The green area is a 1750x100 jpeg. Pretty basic. Radial blend from green to black with a texture thrown in.

Perhaps if you could be more specific about what difficulties you are having reproducing such effects, we could be of more help.
posted by Thorzdad at 12:07 PM on September 16

To create a white line that fades to black on both sides:

Draw a line using the shape tool.

Double click on the shape's layer in the layers palette to bring up Layer Style. Go to Gradient Overlay.

Click on the Gradient image being displayed.

On the visual display of the gradient below the presents and Smoothness dropdown, click roughly in the middle. Under "Stops" adjust the "Location" setting to 50% (it should be pretty close depending on how you eyeballed it. You should now have three "stops" in your gradient. Set the middle stop to white (click the little square with the dab of colour, and change it accordingly), set the two side stops the same way, but set to black.

I think you could use this strategy to achieve both effects.
posted by backwards guitar at 12:14 PM on September 16

Err... "below the PRESETS" not presents.
posted by backwards guitar at 12:15 PM on September 16

Sorry, you also want to set the angle to 0 or 180 degrees
posted by backwards guitar at 12:19 PM on September 16

There's no difference between a linear and radial gradient on a line one pixel wide.

(Or more pedantically, two linears, one out in each direction from the center.)
posted by rokusan at 1:20 PM on September 16