Published on Mac|Life (http://www.maclife.com)


How to Make Your Own Icon
Created 2007-06-07 08:39

HOLIDAY BUYING GUIDE
    • 10 1337 Gifts for H4x0r World Domination
    • 10 Gifts for the Mac Switcher
    • 10 Creative Gifts for Designers

    Sponsored
SEE MORE ARTICLES

FEATURES
  • The Complete iMac History -- Bondi to Aluminum
  • New Apple Products--as Imagined by the Elite Gadget Press
  • Satire: 10 Ideas Steve Pitched to Disney
  • 50 Common Mac Problems Solved
  • From iMac to iPhone: A Video Trip Down Apple Announcement Memory Lane
SEE MORE FEATURES
TOP STORIES
  • iPhone Captures 17% of Smartphone Market
  • New Macs! Redesigned White MacBook, LED iMacs, Mac mini Refresh, and a Magic Mouse
  • 69 Awesomely Free Snow Leopard Compatible Apps
  • Fifth-Generation iPod nano
  • Screencast Video: Create 3D Photo Effects in Final Cut Pro
SEE MORE TOP STORIES
news
How to Make Your Own Icon
Posted 06/07/2007 at 11:39:00am | by Leslie Ayers
  • commentComments
  • printPrint
  • emailEmail
  • Delicious
  • Digg
  • StumbleUpon
  • Reddit
  • Slashdot
  • MacBlips

Once you've created the image you want to use as an icon (or downloaded one, or commissioned one, or whined to your designer friend until she created one for you), Iconfactory's IconBuilder plug-in for Adobe Photoshop (which also works with Macromedia's Fireworks MX) can do the rest. To use your handwritten signature as an icon for personal, top-secret folders, first write your name using a black Sharpie, scan it, and save it in Photoshop.

 

WHAT YOU NEED
>> Adobe Photoshop 7 or later ($649, www.adobe.com) or Photoshop Elements 2 or later ($84.99)
>> Image file

>> Iconfactory IconBuilder 8.5 ($79, iconfactory.com)

 

Step 1. Build in IconBuilder

 

Before you can start, you have to add IconBuilder's components to Photoshop. If you are using Photoshop Elements, adding an Action is a little more complicated because the app does not officially support Actions. However, there are smarties out there who have made it possible by creating workarounds, such as Ling Nero's snapActions for Elements 2 (freeware). You can find more info on the topic here. Our instructions are provided for use with Photoshop.

 

Drag the IconBuilder plug-in from the disk image you downloaded to the Photoshop plug-ins folder /Applications/Adobe Photoshop/Plug-ins. Then load the IconBuilder Assistant Action by launching Photoshop and selecting Window > Actions. On the Actions palette, click the tiny triangle in the upper-right and select Load Actions. Navigate to the IconBuilder Assistant.acn file in /IconBuilder Essentials/IconBuilder Assistant, select it, and click Load.

 

The IconBuilder Assistant Action is key to your success.

 

More...

 


Step 2. Right-Size Your Image

 

Open your image file and make sure it's the right size. The largest the width or height can be is 128 pixels. Select Image > Image Size (or press Option-Command-I). Uncheck Resample Image and, under Image Size, change the resolution to 72 Pixels/Inch. Check Resample Image and, under Pixel Dimensions, change the larger of the height or width to 128 Pixels.

 

Make sure your image doesn't exceed 128 pixels in width or height.

 

- - - - - - - - - - - - - - - - - - - -

 

Step 3. Get on the Grid

 

Open IconBuilder's Macintosh grid file (Macintosh.psd), located in /IconBuilder Essentials/IconBuilder Grid Files. Turn off the Sample icon layer by clicking the eye icon on the left. To place your image on the icon grid, click to your image and select it by pressing Command-A (or Select > All). Press Command-C (or Edit > Copy) to copy the contents. Click back to the grid image (Macintosh.psd) and press Command-V (or Edit > Paste) to paste the image onto a new layer.

 

Use the Move tool to drag the image completely inside the large square on the left. To run the IconBuilder Assistant Action, press Option-F9 (or Window > Actions), select the Generate Macintosh Standard Action under IconBuilder 8 Assistant.atn, and click Play (the right-facing triangle) at the bottom.

 


Move your pasted image so it fits within the boundaries of the large square.

 

More...

 


Step 4. Finish the Job

 

Now you need to apply the IconBuilder filter to the image you've placed on the icon grid. Select Filter > Iconfactory > IconBuilder 8.0. In the drop-down window in the upper-left, make sure Macintosh – Normal is selected by pressing Command-3. Click the Build button, which is a left-pointing arrow located between the two panes. Save your icon by clicking Save and designating a location for the file. Click Close to exit the filter. Now you can use your personalized icon as you would any other Mac icon.

 

Choose Macintosh – Normal from the drop-down in the upper-left.

 

- - - - - - - - - - - - - - - - - - - -

 

BONUS TIP: Creating an icon with a transparent background.

 

If it's something relatively simple, like a bold, black signature or a simple logo on a solid-colored background, you can remove the background using Photoshop's Magic Wand tool. Here's how:

 

1. Open the image in Photoshop. Select the Magic Wand tool and click on the background of the image. If it doesn't select all of the background initially, press Control and click in the area you want to add. In the drop-down that appears, select Add to Selection. Continue doing this until all of the background is selected. (Remember to include the spaces inside letters too.)

 

We had to do four Add to Selections to select all of the white background on the Mac|Life logo, including separate additions for the enclosed portions inside the lowercase a and e.

 

2. To select the text (rather than the background) go to Select > Inverse (or press Shift-Command-I). Press Command-X to cut out the text only (Edit > Cut). Create a new file with a transparent background (Command-N). Name your file, and be sure to select Transparent for the background next to Background Contents. To paste the cut text currently in the clipboard into your new file, press Command-V (Edit > Paste).

 

Photoshop helpfully creates your new file in the same dimensions and resolution as the open file. Just be sure to select Transparent for the background.

 

3. Now save your new file as a PSD file (default format). Now when you create your icon using the steps previously outlined, it will maintain a transparent background.

 

Our original image (top) and our new image, now with a transparent background (bottom).

 

COMMENTS: 6
TAGS: 
  • commentComments
  • printPrint
  • emailEmail
  • Delicious
  • Digg
  • StumbleUpon
  • Reddit
  • Slashdot
  • MacBlips
COMMENTS
  • Login or register to post comments

Source URL: http://www.maclife.com/article/how_to_make_your_own_icon

Links:
[1] http://www.adobe.com/products/photoshop/family/
[2] http://iconfactory.com/software/iconbuilder/
[3] http://www.geocities.com/rnlnero/PE2stuff2.html
[4] http://graphicssoft.about.com/od/pselements/qt/actions.htm
[5] http://www.maclife.com/article/review_adobe_photoshop_cs3
[6] http://www.maclife.com/article/create_photo_batch_processing_with_bibble_pro
[7] http://www.maclife.com/article/revive_dull_photos_in_iphoto