Site Design 1: Logos
Download the XCF files for this section.
GIMP for Web Professionals is divided into multiple sections, with each
section ending in a Site Design project. The Site Design projects are
designed to demonstrate how to do particular tasks in the creation of a
real world Web site. By the time you've completed all the Site Design
projects you should be ready to create a Web site of your own!
In this Site Design project we look at creating Logos for web sites. A
logo is often the most visible and identifiable aspect of a Web site, so
it's important to recognize both how to design a logo with GIMP, as well as
how and where to place it on your site.
Wilbur Widgets Design Studio
The Wilbur Widgets Design Studio is in need of a logo for their web site.
The logo will not be used in print so we're free to focus on Web issues
alone for this project.
The studio isn't sure what they want for a logo, so we're going to offer a
series of text logos on which to base their idea. The first thing we need
from them is what text should be displayed in the logo. They want the
studio name, Wilbur Widgets, and a company tag line, "Purveyors of fine art
everywhere." We won't judge the merits of the tag line, just do as the
client asks.
 |
| Figure 5-3 |
There are 28 predefined logo generators available via the
Xtns->Script-Fu->Logos menu.
Each of these options will open a dialog window that allows you to specify
a font, color, size, and various other features for the logo. Figure
5-3 shows an example of the Cool Metal logo's configurable options.
One thing to note is that fonts on Linux come in two basic forms: scalable
and non-scalable bitmapped. The latter type are usually those found in the
directory /usr/X11R6/lib/X11/fonts/75dpi and are designed specficially for
use on computer displays. Scalable fonts are designed so that they scale
much better. Using a 75dpi Times font yields the result seen in Figure
5-7. Figure 5-8 shows the same logo using a scalable Times font (which
happens to be the URW version). Make sure you use the right font if you
expect to scale the font to something higher than around 36 points,
depending on the font.
Figure 5-7
Figure 5-8
With the Cool Metal logo, the 3D effect leaves no
space to place the tag line near the bottom of the text. Doing so would
block out the reflection and/or drop shadow and reduce the visual effect.
The only places left are behind the text or above it. Behind won't work -
the tag line is too long and will be hard to read if placed behind the
company name. So the tag line has to go on top. There are actually a few
other options to this, such as text along an arc, but we're not far enough
along to deal with that yet, so we'll just stick to straight text.
Since there really isn't any existing space to place the tag line, we'll
have to add some to this canvas window. Then we'll need to scale the
background to fit that new canvas size, move the existing layers down a
bit, and insert the new text.
- Resize the canvas using the Image->Canvas Size option of the Canvas
menu. Click on the chain link next to the ratio fields to allow you to
change the Y ratio without changing the X ratio. Set the Y ratio to 1.2,
which will increase the height of the Canvas window. At the bottom of this
dialog is a small box showing the current size of the Canvas window inside
a region that will be the new size. If the change isn't obvious when you
change the Y ratio, move the mouse out of the dialog and back in - these
two boxes should be updated. Drag the inside box down. This will force
the additional space in the Canvas to be added along the top edges of the
existing layers.
- Now, scale the background to fit. Click on the background layer's name
in the Layers and Channels dialog. Open the Layers menu and select Layer
to Imagesize. The layer should scale itself to fill the new space you just
added.
- Add a guide along the top of the text. Drag a guide down from the top
ruler and place it just above the company name.
- Add the tag text layer.
- Align the new text layer with the guide. You may want to center the tag
line, or maybe offset it to the right or left a little. Hey, you're the Web
designer. Be creative!
Recap
In this section we used all of the skills you've learned so far in our
book, and even added a few extras like using the Gradient tool. The logo
is just the first step in designing a useful Web page. However, we still
have a few more basics to learn before we can get into HTML design. The
next section will look at dealing with color in your images, and how
to use Gimp's core set of drawing tools.
Prentice Hall PTR home
| Essential Series home
© 2001 Prentice Hall PTR
