The corner background is a complicated tutorial to write because everything hinges on measuring your components to get it to tile right.  The measurements we use in this tutorial are for this design only and the only purpose of this tutorial is to give you the basics of calculating and designing your own.  It takes a lot of playing around or calculations to get the Topper to meet perfectly with the Background.

Step 1
Open a new image 1025Wx400H with a transparent background.

Step 2
Using the rectangle selection tool, go to the tool options palette and select the rounded rectangle;  make sure 'Anti Alias' is checked.

Step 3
Notice the coordinates in the image below.  I started my selection at 64V and 64H;  I dragged it to 1176H and 552V which is well off the right end and bottom of the image to make sure I had a straight edge off the right and bottom.

Step 4
With the view of the image zoomed out by 1 using the 'View' menu, your image should look like the one below.

Step 5
Using the 'Selection' menu, invert the selection.

Step 6
Image will now look like this image.

Step 7
Select the colors you want to use for the border and the background and if you choose to use a texture for the background, choose it now.  It's much less complicated not to use a texture, but whether you use a texture or a patter instead of a solid color, you have to make calculations for the tiling - so, I will use one.

Step 8
Using the flood fill tool, flood the border with your chosen color/pattern.  For this first tutorial, you might want to use what I do for the sake of learning the basics.  The texture I'm using will call for an extra step which yours may not - you'll have to be the judge of that.

Step 9
If you used a pattern, tile or texture to fill your border, you need to find the height of that pattern (repeat) for the calculations of chopping it up later.  I open the image used and check the height of the image.  You will find the size in the lower right hand corner of the work space.  This one is 180 pixels in height.  Jot it down and close the image.
    

Step 10
Border is still selected.  From the Selections menu, modify/expand by 5 pixels.
    

Step 11
From the Layers menu, add a new raster layer and name it 'piping'.
    

Step 12
Using the Layers palette, move the piping layer below Layer 1 by dragging it.

Step 13
Choose a solid color and flood fill the selection.  I just turned the texture off and used the same color;  in doing that it looks like I lost the pattern but will line it out is the next few steps.

Step 14
Using the Selection menu, invert the selection.

Step 15
Using the Selection menu again, choose Modify/Expand then enter 5 pixels and click OK.

Step 16
Invert the selection again.

Step 17
You can either hit the delete key or use the Edit menu and 'clear' to delete the color under the border that makes it look like a solid color.

Step 18
Now, I want to make sure I don't mess up the texture, so I'm going to go ahead and fill the part I just deleted with white to bring out the texture - so I change the fill color to white and flood fill the selected area.
    

Step 19
Activate layer 1.

Step 20
From the Effects, choose 3D effects/Inner Bevel.

Step 21
Match the settings below:
smoothness= 2
depth=2
Ambience=8
Width=20
shininess=0
color=white
angle=315
intensity=40
elevation=43

Step 22
Save the settings and name it 'SoftPad' for future use then click OK.

Step 23
Activate the 'piping' layer.

Step 24
Grab the magic wand and make sure tolerance and feather are set to 0 and match mode to RGB.
    

Step 25
Click on the piping color to select it.

Step 26
Now go back to the inner bevel and apply the SoftPad setting to the piping.

Step 27
Deselect the piping.

Step 28
From the layers menu, merge/merge visible.

Step 29
Using the selections menu, select all.

Step 30
Use the rectangle selection tool and click once on the border to set the selection or use the 'Defloat' from the selections menu.

Step 31
From Effects, choose 3D Effects/Drop shadow.

Step 32
Set vertical and horizontal = 1;  set opacity to 63;  set blur to 7.1, set color to black.  Click OK.

Step 33
Deselect.

Step 34
The basic border is done.

Step 35
Add a new raster layer.

Step 36
Name it 'bkg' and click OK.

Step 37
From the layers palette, drag the bkg layer below the merged layer.

Step 38
Switch the fill color to the color you chose for the background.

Step 39
Flood fill the background.

Step 40
Merge all layers.
 

Step 41
I apologize - had an emergency and lost the one I was working on!  Started over, so it's a different color now!
Now it's time to make the cuts.  If you remember, we wrote down the height and now is when we need that number.
Mine was 180.  180x2=360,  I will select a rectangle starting at 0,180 and drag it to 1025,360.  Make sure the rectangle selection tool is set to "rectangle" and anti alias is unchecked.  IF you chose to use a solid color and you do NOT intend to add the trim, you can select a background area height of a lot less for faster loading - I generally select at least a 25 pixel height - just make sure you are starting the select from a lower area that is NOT in the curve!
    

Step 42
Copy selection and paste to new image.  Use menu or keystrokes (CTRL/C & CTRL/V) to do this.  This is the repeat size for the texture which in most cases assures proper tiling for the background.  Save the background (I named mine "BlueCornerBkg.psp").  Minimize to trim later.

Step 43
Deselect.

Step 44
Now drag a selection from 0,0 to 1025,180 and crop.  Again, IF you are using a solid color and you do NOT want to add a trim, you may select a shorter area, just make sure ALL of the curve area is selected.

Step 45
This is your corner graphic.  Save the image.  I saved mine as 'BlueCornerTop.psp'.  Minimize image.

Step 46
I am supplying my pearl in PSP5 format.  Unzip and open the file in PSP.  The pearl is a blue shade but you will want to match it to the color you chose for your SoftPad area.  If you know how to do this, use colorize function under Colors menu to color your pearl and export it to a tube, then activate the tube brush and select the pearl for use at 24% (At 24%, the pearl is a 10 pixel diameter.).

Colorize:     Hue is the color slider;  Saturation is the slider to decrease color to grey or increase to full color available.
       

Export to tube:

Setup for use:
          

Step 47
Using the BlueCornerBkg image, drop a pearl at the top and the bottom of the same horizontal pixel point.  I used the pixel point of 55 and started at the vertical pixel point of 5, applied one every 10 pixels down, ending with the vertical pixel point of 175.  If it looks right, save and minimize.

Step 48
Maximize the corner graphic.
Add a new raster layer.
Drop the first pearl at 55,175 and then line them every 10 pixels around the curve and along the vertical pixel point of 55 (the same as you used for the horizontal pixel point on the side).  Yes, the curve is wicked;  but if you wobble it - don't worry so long as you end up on the vertical pixel point of 55 for the top straight line.  You will cover up the part of the corner with more trim anyway.  When happy, save the image.  I didn't merge the layers after the pearls in case I want to slip something under them later but if this finishes it for you, you can go ahead and save the images as jpg's now.

Step 49
If you want more, go ahead and decorate the corner image.
I did this:  I added a drop pendant to cover part of the curve, added a larger pearl at the top of that and then added a drop shadow.  After that, I went back to the pearl layer on both images and added a drop shadow to the string of pearls.

Step 50
Never launch a new tiled background with out doing a 'desk check' on the tiling!  It will save you some time and discouraging moments.  I have a tutorial on Deskchecking Tutorial if you don't know how!  I did that and then pasted the corner image over the top making sure to move the top left corner to the 0,0 coordinance.  As you see, I got a perfect match!  Anyway, perfect enough!  Now it's time to save the images to JPG format and this tutorial is finished.

 

For a web page, you have to add these attributes inside the BODY tag after the name of the background image;  then you add the corner image right under the BODY tags.
leftmargin="0" topmargin="0" rightmargin="0" rightmargin="0" marginwidth="0" marginheight="0"

Script for stationery, author unknown.

Close Window when Finished.

Tutorial by CSGreen

Zipped tutorial in PDF format . . . 2,966KB