Preserved Topic: Background help please? $Pages that link to <a href="https://ozoneasylum.com/backlink?for=18771" title="Pages that link to Preserved Topic: Background help please?" rel="nofollow" >Preserved Topic: Background help please?\$

Author	Thread
whipser Obsessive-Compulsive (I) Inmate From: Phillip Island, Australia Insane since: Jul 2000	posted 07-21-2000 08:27 Can anyone help me to create a background like this ... or point me to a tutorial ....I am absolute novice <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif"> but very eager to learn ... I would also like to replace the orange with maybe a picyure etc etc ... any help would be greatly appreciated... Go here to view the background http://www.nex.net.au/users/whisper/background.htm
delphi Bipolar (III) Inmate From: Iceland Insane since: May 2000	posted 07-21-2000 14:07 I translated my tutorial that was in Icelandic to english (actually a bad english) http://www.simnet.is/photoshop/Index/Tut3_Hnappastika.html I hope it helps
whipser Obsessive-Compulsive (I) Inmate From: Phillip Island, Australia Insane since: Jul 2000	posted 07-21-2000 16:05 Thanx Delphi ..... I appreciate your help heaps .. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">
Das Maniac (V) Inmate From: Houston(ish) Texas Insane since: Jul 2000	posted 07-21-2000 20:11 Fairly simple. The big advantage to a background like this is the size. You can make it just one pixel tall and it still works (due to the repeating nature of backgrounds in browsers). 1 - create a new image wider than you want your page to be (the page you linked has an image 1200 pixels wide). Make it at least 100 pixels high, to start. 2 - Fill with the color you want to be on the right. 3 - Create a new layer. 4 - Use the rectangular marquee (upper left in the tools) to mark off the left side of the image, where the off-white is in the example you linked. 5 - Fill the selection with whatever color you want. 6 - Deselect 7 - With the newest layer selected, choose Layer
whipser Obsessive-Compulsive (I) Inmate From: Phillip Island, Australia Insane since: Jul 2000	posted 07-22-2000 01:50 Thanx Das .... you would be suprised how clear things become when shown correctly .. I have used your technique and it is great thanx .... I can now make simple backgrounds ...Yaaaaahhh
Steve Maniac (V) Inmate From: Boston, MA, USA Insane since: Apr 2000	posted 07-22-2000 03:34 Great explaination, Das. An alternate would be three layers, with the middle layer a blurred black set to multiply and opacity adjusted. Might have a little more control than the shadow. Whipser - Now that you know how to make the background, the next trick is to write the HTML so the text stays inside the light area! You have to pre-plan that part of the background before yo make it. Lots of designers will lay out a comp. page in Photoshop so they get the proportions of text area to margin right.
whipser Obsessive-Compulsive (I) Inmate From: Phillip Island, Australia Insane since: Jul 2000	posted 07-22-2000 04:59 Thanx Steve ..I had thought of that and planned to create a pge using tables and set the tables to the width of the light ( main ) area ... I think that the tables will work ... or rather I hope they will work .. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">, It is a good feeling when you look on the page and see the background that you made yourself ... I can imagine what the creators of some of the art found on this site must feel.
mbridge Paranoid (IV) Mad Scientist From: Insane since: Jun 2000	posted 07-22-2000 06:15 I know what you mean, I recently did some flash work that I absolutely love. I'm really proud of it, and it gives me a great feeling to know that I created it.
Steve Maniac (V) Inmate From: Boston, MA, USA Insane since: Apr 2000	posted 07-22-2000 16:04 Tables are the best way, or maybe I should say safest way; CSS is probably a better way, but support is not universal and it's yet another thing to learn. Here's a good trick: different browsers apply different amounts of offset (where the top left corner begins); it's common to put this snip of code inside your <BODY> tag: marginheight=0 marginwidth=0 topmargin=0 leftmargin=0 rightmargin=0 Ths makes things behave more predictably when you're trying to make things work with a background graphic.
Steve Maniac (V) Inmate From: Boston, MA, USA Insane since: Apr 2000	posted 07-22-2000 16:06 Tables are the best way, or maybe I should say safest way; CSS is probably a better way, but support is not universal and it's yet another thing to learn. Here's a good trick: different browsers apply different amounts of offset (where the top left corner begins); it's common to put this snip of code inside your <BODY> tag: marginheight=0 marginwidth=0 topmargin=0 leftmargin=0 rightmargin=0 Ths makes things behave more predictably when you're trying to make things work with a background graphic.
whipser Obsessive-Compulsive (I) Inmate From: Phillip Island, Australia Insane since: Jul 2000	posted 07-23-2000 01:18 Thanx Steve .... I have tried the tables last night and they seem to work well at all resolutions .. Ta <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 07-24-2000 19:18 If I may add something, using a BG of only 1 pixel tall, although entirely legitimate, may render rather slowly on slower systems. Before I upgraded a few months ago, certain sites using a background with a one-pixel dimension would usually take a second to cover the screen whenever I would page down. Anyone else seen this? Oh, and I would keep the orange on the right. Free the orange!
Das Maniac (V) Inmate From: Houston(ish) Texas Insane since: Jul 2000	posted 07-24-2000 22:11 Good point. When I said you can make it 1 pixel high and it still works, I should have mentioned that you probably shouldn't make it that small. On the upside, following my mini-tutorial normally wouldn't give you a 1-pixel background. I think mine ended up about 50 pixels or so. Oh, and Steve's point is also valid. Three layers would give more control, and eliminate the 'notch' problem. I considered something similar, but went with the layer effect in the mini-tutorial because it would be easier for a novice to play around with the settings.

Preserved Topic: Background help please?\$

Author

Thread

whipser
Obsessive-Compulsive (I) Inmate

From: Phillip Island, Australia
Insane since: Jul 2000

posted 07-21-2000 08:27

Can anyone help me to create a background like this ... or point me to a tutorial ....I am absolute novice <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">
but very eager to learn ... I would also like to replace the orange with maybe a picyure etc etc ... any help would be greatly appreciated...
Go here to view the background http://www.nex.net.au/users/whisper/background.htm

delphi
Bipolar (III) Inmate

From: Iceland
Insane since: May 2000

posted 07-21-2000 14:07

I translated my tutorial that was in Icelandic to english (actually a bad english) http://www.simnet.is/photoshop/Index/Tut3_Hnappastika.html
I hope it helps

whipser
Obsessive-Compulsive (I) Inmate

From: Phillip Island, Australia
Insane since: Jul 2000

posted 07-21-2000 16:05

Thanx Delphi ..... I appreciate your help heaps .. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Das
Maniac (V) Inmate

From: Houston(ish) Texas
Insane since: Jul 2000

posted 07-21-2000 20:11

Fairly simple. The big advantage to a background like this is the size. You can make it just one pixel tall and it still works (due to the repeating nature of backgrounds in browsers).

1 - create a new image wider than you want your page to be (the page you linked has an image 1200 pixels wide). Make it at least 100 pixels high, to start.

2 - Fill with the color you want to be on the right.

3 - Create a new layer.

4 - Use the rectangular marquee (upper left in the tools) to mark off the left side of the image, where the off-white is in the example you linked.

5 - Fill the selection with whatever color you want.

6 - Deselect

7 - With the newest layer selected, choose Layer

whipser
Obsessive-Compulsive (I) Inmate

From: Phillip Island, Australia
Insane since: Jul 2000

posted 07-22-2000 01:50

Thanx Das .... you would be suprised how clear things become when shown correctly .. I have used your technique and it is great thanx .... I can now make simple backgrounds ...Yaaaaahhh

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted 07-22-2000 03:34

Great explaination, Das. An alternate would be three layers, with the middle layer a blurred black set to multiply and opacity adjusted. Might have a little more control than the shadow.

Whipser - Now that you know how to make the background, the next trick is to write the HTML so the text stays inside the light area! You have to pre-plan that part of the background before yo make it. Lots of designers will lay out a comp. page in Photoshop so they get the proportions of text area to margin right.

whipser
Obsessive-Compulsive (I) Inmate

From: Phillip Island, Australia
Insane since: Jul 2000

posted 07-22-2000 04:59

Thanx Steve ..I had thought of that and planned to create a pge using tables and set the tables to the width of the light ( main ) area ... I think that the tables will work ... or rather I hope they will work .. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">, It is a good feeling when you look on the page and see the background that you made yourself ... I can imagine what the creators of some of the art found on this site must feel.

mbridge
Paranoid (IV) Mad Scientist

From:
Insane since: Jun 2000

posted 07-22-2000 06:15

I know what you mean, I recently did some flash work that I absolutely love. I'm really proud of it, and it gives me a great feeling to know that I created it.

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted 07-22-2000 16:04

Tables are the best way, or maybe I should say safest way; CSS is probably a better way, but support is not universal and it's yet another thing to learn. Here's a good trick: different browsers apply different amounts of offset (where the top left corner begins); it's common to put this snip of code inside your <BODY> tag:

marginheight=0 marginwidth=0 topmargin=0 leftmargin=0 rightmargin=0

Ths makes things behave more predictably when you're trying to make things work with a background graphic.

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted 07-22-2000 16:06

whipser
Obsessive-Compulsive (I) Inmate

From: Phillip Island, Australia
Insane since: Jul 2000

posted 07-23-2000 01:18

Thanx Steve .... I have tried the tables last night and they seem to work well at all resolutions .. Ta <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 07-24-2000 19:18

If I may add something, using a BG of only 1 pixel tall, although entirely legitimate, may render rather slowly on slower systems. Before I upgraded a few months ago, certain sites using a background with a one-pixel dimension would usually take a second to cover the screen whenever I would page down. Anyone else seen this?

Oh, and I would keep the orange on the right. Free the orange!

Das
Maniac (V) Inmate

From: Houston(ish) Texas
Insane since: Jul 2000

posted 07-24-2000 22:11

Good point. When I said you can make it 1 pixel high and it still works, I should have mentioned that you probably shouldn't make it that small.
On the upside, following my mini-tutorial normally wouldn't give you a 1-pixel background. I think mine ended up about 50 pixels or so.

Oh, and Steve's point is also valid. Three layers would give more control, and eliminate the 'notch' problem. I considered something similar, but went with the layer effect in the mini-tutorial because it would be easier for a novice to play around with the settings.