Tutorials›Adding a Logo to a Website Template

So you've downloaded your website template, but you can't seem to figure out the best way to add your site or company logo. If that sounds like you, this tutorial will walk you through the steps needed to cut out your logo and incorporate it into your website template using the excellent and free Paint.NET. Note: While this tutorial focuses on Paint.NET, the general process should be pretty much the same when using other image editors like Adobe Photoshop or Paint Shop Pro.

Overview

• 1. Cutting Out Your Logo
• 2. Incorporating Your Logo

Cutting Out Your Logo

First, we need to get our logo on a transparent background so it'll cleanly and seamlessly integrate into the website template. If the logo's already on a transparent background you can go ahead and skip this section, otherwise follow these steps:

1. Locate the logo image and open it in Paint.NET.

   

2. Select the Eraser tool.

   

3. Use the Eraser tool to carefully trace around the edges of the logo (you can get in closer with the Zoom tool). You'll notice a checkerboard pattern appear in the areas you've erased; this indicates transparency, which is what we're going for here.

   

   When you're done, you should have something that looks a bit like this:

   

4. Next, select the Wand tool, which will let us quickly select the rest of the background we need to erase.

   

5. Click the background to select it. If it doesn't select the whole thing, or if it selects part of the actual logo, adjust the Wand tool's Tolerance setting (lower number = stricter selection) and click the background again. Repeat this process until you get the whole background but none of the logo.

   

6. Hit the Delete key or go to Edit > Erase Selection to erase the selected part of the background. You should end up with something like this:

   

7. If necessary, zoom in and use the Eraser tool to clean up any areas the Wand tool didn't catch. In the case of this logo, there are a few bits of the background left between some of the letters so we're going to erase those.

   

8. Now that we have our logo cutout, we'll go ahead and save it as a PNG (which retains the transparency) since it might be useful later on. Click File > Save As, change the file type to PNG (*.png), give the image a name, and click Save.

   

Incorporating Your Logo

With the logo on a transparent background, let's get to incorporating it into the website template:

1. We need to locate the template's logo area image. As the name implies, this is the image on which we'll paste the logo cutout (with its now-transparent background). This is usually the big blank area in the upper left or right of the template.

   

   Dig around in the template's images folder and look for the image. In the case of this particular template, it's homepage05.jpg.

   

2. Right click the logo area image, click Open with and select Paint.NET.

   

3. Open the logo cutout image (if it isn't open already) and click Edit > Select All.

   

4. Click Edit > Copy to copy the logo cutout to the clipboard.

   

5. Switch back to the logo area image and click the Add Layer button in the Layers panel. This will add an empty layer just above the Background one.

   

6. Click Edit > Paste.

   

   If the logo cutout is bigger than the logo area image, Paint.NET will ask how we want to handle it. If it does, just click Keep canvas size.

   

7. Drag the logo to position it, using the corner handles to resize it until it fits.

   

8. When you're satisfied with the logo's position and size, click Image > Flatten and then File > Save to save the logo area image.

   

You're done! Bring up the template in a web browser and the logo should now be visible.