free web hosting | free hosting | Business Hosting | Free Website Submission | shopping cart | php hosting
 

 
 

I claim the copyright to this tutorial.  You are free to do whatever you please with the graphic you make, but please do not take my tutorial.  Do not send the tutorial through email.  Only share my link.

The purpose of this tutorial is to learn how to make the mosaic splash effect around an image.  This method can also be used for  signature tags.  It is written for beginner to immediate level.  Please feel free to email me if you have any questions.

To do this tutorial you will also need Paint Shop Pro.  I used Paint Shop Pro 7.0 .  You may download a free trial at Jasc.

Remember to save as a psp file often!

Before we begin, you might want to study the PSP tool bars.  I have labeled the tools on another page.  Click on the link and it will open a new page.  You may want to keep this page open while you work on the tutorial, to refer to the names now and then.  PSP Tools

In this tutorial you will learn how to make this 3-piece background.

You will need to download the dingbat Flower Ornaments.  You do not need to install it into your fonts.  Just save it in a folder where you can find it.  Download here:
 

You will also need the Art Texture plugin from Ulead.  You may download that here.

You will also need two complementary background tiles.  You may download mine here. 

dark blue tile
white tile

If you wish to make some in different colors first, then please try my two tile tutorials:
 
 

Textured Tile
Marble Tile

Before opening PSP, open up the Flower Ornaments dingbat that you downloaded by right-clicking on the file and click open.  Minimize the file.  Then open PSP.  This way you do not have to load the font into your fonts file.  (Too many fonts can cause PSP or Windows to crash or freeze up!)
 

1.  Open your two tiles in PSP, and minimize them.  We will use them later for fills. 

2.  Open a new file: 700 x 400, resolution= 72,000, transparent background, 16.7 million colors. 

3.  Add a new raster layer, called background.

4.  Choose your foreground color to be white, choose your styles background to be null.
5.  In the left tool bar, choose the preset shapes tool.  In the Tool options box, change to these settings: choose round rectangle, check antialias, create as a vector unchecked, line width= 8, line style=solid (#1)
6.  Ok, now watch the status bar at the bottom of the screen as you move the mouse.  Place the cursor in your new image at coordinates (32, 62).  You will see these coordinates at the bottom of the screen.  When you get those coordinates, hold the left mouse button down and drag out a rectangle.  Stop when the second coordinates become (672, 374).  Release the mouse.
7.  In the left tool bar choose the magic wand and click on the rectangle you made to select it.

8.  In the top tool bar, click on Effects–Plugin Filters–Ulead–Art Texture.  Apply these settings:   Click Edit.  Click on image #5, click ok.  Click on image #5-6 (last one on 2nd row), and click ok.  Your rectangle should have turned gold.

9.  While still selected go to the top tool bar, click on Effects–3 D Effects–Inner Bevel.  Apply these settings: Bevel = pie shape, width=14, smoothness=15, depth=12, ambience=0, shininess=50, color=white, angle=315, intensity=50, elevation =30. Click ok.  In top Tool bar click selections–none.  Click File-Save as and save the file as a paint shop pro file (.psp or.tub).  Name it GFDtemplate.psp.
10.  In left tool bar, click on magic wand tool.  Use it to select the outside area of your background.  In top tool bar, click on Selections–modify–expand.  Type in a 35.  Click ok. 

11.  In the Layer Palette, Click on Layer 1 to activate it.  In the foreground styles box, set the styles box to your border background.  Click on the black arrow in the foreground styles box, choose patterns (3rd icon).  Then click on the styles foreground.  Scroll up to choose the tile that you want for your border.  Scale = 100%, angle=0.  Click ok.

12.  In the left tool bar, choose the flood-fill tool (paint can), and left-click in the selected area to fill with your border tile.

13.  In the top tool bar, choose Selections–Invert.  Change your pattern to your second tile choice, and flood-fill the selected area.  Click on Selections--modify--feather 20.  Click ok.  Then flood-fill the selected area with the same pattern.

14.  In the left tool bar, click on the text tool.  In the Tool Options box, change the line width to 5.  Left-click on the image.  When the text box opens, select the Flower Ornaments font, size= 80, foreground color = null, background color=white.  Type a lowercase  i  .  (You may choose another dingbat, but the size will affect your cropping numbers in Steps 24 - 28) Check floating and antialias.  Click ok.  Move the dingbat to center over the gold bar like in the image below.  KEEP selected!

15.  In top tool bar, click Effects--Plugin filters--Ulead--Art Texture.  Click Edit.  Click image #5 (gold), click ok.  Click Image 5-6 (last one in second row).  Click ok.  Keep Selected!

16.  In top tool bar, click Effects--3D Effects--Inner Bevel.  Apply the same settings as before.  Apply these settings: Bevel = pie shape, width=14, smoothness=15, depth=12, ambience=0, shininess=50, color=white, angle=315, intensity=50, elevation =30. Click ok.  In top Tool bar click selections–none.  In top tool bar click selections--none.

17.  In top tool bar, click Layer--Add new raster layer, called bottomright.

18.  In the Tool Options box, change the line width to 2.  With the text tool, left click on the image.  When the text box opens, select the Flower Ornaments font, size= 48, foreground color = null, background color=white.  Type a lowercase  i  .  Check floating and antialias.  Click ok. 

19.  In top tool bar, click Effects--Plugin filters--Ulead--Art Texture.  Click Edit.  Click image #5 (gold), click ok.  Click Image 5-6 (last one in second row).  Click ok.  Keep Selected!

20.  In top tool bar, click Effects--3D Effects--Inner Bevel.  Apply the same settings as before.  Apply these settings: Bevel = pie shape, width=14, smoothness=15, depth=12, ambience=0, shininess=0, color=white, angle=315, intensity=38, elevation =30. Click ok.  In top Tool bar click selections–none.  In top tool bar click selections--none.

21.  In top tool bar, click Image--rotate.  Click circle by left, and freehand.  Type in 45.  Click Ok.  Move the dingbat into the lower right corner like below.  In top tool bar, click Selections--None.

22.  In Layer Palette, right-click on bottomright layer.  Choose Duplicate.  In top tool bar, click Image--Mirror.  Now the dingbat is also on the bottom left.

23.  Save.  Press Shift +D (same time), and you will get a second copy of the file.  Minimize the first one (GFDtemplate.psp).  Click on the second one to make it active.  In top tool bar, click layer--Merge--Merge All (Flatten).  You can type your copyright or site name on the bottom like I did.

24.  DOUBLE-Click on the selection tool (in left tool bar).  A selected area box comes up.  Type in these settings:  left=0, right =700, top =275, bottom =400.  Click ok.  A selection box should appear around the bottom. Check to make sure that all of the dingbat is inside the selection box.  If not, click undo, double-click on the selection tool again  and make the top number a little smaller.  You will have to change thee numbers if you chose a different dingbat in Step 14.  *S*

25.  In top tool bar, click Edit--Copy.  then click Edit--Paste-As new image.  Save file as bottom.jpg

26.  DOUBLE-Click on the selection tool (in left tool bar).  A selected area box comes up.  Type in these settings:  left=0, right =700, top =0, bottom =150.  Click ok.  A selection box should appear around the bottom.  Check to make sure that all of the dingbat is inside the selection box.  If not, click undo and make the top number a little smaller.  *S* 

27.  In top tool bar, click Edit--Copy.  then click Edit--Paste-As new image.  Save file as top.jpg

28.  DOUBLE-Click on the selection tool (in left tool bar).  A selected area box comes up.  Type in these settings:  left=0, right =700, top =125, bottom =250.  Click ok.  A selection box should appear around the bottom.  Check to make sure that all of the dingbat is inside the selection box.  If not, click undo and make the top number a little smaller.  *S*

29.  In top tool bar, click Edit--Copy.  Then click Edit--Paste-As new image.  Save file as middle.jpg

And there you have the three parts to your background!  You need to set up this background in a table format with the 1 column, and 3 rows.  Make the background of the first row the image of your top piece, the second row the image of your middle piece, and the 3rd row the image of your bottom piece.  Place all the writing and pics for the page in the second row.  Please view the source of this page to see the script and how the background is set up.  (In Internet Explorer, click View--source).  Contact me if you need help.

Now make some buttons for this background.

If you have any questions about this tutorial or comments, 

please email me.


 

©  Dragon's Breath (aka The Dragon Lord),  2003.  This tutorial and my PSP  graphics are copyright to The Dragon Lord, 2003.  Please do not remove this tutorial from my site.  Share my url.