home / articles / frontpage

Creating eye-catching logos with Image Composer

If you have recently purchased FrontPage 98 then you will no doubt be wondering what Image Composer can do for you. In previous articles I have described how to use the Button Wizard as well as make custom button templates. But as well as plenty of navigation buttons, the usual web site also needs plenty of logos, especially for a company site. In this article I will   describe a neat way to create web-ready logos that will help make your site stand out from the others.

Start Image Composer, and select the menu command File|Composition Setup. In the Current Composition part of the Composition Setup window, enter the width in pixels for the final logo (height is not usually important here). Most logos are between 400 and 600 pixels wide, although if your site uses navigation bars or frames, you should aim to make the logo a little smaller. Having done this, click on the color button in the Composition Setup window and change the color to match the background color of your web page. After you have done this, click on OK to return to Image Composer. You will now notice that the background color and the guidelines in the Image Composer window have been altered - this gives you a rough guide to how large you should make the logo.

The next procedure is to make a text object. To do this, click on the Text button in the toolbox (). The Text menu will then appear - select an appropriate font for your logo. You will find that a strong, bold typeface will work well for a logo - here I have used 32 point bold Impact. If you don't have this font, it is part of the free high quality font pack available from the Microsoft web site. The color of the text at this stage doesn't matter, but it is a good idea to ensure it isn't the same color as the composition area!

After selecting an appropriate font, click somewhere in the composition area to place some text. An annoying feature in this version of Image Composer is the fact that you have to keep resizing the box around the text if you type too much or increase the font size. When you are satisfied with the text, click anywhere in the window and the text object will be rendered. Note that you are able to move the text object around anywhere on screen, but it is best to place it in the center of the composition area:

A good idea at this stage is to select the text object by clicking on it, then using the Image Composer clipboard (Edit|Copy and Edit|Paste) to make several copies of the text. You can then play around with the text at will. This also gets round the problem of the rather deficient undo facility.

Having made the text, the next stage is to find an appropriate image to use as a fill for the text. In this example I have used an image created in my favorite graphics package, Bryce 2. As an alternative, you could use a scanned image, a PhotoCD photo, or maybe an image from a clipart collection. Images are loaded into Image Composer using the Insert menu command (e.g. Insert|From File loads an image from disk). After loading the image, ensure that it is placed behind the text object by selecting the image then using the menu command Arrange|Send to Back. You then need to resize the image so that it is slightly larger than the text object:

When this is done, select both the image and the text object in that order (Shift-clicking with the mouse selects multiple objects). Then click on the Texture Transfer button in the toolbox () and select the Transfer Shape option, using 100% opacity. If all goes well, clicking on Apply will cause the text object to disappear behind the image. Move the image away and you will find that the text object has now acquired the texture from the image.

Applying a drop shadow

To make this logo stand out from the web page, it is often a good idea to apply a slight drop shadow. To do this, select the text object, then click on the Effects button in the toolbox (). Scroll along until you find the Drop Shadow effect. Clicking on the Details click-tab will enable you to change the default settings (a good idea). Most people use drop shadows down and to the right, so to be more original, I will use one dropped down and to the left. The other settings I used were a Distance of 6, an Opacity of 100, an Angle of 225 degrees, and quite a hard edge to the shadow. Finally, clicking on the Apply button adds the drop shadow to the logo.

Saving the image

Having made the logo, the next procedure is to save it for the web. Although it is possible to simply drag whole images out of the Image Composer window and into the FrontPage Editor, I cannot recommend this due to the low quality JPEG images it produces. A better alternative is to save the image from Image Composer onto disk, then drag the file into the FrontPage Explorer.

To save the image, click on the logo you want to save, then use the menu command File|Save Selection As. Ensure the Save as type is set to GIF and alter the amount slider to 10 [expert users might like to save as a GIF if the file size is smaller, but logos such as these are normally better saved as JPEGs]. The image can then be loaded into the FrontPage Editor using the Insert|Image menu command. The final image is shown below:

Lastly, if you are more adventurous you might like to use portions of your image to make a logo and selection of co-ordinated buttons. This isn't too difficult to do by using the ability of the Button Wizard to make use of custom textures (see example below).

And that's it. Don't forget to let me know if there are any other features of Image Composer you would like to see covered in a future article!

Author: Brett Burridge
Date: 05/07/98

More articles about FrontPage
More articles by Brett Burridge
Author Biography