Creating a colour gradiant webpage background.

A
Posted By
Alan
Feb 22, 2004
Views
348
Replies
4
Status
Closed
I’d like to create a gradient background colour image to use for my webpage. I’ve tried in photoshop and it sort of works but there are joins in the page. It seems the image is not large enough to begin with and when placed on the webpage is "tiled" and showing the joints. What size should I make this page so that it fits without having joins and also, so that it opens quickly as a webpage. Do I save this image as a jpg. or a gif. please?

Alan

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

W
wes
Feb 22, 2004
Alan, how are you doing it now? There are probably several ways of doing what you want but no need to reiterate what you have done already.

"Alan" wrote in message
I’d like to create a gradient background colour image to use for my
webpage.
I’ve tried in photoshop and it sort of works but there are joins in the page. It seems the image is not large enough to begin with and when
placed
on the webpage is "tiled" and showing the joints. What size should I
make
this page so that it fits without having joins and also, so that it opens quickly as a webpage. Do I save this image as a jpg. or a gif. please?
Alan

P
paul
Feb 22, 2004
If your background is a horizontal gradient, you can create a narrow bar (4px, or so) that is tall enough not to repeat down the page. Try 4 x 2000px. Then Save For Web, and set as your page background. Vertical gradients work the same way, except that you’ll want a 4px tall by 2400px wide tile. Also, you’ll want to avoid GIF compression for vertical gradients, since GIF works by optimizing like colors horizontally.

Hope this helps.


Paul Cowan
www.iconix.biz

"Alan" wrote in message
I’d like to create a gradient background colour image to use for my
webpage.
I’ve tried in photoshop and it sort of works but there are joins in the page. It seems the image is not large enough to begin with and when
placed
on the webpage is "tiled" and showing the joints. What size should I
make
this page so that it fits without having joins and also, so that it opens quickly as a webpage. Do I save this image as a jpg. or a gif. please?
Alan

JH
John Hawkins
Feb 25, 2004
On Sun, 22 Feb 2004 14:23:00 +0000 (UTC), "Alan" wrote:

I’d like to create a gradient background colour image to use for my webpage. I’ve tried in photoshop and it sort of works but there are joins in the page. It seems the image is not large enough to begin with and when placed on the webpage is "tiled" and showing the joints. What size should I make this page so that it fits without having joins and also, so that it opens quickly as a webpage. Do I save this image as a jpg. or a gif. please?
Alan

Not certain that this is what you are looking for but have a look at my hobby page in the signature line for an example. The background gradient was created on a new page 1280 pixels wide. I had browser statistics that showed most visitors to the site used 1024 x 768 screen resolution so 1280 would cover that plus the few larger ones without tiling horizontally. The single row marquee selection was used and then cropped to the selection (image + crop) I saved it as a jpg @ 8.6k but a gif would have been considerably smaller @ 1.1k. Darn! Now if I had used cascading style sheets I could change it easily but I took the "quick" way.

Hope this helps.

John Hawkins – From Canada’s Atlantic Coast
http://rcalbum.rchomepage.com/Home.html
JH
John Hawkins
Feb 25, 2004
On Wed, 25 Feb 2004 08:10:36 -0400, John Hawkins
wrote:

I saved it
as a jpg @ 8.6k but a gif would have been considerably smaller @ 1.1k.

I take that back. The gif sucks hard. The jpeg is smooth. I suppose indexed colour plays hell with a gradient? Maybe it was the gif settings I chose.

John Hawkins – From Canada’s Atlantic Coast
http://rcalbum.rchomepage.com/Home.html

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections