Create a background with vertical borders (psp9)

[matthew]

Copy and paste this image (you might need to magnify before you copy) into Paint Shop Pro.

set these colours in the materials palette

Foreground (and stroke): #222222
Background (and fill): #eaeaea

Go to gradients, and set the Button White 2 gradient to the Foreground (and stroke) colour box, and make these settings.




magnify the background image to 800% (or higher)

Creater a new Raster Layer (Layers > New Raster Layer)

select the selection tool, with the mode set to rectangle.

and make a selection around one of the black sections on the image





and then fill with gradient



Repeat for the other black section.


hide the background layer by switching off the visibility toggle



turn off the gradient in your Foreground(and stroke) colour box, and fill the inside area of the image with the colour set as in your Foreground (#222222).

select a slightly darker colour for the outside areas of the image. I'm using #cecece.

that's it. however you might want to add some highlights.

to do this, select the paintbrush tool, and set brush to +square 01 and add a pixel of of white (#ffffff in your forground) either side of both gradient borders. I've highlighted mine in red, to make things easier.



and thats it.

view final results here.

to center the background image on your forum or website use this css:



<style>

body
{
background-image: url (IMAGE GOES HERE);
background-position:center top;
background-repeat:repeat-y;
}

</style>

[nysaa]

Can you make a tutorial like this for photoshop, because I would really like to learn how to do it. thanxxx

[Michael]

M@ uses PSP, Nysaa. Sorry, I wish I could help but I use MS Paint =/

[nysaa]

thats ok thanx anyway

[fernstar]

what do you mean by buttons white 2?

[noman]

button white 2 is the name of the preset gradient used in the tutorial. Let me know if your version of Paint Shop Pro doesn't have this preset and I'll zip one up for you to download.

[♥Emma♥]

Hmm..I don't see the button white 2. I'm using PSP X.
Can someone zip me the preset too?
Thanks

[Michael]

I also have PSPX so I can't zip it, however I'll let Matt know you need it. ;]

[♥Emma♥]

Thanks Mike

[noman]

Here's the zip. I'm not sure if it's compatible with PSP X, as I use 9, but I hope it works

[Michael]

I believe that it will because PSPX is supposedly compatible with earlier versions. But I shall check and see. ;]

[♥Emma♥]

Thanks guys!
It works like a charm!

[Michael]

Yep! And it works with mine as well! l[

[dodgyviper3]

Where do you put this code?
<style>

body
{
background-image: url (IMAGE GOES HERE);
background-position:center top;
background-repeat:repeat-y;
}

</style>

Please can somebody answer this!