Tutorial: 3. Adding your logo using Paint Shop Pro
Level: Intermediate. Published on 16 October 2002 in How to add your own logo
Learn how to add an example logo to a PageKit using Corel's Paint Shop Pro.
On this page we'll show you how to modify the High Life Time Machine PageKit by adding an example logo to the header image in Paint Shop Pro, and then re-exporting this image so that the example logo appears in the PageKit in your Web browser.
If you would like to work through this example, unzip the High Life Time Machine PageKit files and PSD Zip files to your hard drive somewhere (you can download the PageKit and PSDs here), and save this logo onto your hard drive too, by right clicking on it (or clicking and holding on a Mac) and selecting Save Picture As...:
Alternatively, you can try this exercise on your own logo, or on a different PageKit. If you're a beginner at this, we'd recommend working through the exercise with the example logo above, until you get the hang of it.
1. Prepare the logo
If you're really lucky, your logo will come as a layered Photoshop (PSD) file with a transparent background, so that you can easily slot it into your Website.
In the real world, however, your logo will often come as a flat image on a white or other coloured background. This is more challenging, because you need to remove this background first, so that you have a logo with a transparent background. Otherwise your logo would have an ugly white rectangle around it when you placed it in the PageKit!
We like a challenge here at ELATED, so our example logo above is a flat image with a white background. The first thing we'll need to do is remove that background.
Of course, if your real logo is on a transparent background, you can skip this step.
First, start Paint Shop Pro, and open the mylogo.jpg logo image that you saved from the image above (or if you're trying this exercise with your own logo, open your logo image).
Now, we'll use the Magic Wand tool to select the white background in the logo. Click on the Magic Wand Tool in the Tools palette (or press the M key):
In the Magic Wand Tool Options palette, select a Tolerance of 70, and make sure Match mode is set to RGB Value. Also, set Feather to 1 - this will help to smooth out the edges of our selection:
You may want to try different Tolerance values for your own logo, until you find the most suitable setting.
Next, click on the white background in the logo image, as indicated below. You will see the marquee appear, indicating that Paint Shop Pro has selected most of the white areas of your image:
However, it's missed a couple of areas - the central hole in the last letter "o" and the little triangle in the letter "M". To correct this, hold down the Shift key and click in the centre of the non-selected white areas, as indicated below. You may want to zoom in first (press Control and the + key on the numeric keypad) so that you can accurately click on the white bits:
You'll then see that Paint Shop Pro has added these two white areas to the selection, so that we now have all our white background selected:
Now that we have selected all of our background, we need to invert the selection so that we are selecting just our logo instead. To do this, choose Invert from the Selections menu:
You should then have just the logo selected, as follows:
You may have noticed that our selection is slightly bigger than the logo, so that it's selecting some of our white background as well. This is bad as it will result in a nasty white halo around our logo when we incorporate it into the PageKit. To help reduce this halo effect, let's make the selection slightly smaller.
To do this, choose Selections > Modify > Contract...:
In the Contract Selection dialog box, make sure Number of pixels is set to 1 and click OK:
Now that we have prepared our logo and isolated it from the background, let's copy the logo into the PSD file for the PageKit, so that we can integrate it into the design.
2. Copy the logo into the PSD
Open the PSD file for the High Life Time Machine PageKit, if you haven't already done so. The file is called highlife.psd and you'll find it in the Highlife Time Machine PSD Zip file you downloaded from here. The PSD should look like this:
Now switch back to your logo window with the selection still in place, and press Control+C to copy the selected parts of the image. Then switch to the highlife.psd window and select Edit > Paste > As New Layer.
Your logo should then appear in the PageKit window as a new layer. You might find that the new logo layer is covered up by the other layers in the PSD:
If this is the case then click on the logo layer in the Layer palette and drag it vertically upward until it is at the top of the list:
Your logo should then be sitting nicely on top of the document:
3. Position the logo
In this example we're going to place the logo in the purple area at the top-left of the page. To move the logo, make sure the logo layer is selected in the Layer palette, then click on the Move tool in the Tools palette (or press the V key):
Now click on the logo in the document and drag it until it is over the purple area at the top-left of the page, then release the mouse button:
4. Hide the old heading
Good! Now you'll see that the old PageKit heading text, "High Life Time Machine", is still there, just behind the logo on the left. Because this text is on its own layers, it's easy to remove. Just click on the spectacles icons in the layers "highlife" and "timemachine" in the Layer palette to hide the text, so that a red cross appears over the spectacles:
5. Blend the logo
The logo looks a little out of place as it is very bright and doesn't blend well with its background. A good trick is to make the logo slightly transparent so that a hint of the background shows through. Click on the layer containing the logo in the Layer palette, then drag the Opacity slider from 100 to 80:
Our logo is now nicely incorporated into the design!
6. Re-slice the image
Finally, we need to re-export the part of the page (or slice) that contains our logo, so that it appears in our Web browser. We won't explain every step of the slicing process here. If you're not sure how to slice, see the How to slice an image topic.
The first thing we need to do is find out the filename of this slice image. We can do this by getting our Web browser to tell us the name of the image.
Open up the PageKit in your browser. You can usually do this by double-clicking on the index.html file in the highlife folder:
Then right-click (PC) or click and hold (Mac) on the purple area in the page in your Web browser. Some browsers will show you the image name in the pop-up menu (usually something ending in .gif or .jpg). If you don't see a name, try selecting Properties in the pop-up menu:
In the Properties dialog you should then see the filename of the image:
So we now know that the image slice we need to overwrite is called left.jpg. Open up this image in Paint Shop Pro (it will be in the images folder under the highlife PageKit folder):
By looking at this image, we can now see the area of our highlife.psd document that we need to re-export. Switch back to the highlife.psd window and click on the Selection tool in the Tools palette:
In the Selection Tool Options, make sure that Rectangle is the Selection type, and that Feather is set to 0 and Antialias is not checked:
Duplicate the PSD (Window > Duplicate or Shift+D), then, using the left.jpg image as a guide, drag out the marquee in the duplicate image so that it covers the same area as the left.jpg slice:
Finally, crop the image to this selection (Image > Crop to Selection or Shift+R) and use File > Export > JPEG Optimizer to save your new slice over the old left.jpg in the PageKit's images folder.
7. Check the results
To verify that the image was sliced correctly, open up the PageKit in your Web browser again (you may need to press Refresh or Reload to update the browser). If all goes well you should see the finished PageKit, including your own logo!
8. And finally...
If you've done this exercise with the example logo above, try it again with a real logo or other image. The techniques you've learned should be useful for any type of image, and should work fine with any of the PageKits. For really professional results, when selecting your logo, you may want to try some of the other selection methods as well as Magic Wand, such as the Freehand tool and the Transparent Color selection method (Selections > Modify > Transparent Color...). Good luck!
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!