I want to change the solid color on the homepage's background and navigation tabs on the homepage, something like Yahoo's homepage. Does anyone know how to make those gradient color? After generating, can it be added into the color batches in the existing photoshop and then I just need to change the color code in the homepage html codes?

Thanks.

We'll need more information from you.

Is your homepage background an image or a hex value colour?
Are your navigation tabs made up of image based backgrounds or are they hex value colours?

If you're not using images already, you can use javascript to add simple gradients to either. Search google for something like 'javascript gradient background' and hopefully it'll throw up a couple of useful resources.

We'll need more information from you.

Is your homepage background an image or a hex value colour?
Are your navigation tabs made up of image based backgrounds or are they hex value colours?

If you're not using images already, you can use javascript to add simple gradients to either. Search google for something like 'javascript gradient background' and hopefully it'll throw up a couple of useful resources.


Hi mediafirebrand,

Thanks for your prompt reply. My homepage background is a hex value color of #7b7b7b. Navigation tabs are also made of hex value colours.

Can I get a new color code of the gradient color that I like or I need to do something else? Do you know any available color gradient resources somewhere?

Thanks

You have to create a small graphic 1 or 2 pixel wide x the gradient you want so that it multiplies itself

Hi mediafirebrand,

Thanks for your prompt reply. My homepage background is a hex value color of #7b7b7b. Navigation tabs are also made of hex value colours.

Can I get a new color code of the gradient color that I like or I need to do something else? Do you know any available color gradient resources somewhere?

ThanksFor the background, you can simply place the following in the body style of your stylesheet.

body { background: #7b7b7b; }

A gradient is a bit more complex. You'll need to make the image in Photoshop and specify the dimensions you want to use. I recommend making an image around 150px wide and you'll need to use your height.

After creating the file, make the gradient in Photoshop. After you're satisfied with the gradient, go to Image -> Canvas size. Change the width to 1px, so your file's dimensions should be 1px wide by whatever height you're using.

After that, save the image in a format for web (jpg, png, gif). After doing that, you'll want to either define the image background in your stylesheet (ideal) or directly in your code. Let's say your navigation menu is in a div id called "nav", it'd look a bit like this:

#nav { background: url(images/navbg.jpg) repeat-x; height: 30px; }

Hope that helps! If you need any further clarification or help, let us know! :D