Skip to main content

How to create your own icons

Posted by kirillcool on February 25, 2005 at 5:50 AM PST

Almost every application with GUI needs icons. And they better be sexy. And stylish. And consistent. And small. Here are few tips for programatically creating icons using Java 2D features

First, here is a screenshot of a demo that shows icons created using the techniques described in this entry. As you can see, it can paint any letter on any background, creating an optional plus sign and optional arrow that can point either to the right or to the left (note that the actual quality of the icons in GUI is better then saved JPEG version):

.

Here is an enlarged shot of a letter G:


The important visual details in the icons:

  • The letter itself is anti-aliased
  • A whitish highlight spot is in the upper left corner of the icon to make it look 3-D
  • This spot does not influence the black border of the icon, which is also anti-aliased
  • The plus sign has a semi-transparent white halo. Without halo, the red color is too close to the half-black pixels of the border. With completely opaque white color, the sign stands out too much
  • The arrow has semi-transparent white halo. Around horizontal part, the halo is more opaque, around the arrow head the halo is more transparent


And now for the interesting part - the code itself. First we create a completely transparent image. This way, when the icon will be drawn on non-white background, it will blend in nicely:

   BufferedImage image = new BufferedImage(ICON_DIMENSION, ICON_DIMENSION,
      BufferedImage.TYPE_INT_ARGB);
   // set completely transparent
   for (int col = 0; col < ICON_DIMENSION; col++) {
      for (int row = 0; row < ICON_DIMENSION; row++) {
         image.setRGB(col, row, 0x0);
      }
   }

Now, retrieve the graphics context of this image and set rendering hints for antialiasing
   Graphics2D graphics = (Graphics2D) image.getGraphics();
   graphics.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
      RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
   graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
      RenderingHints.VALUE_ANTIALIAS_ON);

Now, we fill a circle with specified background color
     
   graphics.setColor(backgroundColor);
   graphics.fillOval(0, 0, ICON_DIMENSION - 1, ICON_DIMENSION - 1);

Now, before we draw the border, we create a whitish spot. This one is not particularly tricky - based on the distance from a pixel to the spotlight location, make the color of the current pixel closer to white color (or the color of the spotlight). Important - don't forget to preserve the transparency (or opacity) of each pixel:
    
   // create a whitish spot in the left-top corner of the icon
   double id4 = ICON_DIMENSION / 4.0;
   double spotX = id4;
   double spotY = id4;
   for (int col = 0; col < ICON_DIMENSION; col++) {
      for (int row = 0; row < ICON_DIMENSION; row++) {
         // distance to spot
         double dx = col - spotX;
         double dy = row - spotY;
         double dist = Math.sqrt(dx * dx + dy * dy);

         // distance of 0.0 - comes 90% to Color.white
         // distance of ICON_DIMENSION - stays the same

         if (dist > ICON_DIMENSION) {
            dist = ICON_DIMENSION;
         }

         int currColor = image.getRGB(col, row);
         int transp = (currColor >>> 24) & 0xFF;
         int oldR = (currColor >>> 16) & 0xFF;
         int oldG = (currColor >>> 8) & 0xFF;
         int oldB = (currColor >>> 0) & 0xFF;

         double coef = 0.9 - 0.9 * dist / ICON_DIMENSION;
         int dr = 255 - oldR;
         int dg = 255 - oldG;
         int db = 255 - oldB;
  
         int newR = (int) (oldR + coef * dr);
         int newG = (int) (oldG + coef * dg);
         int newB = (int) (oldB + coef * db);

         int newColor = (transp << 24) | (newR << 16) | (newG << 8)
            | newB;
         image.setRGB(col, row, newColor);
      }
   }

Now, draw the outline of the icon in black. Here, based on the background color, we can choose the color of the border as lying somewhere 70-80% on the way from the background color to black. In this way, the icon will have matching border color.
   
   // draw outline of the icon
   graphics.setColor(Color.black);
   graphics.drawOval(0, 0, ICON_DIMENSION - 1, ICON_DIMENSION - 1);

Now, take the input letter and make it capital (this looks much better on icons). Then, set font that is a few pixels smaller than the icon dimension. Compute the bounds of this letter, and set the position for this letter so that it will be centered in the icon's center:
       
   letter = Character.toUpperCase(letter);
   graphics.setFont(new Font("Arial", Font.BOLD, ICON_DIMENSION-5));
   FontRenderContext frc = graphics.getFontRenderContext();
   TextLayout mLayout = new TextLayout("" + letter, graphics.getFont(),
      frc);

   float x = (float) (-.5 + (ICON_DIMENSION - mLayout.getBounds()
      .getWidth()) / 2);
   float y = ICON_DIMENSION
      - (float) ((ICON_DIMENSION - mLayout.getBounds().getHeight()) / 2);

Now we can draw the letter (in black color):
   // draw the letter
   graphics.drawString("" + letter, x, y);

Put optional plus sign in the top-right corner of the icon. First, create a semi-transparent white background for it, and then draw a red plus-sign two pixels thick:
   // if collection - draw '+' sign
   if (   int height = 6;
   BufferedImage image = new BufferedImage(width, height,
      BufferedImage.TYPE_INT_ARGB);
   // set completely transparent
   for (int col = 0; col < width; col++) {
      for (int row = 0; row < height; row++) {
         image.setRGB(col, row, 0x0);
      }
   }

Get the graphics context, set antialiasing hint and draw an arrow of specified color:
   Graphics2D graphics = (Graphics2D) image.getGraphics();
   graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
      RenderingHints.VALUE_ANTIALIAS_ON);

   // draw arrow
   Polygon pol = new Polygon();
   int ya = 3;
   pol.addPoint(1, ya);
   pol.addPoint(width / 2 + 3, ya);
   pol.addPoint(width / 2 + 3, ya + 2);
   pol.addPoint(width - 1, ya);
   pol.addPoint(width / 2 + 3, ya - 2);
   pol.addPoint(width / 2 + 3, ya);
   graphics.setColor(color);
   graphics.drawPolygon(pol);

And now for the tricky part - we have to compute the halo. Here, if an arrow pixel was completely opaque, it should have less transparent halo than arrow pixel that was only partly opaque (as on arrow's head for example). Here, we create another image with the halo footprint, and then draw the original arrow on top of it. Each arrow pixel contributes to its 8 neighbouring pixels. The final opacity of the halo footprint is the maximal opacity of all neighbouring arrow pixels:
   // create semi-transparent halo around arrow (to make it stand
   // out)
   BufferedImage fimage = new BufferedImage(width, height,
      BufferedImage.TYPE_INT_ARGB);
   // set completely transparent
   for (int col = 0; col < width; col++) {
      for (int row = 0; row < height; row++) {
         fimage.setRGB(col, row, 0x0);
      }
   }
   Graphics2D fgraphics = (Graphics2D) fimage.getGraphics();
   for (int col = 0; col < width; col++) {
      int xs = Math.max(0, col - 1);
      int xe = Math.min(width - 1, col + 1);
      for (int row = 0; row < height; row++) {
         int ys = Math.max(0, row - 1);
         int ye = Math.min(height - 1, row + 1);
         int currColor = image.getRGB(col, row);
         int opacity = (currColor >>> 24) & 0xFF;
         if (opacity > 0) {
            // mark all pixels in 3*3 area
            for (int x = xs; x <= xe; x++) {
               for (int y = ys; y <= ye; y++) {
                  int oldOpacity = (fimage.getRGB(x, y) >>> 24) & 0xFF;
                  int newOpacity = Math.max(oldOpacity, opacity);
                  // set semi-transparent white
                  int newColor = (newOpacity << 24) | (255 << 16) |
                     (255 << 8) | 255;
                  fimage.setRGB(x, y, newColor);
               }
            }
         }
      }
   }

The final step - reduce the opacity of the halo by 30%. This is needed to reduce complete opacity around vertical and horizontal lines:
   // reduce opacity of all pixels by 30%
   for (int col = 0; col < width; col++) {
      for (int row = 0; row < height; row++) {
         int oldOpacity = (fimage.getRGB(col, row) >>> 24) & 0xFF;
         int newOpacity = (int)(0.7*oldOpacity);
         int newColor = (newOpacity << 24) | (255 << 16) |
            (255 << 8) | 255;
         fimage.setRGB(col, row, newColor);
      }
   }

Now, draw the original arrow on top of its halo
   // draw the original arrow image on top of the halo
   fgraphics.drawImage(image, 0, 0, null);

Going back to the original image (the letter and optional plus sign) - draw the arrow image on top of it:
   BufferedImage arrowImage = getArrowImage(arrowColor, ICON_DIMENSION);
   graphics.drawImage(arrowImage, 0, ICON_DIMENSION
     - arrowImage.getHeight(), null);

Arguably, this was a lot of code. On the other hand, you can now create icon with any letter, any background, optional plus sign and optional arrow of any color. See how nice your application can become:

Related Topics >>