Creating a Transparent Icon

Sizing and making an image a transparent icon so it can be used on any background

Go to the free online editing program, Pixlr, at http://www.pixlr.com

Choose your language - English is the first icon on the left.

That takes you to http://www.pixlr.com/editor

The Task

A picture called alamo_chair.jpg is in My Documents folder called OL201

I want to resize the photo to make it more appropriate as an icon, probably 100 pixels on its largest dimension (height in this case)

I want to remove the black background so the chair is a transparent on a colored background.

The Process

  1. Choose Open Image from Computer
  2. Click on the Magic Wand - third row down on the right side of the toolbar
  3. Make sure the tolerance (at the top of the Pixlr frame) is set anywhere from 20 on up - depending on the intricacy of the figure you want cut out. The more distinct the figure, the less tolerance you need. That will select what you want to delete from the photo.
  4. On the Pixlr top toolbar, click on Edit, choose Invert Selection. You will see that the figure you want is selected.
  5. Go to Edit, choose Copy.
  6. On the Pixlr top toolbar, click on File, choose New. Name the file (alamo_chair_transion).
  7. Check the two boxes: Create New Image from Clipboard and Transparent.
  8. Then click OK. You will see a gray and white background behind the chair - it is transparent.

Now to resize to create an icon:

On the Pixlr top toolbar, click on Image, then Image Size.

Make sure the Constrain proportions box is checked.

Adjust the size. (make the height 100 pixels).

Click OK.

Go to the Pixlr top toolbar, click on File, Save

In the format box, choose PNG, transparent, full quality.

Rename the file so you can identify it: alamo_chair_tr_icon.png

Click OK.

Now let's load the icon onto a Bb vista page to test it:

Go to Bb Vista Site.

Page Options (button at top right of screen), Background color, Select color (dark)

Back to the Home Page.

Get file, choose a file (transparent_icons.html) and load onto the home page.

Now let's customize the course icon

Use the file drop down arrow to the right of the file, choose Edit Properties, Customize Link, Replace Icon, choose your new transparent icon: alamo_chair_tr_icon.png

Video demonstrating how to create transparent icons is on Bucks' iTunes U site.