Making Background Darker to Lighter

RR
Posted By
Robin_Rembish
Jun 14, 2004
Views
492
Replies
3
Status
Closed
I would like to create a background that begins with one color and gradually changes to a lighter color similar to the home page of www.platowoodwork.com. This type of background is on both the side panel and main panel of the page. I am not looking for textures or vertical or horizontal lines. Just a simple gradient.

Here is what’s happening. I get the effect that I want in Photoshop. Everything looks fine but then when I bring it into ImageReady to export it to a gif or jpg file, I see lines and colors that I don’t want and didn’t see in Photoshop. What should I do?

These are the steps I took in Photoshop to create a similar effect to www.platowoodworks.com.

1. File > New
Width: 400 Pixels, Height: 600 Pixels, Resolution: 72, Mode: RGB, Contents: White
2. In layers window, select create a new layer
3. In toolbar – set foreground to #EFAE7B, set background to #FFFFFF
4. On Layers palette – select Create new fill or adjustment layer – select gradient
5. Select foreground to background gradient, Style: linear, Angle: 90, Scale: 100, Check Dither, Check Align with layer

From Photoshop, I can save it as say Plato.psd. When I reopen the file, everything looks fine but as soon as I go into ImageReady I see lines and colors that should not be there. Essentially, the colors are being separated out rather than blending into one another.

I tried saving the gradient to jpg with a maximum setting and it has not helped.

This is what I see in Photoshop.

www.robinsnest-webdesigns.com/Plato/Plato_Gradient.doc

This is the gradient saved to jpg from ImageReady.

www.robinsnest-webdesigns.com/Plato/Plato.html

Please help.

Robin

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

L
LenHewitt
Jun 14, 2004
Robin,

Try adding noise at about 2 px to the gradient and DO NOT save as GIF (which will not have sufficient colours to produce a smooth gradient)
RR
Robin_Rembish
Jun 14, 2004
I received the following response on forums.devshed.com:

* ******************* This seems more to be a problem with your color management in windows. both *.doc and *.html just look perfect.
right click on desktop -> properties/settings or something -> settings -> 32 bit (High color)
* *******************

Changing the Control Panel Display properties to True Color (24 bit) from High Color (16 bit) improved the gradient significantly.

Unfortunately, I cannot depend on others to have a certain monitor resolution. That is apparently a reason www.platowoodwork.com was done in Flash.

Robin
SM
Stuart_McCoy
Jun 15, 2004
Robin,

No you cannot depend on users having their color depth set to 24-bit (most new PCs are now though), but even the Flash movie would look bad if the color depth is set to 16-bit or lower. You should ensure that your GIF Color Table has enough colors to recreate the gradient properly. Also I’d suggest making your gradient 1px wide and let the browser tile it to cut down on file size. I was able to create your gradient as a 748 byte GIF without any real loss of quality. However you’re still stuck with the color depth problem and there is nothing you can do to correct this.

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections