Last modified: October 9, 2002

Intro: Creating CDE Icons

Creating icons for the CDE popup menus is not difficult, but requires attention to detail and a few basic facts. This web page will walk through the creating of an icon. Knowledge of The GIMP, an image processing program, and a text editor such as "vi" or "Emacs", is required.

Let's create an icon of the new UB logo. We'll go to one of the UB Guide to Visual Identity pages, http://www.buffalo.edu/toolbox/visualidentity/download.shtml, and copy the icon named "ub_lbue.gif", shown here:

Interlocking UB Logo

Part 1: Using The GIMP

First, let's load our image into The GIMP, and get the size of the current image by right-clicking the image, then selecting "View->Window Info...":

GIMP Window Info Dialog Box

CDE pop-up menu icons have a set size of 32x32 pixels. As this image is not square, it will not scale properly. To avoid distortion, we will first make it square. Open a new image, and set the size of both dimensions to the larger of the dimensions of the image we're working with, in this case 131. Click the "White" radio button under "Fill Type", then click "OK".

GIMP New Image Dialog Box

Now, use "Edit->Copy" in the original image and "Edit->Paste" in the new image to create a copy of the image. The GIMP will automatically center the copied image, which is very convenient. Left-click on it to anchor it to the background.

New UB Logo Image Window

Now, right-click and select "Image->Scale". Change the value in the "New width" box to 32; because the "Constrain Ratio" box is selected, the "New height" box will also change to 32. Click "OK".

GIMP Image Scale Dialog Box

We now see a smaller version of the image. Make the window bigger, then hit the "+=" key on the keyboard three times to make the image bigger so we can see it more easily:

Scaled UB Logo Image Window

A whole bunch of dithering took place during the scaling as The GIMP attempted to present an accurate representation of the scaled image. This is bad, because when working with CDE we have a reduced palette of eight colors plus eight shades of gray plus transparent. To reduce the number of colors used, we'll convert this to an indexed image by right-clicking and selecting "Image->Indexed". In the resulting window, leave "Generate optimal palette" clicked and change the number of colors to 2, then click "OK" as shown here:

GIMP Indexed Color Conversion Dialog Box

The resulting image, while somewhat blocky, is now ready:

New Scaled UB Logo Image Window

Save it as an XPM image by choosing "File->Save As", then giving it a name with an extender of ".xpm", such as "ublogo.xpm".

GIMP Size As Dialog Box

Part 2: Hand-Editing

XPM files are ASCII-format files that can be viewed or edited using any text tool. Here is what "ublogo.xpm" looks like:

/* XPM */
static char * ublogo_xpm[] = {
"32 32 3 1",
" 	c None",
".	c #0E3DA1",
"+	c #F4F6F8",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"..........+++++++........+++++++",
"++.......++++++++++....+++++++++",
"+++.....++++++++++++...+++++++++",
"++......++++++++++++...+++++++++",
"+++.....+++++++++++....+++++++++",
"++......+.....................++",
"+++.....++.+......+.....+......+",
"+++.....++++.....+++...+++++....",
"+++.....++++.....++...++++++....",
"++++......++.....+.....+++.....+",
"++++++........................++",
"++++++++++++......+++++++++....+",
"++++++++++++.....+++++++++++....",
"++++++++++++.....+++++++++++....",
"++++++++++++......++++++++......",
"+++++++++......................+",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++",
"++++++++++++++++++++++++++++++++"};

C programmers will recognize this structure as a string array. The first line of the array gives the dimensions, the number of colors in the colormap, and the number of characters used to represent each pixel in the image. Our image has three colors, the two we specified in The GIMP plus the transparent, or "none", color. The next few lines define the characters used to represent each color and their corresponding RGB values. The remaining lines define the image itself. From looking at the above image, it's quite obvious that "+" characters are used to represent the background and "." characters to represent the UB logo.

As mentioned before, CDE has a fixed palette of eight colors plus eight shades of gray plus transparent (none). Here are the colormap values that should be used in XPM icon files:

" 	s none	m none	c none",
".	s iconColor1	m black	c black",
".	s iconColor2	m white	c white",
".	s iconColor3	m black	c red",
".	s iconColor4	m white	c green",
".	s iconColor5	m black	c blue",
".	s iconColor6	m white	c yellow",
".	s iconColor7	m white	c cyan",
".	s iconColor8	m black	c magenta",
".	s iconGray1	m white	c #dededededede",
".	s iconGray2	m white	c #bdbdbdbdbdbd",
".	s iconGray3	m white	c #adadadadadad",
".	s iconGray4	m white	c #949494949494",
".	s iconGray5	m black	c #737373737373",
".	s iconGray6	m black	c #636363636363",
".	s iconGray7	m black	c #424242424242",
".	s iconGray8	m black	c #212121212121",

CDE likes to have transparent backgrounds for its icons, so let's use the global search and replace capabilities of the editor to change all "+" characters to spaces. Now that we don't need the "+" character entry in the colormap, remove that line and change the "3" to a "2" in the first data line. Replace the "none" entry in the file with the one shown above, as it contains additional information that CDE likes to have. Similarly, replace the definition for the "." color with the "blue" entry shown above. If all went well, this is what you should have:

/* XPM */
static char * ublogo_xpm[] = {
"32 32 2 1",
" 	s none	m none	c none",
".	s iconColor5	m black	c blue",
"                                ",
"                                ",
"                                ",
"                                ",
"                                ",
"                                ",
"                                ",
"                                ",
"..........       ........       ",
"  .......          ....         ",
"   .....            ...         ",
"  ......            ...         ",
"   .....           ....         ",
"  ...... .....................  ",
"   .....  . ...... ..... ...... ",
"   .....    .....   ...     ....",
"   .....    .....  ...      ....",
"    ......  ..... .....   ..... ",
"      ........................  ",
"            ......         .... ",
"            .....           ....",
"            .....           ....",
"            ......        ......",
"         ...................... ",
"                                ",
"                                ",
"                                ",
"                                ",
"                                ",
"                                ",
"                                ",
"                                "};

Use the "sxpm" utility to view the image, and the "cxpm" utility to debug any formatting errors. If you want to see it in action, log in to any of the systems in 101 Bell Hall and click the pop-up menu over the calendar icon on the dashboard (it will installed on every CDE-enabled system shortly).

Finally, this icon can be copied to the directory "/etc/dt/appconfig/types/C" with a name such as "UBlogo.m.pm", which defines it as a medium size pixmap image. There are other image formats, as shown in the table below:

NameSize (pixels)format
ublogo.bm96x96Bitmap (B/W)
ublogo.pm96x96Pixmap (Color)
ublogo.l.bm48x48Bitmap (B/W)
ublogo.l.pm48x48Pixmap (Color)
ublogo.m.bm32x32Bitmap (B/W)
ublogo.m.pm32x32Pixmap (Color)
ublogo.t.bm16x16Bitmap (B/W)
ublogo.t.pm16x16Pixmap (Color)

For sake of completeness, so that these icons can be used in File Manager, Application Manager, and elsewhere, it is advised that all variations are created; however, if all you want are the dashboard pop-up menu icons, and all your displays are color, then the ".m.pm" variations will suffice.