W3C Validation
This document shows you, step by step, how to create your own logo image for the Sinorcaish stylesheet using the GNU Image Manipulation Program. Although the instructions in this document were developed under the Debian GNU/Linux operating system running the K Desktop Environment, there should not be too much difference when running under Microsoft Windows, Apple Mac OS X or a BSD-based operating system.
Before you start, you need to make sure you have the following installed on your system:
The Verdana Bold font is installed as a core component of Microsoft Windows and Apple Mac OS X. If you do not have this font, you may use either the Bitstream Vera Sans Bold font or the DejaVu Sans Bold font as a reasonable substitute. The Bitstream Vera font family was developed by Bitstream Inc. and is freely available from the GNOME Desktop Environment Fonts web site. The DejaVu font family is an extension of the Bitstream Vera fonts; these fonts may be downloaded from the DejaVu font web site. The Bitstream Vera and/or DejaVu fonts should already be installed on most Linux and BSD-based distributions.
This document assumes that you are familiar with using graphical applications, although you may not be an expert when it comes to using the GIMP. The following conventions are used in this document:
The notation means that you need to select from the appropriate window menu, then select the menu item.
Left-clicking and right-clicking refer to clicking the left or right mouse button. This assumes, of course, that you haven’t swapped the mouse buttons around; if so, you will need to mentally adjust every occurrence of these phrases.
When you are asked to press an alphabetic key, such as M, do not use the Shift key: if Shift is needed, it will be shown by something like Shift+M.
Selecting a window means using the mouse or Alt+Tab (or equivalent) to bring that window to the front and/or make sure the window is receiving keyboard input. In X Window parlance (as used on Linux and BSD-based systems), this is known as making sure the window has input focus.
Start the GNU Image Manipulation Program in the usual way. In general, the exact sequence of steps you need to perform to execute the GIMP depends very much on the system you are running. Try looking around your menu (if applicable), or type gimp on the command line.
If this is your first time starting the GIMP, you will be walked through the GIMP User Installation wizard. In most cases, clicking Continue throughout the wizard will be sufficient.
The GIMP is a very powerful software package for manipulating images. It comes with extensive documentation that you are encouraged to read. And it’s completely free!
Once the GIMP has started, you need to set the foreground colour to cyan. To do this, double-click on the current foreground colour (which is typically black). You can find the current foreground colour in the main toolbox window (whose window title should be “The GIMP”) under the various tool icon buttons. When the Change Foreground Color dialog box appears, remove anything that appears in the HTML Notation text edit box, then enter 00FFFF in that box and click OK.
Create a new image by selecting (you can also press Ctrl+N). The Create a New Image dialog box will appear. Click on the Advanced Options line, then make sure the settings in the dialog box match the following:
Entering the copyright symbol “©” in the GIMP can be
tricky. Under Windows, hold down the left Alt
key. While holding down this key, type 0169
using the numeric keypad. Finally, release the Alt key: the copyright symbol should appear. Under
Linux, the easiest way to obtain this character is to generate it using
another application, then use the clipboard to paste it into the GIMP.
For example, under KDE, run the kcharselect
Character Selection application. When this program appears, enter
00A9 into the UTF code field, press
the Enter key, then click on the To Clipboard button. Finally, press Ctrl+V in the Comment text box
in the GIMP. You can also use the OpenOffice Writer to do the same thing.
If worst comes to worst, you can always simply use the three ASCII
characters “(C)”!
Once the settings in the dialog box match the above list, click OK. A new window should open containing the image, as shown in Figure 1; this window will be called the image window for the rest of this document:
Figure 1: Screenshot of the new image window in the GIMP.
Now that you have created a brand new image, the first thing you should do is save it. To do this, select the image window and press Ctrl+S (or select from the image window’s menu). A Save Image dialog box will appear, asking for the name you wish to give the image. Type in an appropriate name with .xcf as the extension; sinorcaish.xcf will be used in this document. Make sure the Save in folder location is appropriate before clicking Save.
From now on, you should press Ctrl+S at the end of each step — you don’t want to lose all of your work due to a power failure, for example!
Make sure the image window is selected, then press D (or select ). The current foreground colour (as shown in the main toolbox window) should revert to black; the current background colour should remain white.
It’s time to enter the logo text! To do this, press T (or select ). The tool options in the main toolbox window should show Text as the title. Make sure the settings in that window match the following:
You can play around with some of these settings (particularly hinting and auto-hinting) in step 7; in general, however, leaving these settings as suggested here gives a more pleasing result.
Once these settings have been entered, select the image window, then click the left mouse at a point close to the top left-hand corner. Notice that the pixel position of the mouse is given in the bottom left-hand corner of the window; you should left-click when this shows 10, 0.
Once you left-click, the GIMP Text Editor dialog box should appear. Enter the full text of your logo; “Sinorcaish” will be used in this document. Notice how the final result appears in the image window as you type. Click Close when finished. This provides the guide text; you should end up with a window that looks like Figure 2:
Figure 2: Screenshot of the image window with the logo text “Sinorcaish”.
If the logo text is too long to fit into the image size, you may need to do one of two things:
To resize the current logo text, first left-click on any part of the text logo. Next, simply alter the value of Size in the text tool options. The logo text will be resized in “real time”. You may also modify the hinting and auto-hinting parameters in a similar fashion to see which settings look better for you.
If you change the size of the logo text, you may need to reposition it. To do this, press M (or select ). Then, hold down the left Shift key and use the left mouse button to drag the logo to the desired position. You can even zoom in on the image for a closer look to make this easier: press the + key (actually Shift+=) a few times, or use the menu.
Select the Layers dialog box by pressing Ctrl+L (or by selecting ). Right-click on the layer name corresponding to the logo text (in this case, Sinorcaish). Select from the pop-up menu that appears; this should cause the Layer Attributes dialog box to appear.
In the Layer Attributes dialog box, change the layer name to Guide Text. Make sure Set Name from Text is not selected before clicking OK.
Next, right-click on this newly-named layer and select . This should expand the dashed outline of the layer to the whole image, as shown in Figure 3:
Figure 3: Screenshot of the image window with the renamed layer name.
Select white as the current foreground colour. There are at least two ways of doing this:
Next, select the text tool once again by pressing T (or by selecting ). The tool options should still be the same as in step 6 (or step 7 if you tweaked the size of the logo text). Left-click at the same spot as you started the previous text string, that is, at pixel location 10, 0. The GIMP Text Editor dialog box should reappear. Enter the first part of your logo text, the part that is to be white (in this case, “Sinorca”), then click Close.
Depending on how accurately you clicked the left mouse button and/or whether you moved the guide text around in step 7, you may need to move the new text layer around until you get a perfect overlap (although you may still see faint traces of black around the edges). To do this, press M, then make sure that the Transform layer icon (the first one following the Affect: label) is selected in the Move tool options. Finally, move the white text around by holding down the left Shift key while dragging the left mouse button.
Once you have achieved a perfect overlap, move to the Layers dialog box by pressing Ctrl+L, right-click on the new layer name and select . Change the layer name to White Text, make sure Set Name from Text is not selected and click OK. Finally, right-click on the (new) layer name and select . You should end up with a window similar to Figure 4:
Figure 4: Screenshot of the image window with the white logo text “Sinorca”.
Now that you have entered the white part of the logo, you need to do the same for the orange part. First, set the current foreground colour to FF9800 (see the instructions in step 2 if you are not sure how to do this).
Next, select the image window and choose the text tool again by pressing T. Left-click near the location of the second part of the logo text — in the case of “Sinorcaish”, for example, the start of the “ish” is around pixel location 220, 0. Enter the part of the logo text that is meant to be orange into the GIMP Text Editor dialog box, then move the layer around (by selecting the move tool with the M key) until you achieve a perfect overlap.
Once the new text layer aligns perfectly with the guide text, change the layer name to Orange Text and expand the layer to the image size using — the details are contained in the previous step. Your image window should now look something like Figure 5:
Figure 5: Screenshot of the image window with the orange logo text “ish”.
Now for the fun part: creating the gradient transition from a darker blue to a lighter blue under the current text. Make sure the Layers dialog box window is selected by pressing Ctrl+L. Right-click on the Guide Text layer name in this dialog box window, then select from the pop-up menu. A New Layer dialog box should appear.
Once the New Layer dialog box appears, change the layer name to Gradient. Make sure the Layer Fill Type is set to Transparency before clicking OK.
Now that a new layer has been created to hold the gradient, set the current foreground colour to 3365CB and the current background colour to 8CA8E6. You can set the background colour in the same way as you set the foreground colour (see step 2 for the details); the only difference is that you double-click on the background colour instead of the foreground colour.
Make sure the image window is selected, then press L (or select ) to select the Gradient Fill tool (also known as the Blend tool). Make sure the settings in the main toolbox window match the following:
Once the Gradient Fill settings are correct, hold down the Ctrl key and drag the left mouse button in a horizontal direction from left to right in the image window. Releasing the left mouse button (and the Ctrl key) will draw the gradient.
The starting and ending pixel coordinates of the mouse drag depend very much on your logo text. The suggested formula is to take the starting point of the orange text (which you worked out roughly in step 10) and subtract / add 60 pixels or so to get the start and end positions respectively. For example, the “ish” in “Sinorcaish” begins at about pixel position 220 (the vertical coordinate is not important here). Thus, 220 ± 60 pixels gives a starting position of 160 and an ending position of 280.
In practice, you may need to experiment with the gradient fill tool before you are satisfied with the result. Always remember that pressing Ctrl+Z (or selecting ) undoes any mistakes you might make, allowing you to try again! You should end up with something like Figure 6:
Figure 6: Screenshot of the image window with the gradient layer in place.
The GIMP makes it very easy to add a shadow (also called a drop shadow) behind text letters. To add such a shadow, select the White Text layer by left-clicking on the layer name in the Layers dialog box. Next, select from the image window menu bar. A Script-Fu: Drop-Shadow dialog box will appear. Make sure the settings in this dialog box match the following:
Clicking on the OK button will create a dark blue shadow just to the right and below each of the white letters. You can experiment with almost all of the above settings (apart from Allow resizing) until you are satisfied with the result: simply press Ctrl+Z to undo the shadow and try again!
Once you are satisfied with the way the shadow looks, move to the Layers dialog box by pressing Ctrl+L. Rename the newly-created Drop-Shadow layer to White Text Shadow and expand the layer boundary to the image size using the pop-up menu item (the exact sequence of steps has already been covered in step 8). You should end up with a window that looks something like Figure 7:
Figure 7: Screenshot of the image window with the white text shadow.
Adding a shadow to the orange text is done in exactly the same way as step 12; the only difference is that the Orange Text layer needs to be selected instead of the White Text layer. You should also use the same settings for the Script-Fu: Drop-Shadow dialog box. Figure 8 should be the result:
Figure 8: Screenshot of the image window with the orange text shadow.
You are now on the home stretch! When you created the new image in step 3, you almost certainly created one that was too large. This unneeded space to the right of the orange text should be trimmed (cropped), as it only represents a logo image that is larger than it needs to be. Such an image will take more space on the hard drive and will take longer to download, sometimes significantly so.
To crop the image, press Shift+C (or select ). Click and drag the left mouse button from coordinate 0, 0 in the top left-hand corner to the bottom right-hand side of the image. A Crop & Resize dialog box will pop up; ignore it while you are dragging the mouse button. Once you let go, select the dialog box window and adjust the settings to match the following:
You will notice that the crop highlight automatically adjusts itself as you alter these values. Once you are satisfied with the new width, press the Crop button. The image will be resized, leaving you with something like Figure 9:
Figure 9: Screenshot of the image window cropped to the required final size.
If you haven’t already done so, save the current image by pressing Ctrl+S. This image represents the final “high-quality” version of your logo; further manipulations will be done to a copy of this image.
To make a copy of the image, select the image window and press Ctrl+D (or select ). A new image window with “Untitled” in its title will appear; this window will be called the new image window, appropriately enough, for the rest of this document.
Select from the new image window’s menu. This causes all seven layers to collapse into a single layer.
Most images do not need the full range of colours offered by the RGB colour-space in which the image was created: converting it to an indexed format can save over 50% of disk space for the image, making it load a least twice as fast. In the case of the Sinorcaish logo, for example, the resulting image shrunk from 14,429 bytes to 6,576 bytes: a reduction of over 54%!
Select from the new image window’s menu. An Index Color Conversion dialog box will appear. Make sure the settings in this dialog box match the following before clicking OK:
You should end up with something like Figure 10; notice the new image window now has “indexed” instead of “RGB” in its title:
Figure 10: Screenshot of the image window converted to an indexed format.
Make sure the new image window is selected and press Ctrl+S (or select ). A Save Image dialog box will appear. Enter the name of the logo image filename with .png as the extension; sinorcaish.png will be used in this document. Once again, make sure the Save in folder location is appropriate before clicking Save. This will, in turn, cause a Save as PNG dialog box to appear. Make sure the settings in that dialog box agree with the following:
Clicking OK will save the image in Portable Network Graphics format, the format recommended by the World Wide Web Consortium for images. You should get a window similar to Figure 11:
Figure 11: Screenshot of the final image window (excluding Step 19).
(If you are not a perfectionist, you may safely skip this rather advanced step: jump directly to step 20 without further ado. If you don’t mind spending a little extra time and effort to produce the best possible logo, read on…)
The conversion to indexed format that the GIMP uses is good, but not perfect. In particular, the colours present in the final image may not be the ones selected during the design: there is no way to tag certain colours as being important. This can be especially noticeable with the light blue colour on the right-hand side of the image and the white used in the logo text. The solution is to manually fix the colour palette used by the image.
Make sure the new image window is selected and press O (the letter “O”, not the number “0”; alternatively, select ). Left-click as close as possible to the top right-hand corner of the image. A Color Picker dialog box will appear. Write down the Hex hexadecimal value of the colour: although it should be 8ca8e6 (the colour chosen in step 11), it is more likely to read something like 8aa9e6 — at least, this was the case for the Sinorcaish logo! Although this colour is similar to the desired colour, it is sufficiently different that the transition between colours will be noticeable.
Select the main image window again and open the Colormap editor dialog box by selecting . Now increment the colour index value from 0 to 255 until you find the one corresponding to the value you previously wrote down. In the case of the Sinorcaish image, for example, colour 8aa9e6 corresponded to index 222. Change the HTML Notation edit box from the noted value to ff0000 (red), as shown in Figure 12:
Figure 12: Screenshot of the Colormap dialog box.
Doing this allows you to see exactly which pixels correspond to the relevant index, as shown in Figure 13:
Figure 13: Screenshot of the image with modified palette index.
Having confirmed that the only pixels changed are on the right-hand side of the image, change the HTML Notation edit box to the correct value of 8CA8E6.
Now, repeat this entire process with the white pixels used in the centre of the white text: the pixel colour should be ffffff, although it was fefffc in the case of the Sinorcaish logo. Other pixel colour values are not so critical. Finally, save the image by pressing Ctrl+Shift+S (or select ), which gives you the opportunity of confirming the Save as PNG settings.
There are two further optional steps: adding PNG image-specific comments, and creating an optimised version of the image. The first requires the sng program, the second the pngcrush program.
The Portable Network Graphics specification defines numerous text string keywords that can be used to annotate a PNG image. These keywords include “Title”, “Author”, “Description”, “Copyright” and “Comment”. Unfortunately, the GIMP does not support most of these keywords; in fact, some versions of the GIMP do not even support the “Comment” field correctly. The solution is to use sng to convert the image to a text file, edit that file and reconvert to a PNG image.
To convert your logo image to a text file, type the following on the command line, replacing filename.png with your logo image’s filename:
sng filename.png
Next, edit the resulting text file filename.sng
using your favourite text editor. Search for the line starting with
“IMAGE {” and add something similar to the
following before that line:
![[Screenshot of the GIMP new image window]](logo-screen1.png){kind=logo}
![[Screenshot of the image window with logo text]](logo-screen2.png){kind=logo}
![[Screenshot of the renamed image layer]](logo-screen3.png){kind=logo}
![[Screenshot of the white logo text]](logo-screen4.png){kind=logo}
![[Screenshot of the orange logo text]](logo-screen5.png){kind=logo}
![[Screenshot of the gradient]](logo-screen6.png){kind=logo}
![[Screenshot of the white text shadow]](logo-screen7.png){kind=logo}
![[Screenshot of the orange text shadow]](logo-screen8.png){kind=logo}
![[Screenshot of the cropped image]](logo-screen9.png){kind=logo}
![[Screenshot of the indexed image]](logo-screen10.png){kind=logo}
![[Screenshot of the saved indexed image]](logo-screen11.png){kind=logo}
![[Screenshot of the Colormap dialog box]](logo-screen12.png){kind=logo}
![[Screenshot of the modified image]](logo-screen13.png){kind=logo}
tEXt {
keyword: "Title";
text: "The Sinorcaish logo";
}
tEXt {
keyword: "Author";
text: "John Zaitseff";
}
tEXt {
keyword: "Copyright";
text: "Copyright (C) 2004-07, John Zaitseff. All rights reserved.";
}
As you can see, you can add as many tEXt chunks as you
like, each having a different keyword and associated text. Please note
that the text part of each tEXt chunk must be in ISO 8859-1
format; the tEXt chunks must appear before
IMAGE.
Once you have added the tEXt chunks to the SNG text file,
you need to rerun the sng program. In
addition, it is wise to make a backup copy of the original image before
doing so:
cp -p filename.png filename.png.copy sng filename.sng
Assuming running sng was successful, the final step is to create a version of that image that is optimised for fast loading and minimal storage space using the pngcrush program. You can undertake this step even if you did not use sng. Type the following on the command line, replacing filename.png with the filename used by your logo image:
pngcrush -m 0 filename.png filename.png.new mv filename.png.new filename.png
You have finally finished creating a logo that you can use with the Sinorcaish stylesheet. Congratulations! You can now exit the GIMP by pressing Ctrl+Q (or by selecting ). Figure 14 shows the results of following these instructions for the Sinorcaish logo itself:
Figure 14: The final Sinorcaish image.
You can now incorporate your logo image into your site’s header, as suggested on the Sinorcaish Sample Page; you will need to know the filename of your logo (obviously), and its width and height. Happy coding!