Tutorial: 2. Adding your logo using Photoshop
Level: Intermediate. Published on 3 July 2002 in How to add your own logo
This tutorial shows you how to add an example logo to one of the PageKits using Adobe Photoshop.
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 Photoshop, 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 Photoshop, 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 W key):
In the Magic Wand Options, select a Tolerance of 70, and make sure Anti-aliased and Contiguous are enabled:
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 Photoshop 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 so that you can accurately click on the white bits:
Photoshop will then select all the white areas in the image, so that we now have our whole 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 Inverse from the Select menu:
You should then have just the logo selected, as follows:
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 (Windows) or Command+C (Mac) to copy the selected parts of the image. Then switch to the highlife.psd window and press Control+V (Windows) or Command+V (Mac) to paste the logo into the PSD.
Your logo should then appear in the PageKit window as a new layer (probably called "Layer 1"). 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 Layers 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 Layers 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 eye icons in the layers "highlife" and "timemachine" in the Layers palette to hide the text:
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 Layers palette, then click in the Opacity box and change the value of 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 Photoshop (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 select the Rectangular Marquee tool:
Duplicate the PSD (Image > Duplicate), 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) and use File > Save for Web to save your new slice over the old left.jpg in the PageKit's images folder. Don't forget to choose JPEG in the Save for Web dialog!
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 Lasso tool and the Quick Mask. 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!