Layout Paint Shop Pro Tutorial

Programs Needed

Tutorial

  1. Find an image you would like to use for your layout.
    The Who
  2. Go to Image > Resize. Change the width to 500 pixels. The height should automatically be readjusted so that the image isn't stretched.
  3. Go to Selections > Select All.
  4. Go to Edit > Copy.
  5. Go to Edit > Paste > As New Layer.
  6. Hide and lock the bottom layer (in the Layer Palette, right click on the layer's name and choose Properties. Uncheck "Layer is visible" and check "Lock transparency" then click OK.).
  7. Remove the background from the top layer.
    Transparent
  8. Stay on the top layer and select the Magic Wand Tool.
  9. Hold down the Shift key and select the areas where you removed the background.
  10. Go to Selections > Invert.
  11. Switch to the bottom layer.
  12. Unhide and unlock the bottom layer.
  13. Go to Selections > Modify > Expand. Type 1 in the box.
  14. Go to Selections > Modify > Feather. Type 10 in the box.
  15. Go to Edit > Copy.
  16. Go to Edit > Paste > As New Image.
    Feathered
  17. Close the original image. You only need the image with the softened edges now.
  18. Go to Image > Canvas Size to find the height of your image in pixels (the width should be 500). If the width is not 500 pixels, go to Image > Resize and make the width 500 pixels. Remember the height and click OK.
  19. Save the file (not the image!) below that goes with the program you are using.
    Paint Shop Pro 7 - WhiteBlack.msk | Paint Shop Pro 8, 9 - WhiteBlack.PspMsk
    White Black Gradient Mask
  20. Open the file.
  21. Go to Image > Resize.
  22. Change the height to the number you found in step 17. The width should be 500 pixels.
  23. Save and close the file.
  24. Go to Masks > Load From Disk.
  25. Find and select the WhiteBlack file that you saved in step 18. Click Open.
  26. Save the image.
    Mask applied to image
  27. Save the file below.
    Paint Shop Pro 7 - layout-template-1.psp | Paint Shop Pro 8, 9 - layout-template-1.pspimage
    Layout template
  28. Switch to the "background" layer.
  29. Fill in the background with a solid color.
  30. Switch to the "textareas" layer.
  31. Select the Magic Wand Tool.
  32. Hold down the Shift key and select the two white rectangles.
  33. Fill in the rectangles with a solid color.
    Recoloured template
  34. Switch back to the faded image (step 25).
  35. Go to Selections > Select All.
  36. Go to Edit > Copy.
  37. Switch back to the template image (step 32).
  38. Go to Edit > Paste > As New Layer.
  39. Select the Mover Tool.
  40. Move the faded image so it is above the larger rectangle. It's okay if the rectangle overlaps it.
    Image on template
  41. Add any other effects you want to the image.
    Finished template preview
  42. Go to File > Save As and save the image as "header.jpg".
  43. Go to Image > Canvas Size.
  44. Set the width to 700 pixels, the height to 5 pixels, and the bottom to 0 pixels.
  45. Go to File > Save As and save the image as "background.gif".
  46. Upload both images (header.jpg and background.gif) to the internet.
  47. Use the following code for your layout.
    <style type="text/css">
    body { margin: 0px; background-image: url("images/background.gif"); background-repeat: repeat-y; background-color: #FFFFFF; }
    #content { position: absolute; top: 350px; left: 15px; width: 500px; padding: 10px; }
    #nav { position: absolute; top: 450px; left: 530px; width: 155px; padding: 10px; }
    #header { background-image: url("images/header.jpg"); background-repeat: no-repeat; height: 600px; width: 700px; }
    </style>

    <div id="header"></div>
    <div id="content">TEXT HERE</div>
    <div id="nav">TEXT HERE</div>
  48. Change "images/background.gif" and "images/header.jpg" to the URLs of your background and header images. Change the "FFFFFF" in "background-color: #FFFFFF" to the colour code for the background colour, so that you don't have white space at the side.

Layout Example

Finished layout preview

Layout Example Code

Go to the example page and the go to View > Source.