Replacing the transparent logo in Basic Landing

In the newly released Basic Landing template, there is a feature which I have never used before. The sample logotype in the header (as seen in the screenshot to the right) is a .png file which uses an alpha channel to make the background transparent and the glow effect semi-transparent.

The sample logo can be replaced by an ordinary .jpg, .gif or .png without any transparency, that will work just as well as long as the pixel size is the same. But the transparency adds a nice effect, so I wanted to show you how it can be done. I will use Adobe Photoshop CS5 to create a new logo, but alpha channels are supported in many other image editors including GIMP.

First things first, a look at the original file

To the right you can see the included image as it appears when it is shown without any background. This is to show you what part is transparent in the included file.

This image was created using one of the default shapes included with Adobe Photoshop CS5, and I added an inner glow, a gradient and an outer glow effect to the shape. The shape was created as a separate layer to make sure it did not have any background. In Photoshop, this means that I see the shape on top of a grid with white and grey boxes, like this:

Let’s create a new logo!

To create a new logo, I start by creating a new document. The image dimensions should be 130 x 130 pixels. This time I want to use the letters “AV” as a logo so I use the text tool to enter the letters in an own layer. At this point, there is still a background layer with white color in the file:

Since I want the background to be transparent, I delete the background layer with the white color. Then I add a couple of effects to the text layer (once again an inner glow, a color gradient and an outer glow), which gives me a workspace that looks like this:

After tweaking the effects a bit, I am satisfied with the results so I want to save the file. To do this, I use the “Save for Web & Devices” option in the “File” menu, where I select the format PNG-24 and make sure that “Transparency” is marked. It should look like this (click the image to see it in full size):

Save the new logo image file

To overwrite the existing sample logo, I save the new image as logo.png in the “images” of the template. You can also give the file a different file name if you want to keep the old logo, in which case you need to edit the logo image element in index.html to make sure that the new image is loaded. This is the line to edit:

<img src="images/logo.png" class="alignleft" alt="Sample logotype" />

Replace the filename “logo.png” with the file name that you have given your new logo.

View the result

Once the image is in place and the HTML is edited and saved, it is time to review the results in the web browser. This is what it looks like now:

And if I insert the logo file here, where there is no background, it will look like this:

If you want to try this new logo without having to go through the tutorial yourself, just click the image above to open the new logo in a new window and save it to your copy of the Basic Landing template as described above.

You can also download the .PSD file for the logo I just created from here: basic-landing-logotype.zip (40 Kb)

Summary

That is how I created the logo image for the template. It can be done in several other ways, depending on what image editor you use. If you don’t want to use a .png image, a transparent .gif can work juse as well. Just be aware that the .gif image format does not support semi-transparency through alpha channels, it can simply make one of the 256 colors in the color palette transparent.

Did you find this tutorial helpful? Is there anything you would want to know more about regarding the Basic Landing template? Post a comment below!

.PSD, basic landing, graphics design, tutorials