Changing the Windows XP Start Button Icon - Editing the bitmap.
(Page 2 of 4 )
Go ahead and close Resource Hacker for now. We’re done with it until we have our custom graphic. Open up Photoshop, load your newly saved bitmap, and let’s get started customizing it.
If you’re like me and not a graphic designer, take the easy way out. Find an icon that you would like to use and size it to fit in a 25x20 graphic. Then we’ll just copy and paste it in when we’re ready.
With the original start button graphic loaded, set the zoom to 1000%. This should make it large enough to see individual pixels easily. Use whatever method you like to fill the entire image with black (0,0,0) pixels. I just used the pencil tool to make sure that there were no lighter pixels anywhere.
Any pixel that you want to be transparent later will need to be pure black. Any other color will cause partial transparency at best.
Now go to your other image and select whatever you would like to appear in your start button. Use the Copy command in the Edit menu. Return to the start button image and paste it in.
It should have pasted into a new layer. You can move it around if need be. Once you have it in place grab the eraser tool and clear any extra pixels that need to be cleaned up. As you erase around your objects, you should see the black pixels underneath. Once you have it the way you like it, press Ctrl + E to merge the two layers together.
Try to use a 20x20 graphic placed all the way to the left of the image. The right 5 pixels should remain black from the top to the bottom as they provide the padding between the start button graphic and the start button text.
You should now have a flat image of your icon on a black background. You’re almost done. Here’s the part you’ve been waiting for.
I’ve seen this question asked hundreds of times across the Internet and never have I seen a correct response. “How do you add transparency to the start button graphic?” Well, here’s how.
In Photoshop, switch to the Channels palette. If you’re editing the original, you’ll see a channel named Alpha 1. If you’re creating your own, just click the Create new channel button and it will create it for you.
Make sure that the Alpha 1 channel is selected. While it’s selected, make the RGB channel visible as well. You should see a reddish version of your image. Grab the pencil tool and set your foreground color to black (0,0,0) again.
Using the pencil tool on the Alpha 1 channel, color all of the pixels that you would like to appear transparent. They should become pure red. Then change the foreground color to white (255,255,255) and color all of the pixels that you would like to be opaque.
Alpha channels are used to define transparency levels in an image. Rather than making individual transparent pixels based on a selected color, an Alpha channel works as a sort of mask. It's a grayscale layer applied to an image. Black areas are transparent and white are opaque. Levels of grey create partial transparency based on color depth.
Now remove visibility on the RGB channel again so that you can only see the Alpha 1 channel. All of your pixels should be either black (transparent pixels) or white (all other pixels). You should not see any other colors here. Transparency is based off of this Alpha channel.
Now select the RGB channel and all visibilities should return to normal. You should again see your image on a black background. Now save your image as something like start_custom.bmp. In Photoshop you will be asked what bitmap format you want to use. Choose Windows 32-bit.
Now that you have your new graphic, we’re all set to make the change.
Next: Replacing the graphic. >>
More BrainDump Articles
More By Nilpo/Developer Shed Staff Writer
