How to Create a Transparent Icon

Whether you want new icons for your computer’s programs and file images or to use online for gaming, chatting and message boards, you can create your own custom ones with just a few mouse clicks. When you draw your own icons, give them an extra added edge with transparency tools, which are available with the Photoshop graphics program included in the Adobe Creative Suite. Transparency allows your icons to layer on top of a background or other object and have the backdrop show through, avoiding the telltale white design box.

  1. Open Photoshop and click “File,” then click “New.” Name the file “MyIcon” and set your preferred dimensions. Icons are small files, with some sites requiring dimensions of 48 x 48 pixels, for example. Set the “Mode” to “RGB Color” and click the “Transparent” button under the “Contents” menu, then click the “OK” button.
  2. Step 2

    Click “View” and choose “Fit on Screen.” This doesn’t enlarge your icon, it just gives you more room to draw.

  3. Step 3

    Click the “Paintbrush” tool on the “Tools” palette on the left side of the screen. Note the new toolbar at the top of the screen. Pull down the “Brush” menu and select a brush head to use to draw the outline of your icon. Check the “Wet Edges” box on the toolbar.

  4. Step 4

    Choose a color for the outline from the “Color Picker” by double-clicking the top left colored square of the two overlapping squares. Double-click on a color, then click the “OK” button. Hover your mouse over the “MyIcon” box and notice the cursor changes to the brush head. Draw the icon outline. Note that the outline is transparent; you can see through it to the checkerboard pattern below.

  5. Step 5

    Click the “Fill” tool, which looks like a tipping paint bucket. Notice the new toolbar at the top of the screen. Change the “Opacity” slider to 50%, then click inside the outline you just drew, which fills with transparent color.

  6. Step 6

    Click the “Paintbrush” tool again and change paint colors, then add more features and elements to the icon. The “Wet Edges” check box will remain checked until you uncheck it, so you don’t need to worry about checking it again.

  7. Step 7

    (Optional) Click the “Text” tool, which looks like a “T,” then click your cursor inside the “MyIcon” box. The cursor changes to a blinking line and a new toolbar appears. Select a font, size and color, then type your name, the name of the icon or a short phrase. The color remains at the 50 percent transparency.

  8. Step 8

    Save the icon by clicking “File” and “Save As” and choosing “GIF” for the format option; “GIF” files are the only ones that allow transparency.

    You can use other software programs to make icons, but Photoshop is the only way to get a transparent image. Your computer’s Microsoft Paint, which is included in your installation package, allows basic icon drawing and design, but it can only handle transparent backgrounds, not actual image transparency.

«
»