How to make Aero.msstyles compatible pngs., Example: Start button Options

[Michael]

How to make Aero.msstyles compatible pngs.

You’ll need those 2 programs:
- Photoshop CS2
- Solid Converter GX

1. Search which image you want to modify. In my example I’ll take IMAGE_872, which is the normal start button.

 IMAGE_872.png ( 14.42K ) Number of downloads: 195


2. Look at the pictures resolution, it should be 60x138 so as you see the start button has 3 states :
-Normal
-Hovered
-Pressed
So divide the 138 with 3 and you’ll have the size of a single state, which is 60x48

3. Now open Photoshop and make a new image with the size of 60x138 and use the Rectangular Marquee Tool to make a selection of 60x48 and that 3 times, it’s easier for the later stuff if you make it in a different color too. Now go on and draw your new start button as I did and remove the color full background. Now save it as a png file.

 Unbenannt.jpg ( 2.55K ) Number of downloads: 169
 Unbenannt2.jpg ( 3.63K ) Number of downloads: 123
 Unbenannt3.jpg ( 3.96K ) Number of downloads: 171


4. Let’s go to the nifty part, converting the image.
Open Solid Converter and choose the png file which you just had saved.
Now select Bitmap as the format which it should have at the end.
Convert it with these settings:

 Unbenannt4.jpg ( 141.2K ) Number of downloads: 431


5. If you have done everything right, you should have such a bitmap file now:
(This is a good sample about how the start button would look like without my guide )

 Untitled_1.jpg ( 3.03K ) Number of downloads: 129


Open the saved bitmap file now in Photoshop, and the png file too. Copy the png file and paste it over the bitmap now move them that they have exactly the same position.
Select all using the Rectangular Marquee Tool, press “Ctrl + Right mouse button)
And choose background.

 Unbenannt6.jpg ( 7.77K ) Number of downloads: 117


Press “Del” now and Choose the Paint Bucket Tool to make the whole background black, like in this picture:

 Unbenannt7.jpg ( 3.13K ) Number of downloads: 121


Save it and overwrite your bitmap with it, don’t change any settings, it must remain as it is.

6. Convert the modified bitmap to a png file using Solid Converter and replace the original IMAGE_872 with the new png you just created. If you made everything right, it should look like this (I know, not the sexiest example, but it did its job so...):

 Unbenannt8.jpg ( 2.87K ) Number of downloads: 135


If it does, congratulations, you’re done! You can use this guide on any png you have problems with.


Oh, and if it helped you, give me a rep point, now that we have the system again .

This post has been edited by Michael: Dec 11 2006, 04:42 PM

[Willy]

Thanks, I believe this topic should be pinned for future reference.

[ingeniouspieman]

Nice job, great tutorial

[jordy.green]

OOOOOOhhh great stuff thanks alot michael!

[jordy.green]

Ehh it did work but now i have no aero :S look.

[Karl]

it appears Vista will also take BMP images if you just stuff them in place of a PNG.

There are some discoloration issues that have to be resolved, but at least it doesn't require an additional $29.99 software package!

[jordy.green]

Ohh i have got it working with glass now i made a new folder and put it in there

[Michael]

it appears Vista will also take BMP images if you just stuff them in place of a PNG.

There are some discoloration issues that have to be resolved, but at least it doesn't require an additional $29.99 software package!

Indeed, i'll look around for a free alternative tool, if i found one, i'll update the guide.

[SoftecH]

nice one, Icon workshop can also be used for this job, but yah that too need to buy, anyway as Michael said , I'm gonna look if any freeware is possible for this , then will let you know...

[NetRolller 3D]

There is also a much easier method: use Paint Shop Pro to edit the image (instead of Photoshop), it will work without any conversion or such, as it has proper PNG transparency support. Also, if you have PNG files that were made with another program, you can check them in PSP to see if they are correct. They should have a checkered background when you open them with PSP.

[Tony291993]

There is also a much easier method: use Paint Shop Pro to edit the image (instead of Photoshop), it will work without any conversion or such, as it has proper PNG transparency support. Also, if you have PNG files that were made with another program, you can check them in PSP to see if they are correct. They should have a checkered background when you open them with PSP.

This method is slighty cheaper than buying Paint Shop Pro (unless you have to buy Photoshop ).

[Hiroshi-Old]

or..use GIMP to create aero compatible .png files.. really now..

[''El'' Buga™]

The images are off.

[Pocket PC]

Wait a minute I remember I had a free converting utility.Give me a few minutes to find it

[Pocket PC]

YES! I found it! Here is the program.I hope the person who made it doesn't mind that I share it. Theres a shot showing what it looks like.You drag as many images as you want and it converts it. I hope this helps.

Attached File(s)

 Alpha_Image_convertor.zip ( 453.01K ) Number of downloads: 401
 The_Converter.PNG ( 157.84K ) Number of downloads: 54