winJade: How to make Aero.msstyles compatible pngs. - winJade

Jump to content

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

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

#1 User is offline   Michael Icon

  • Forum Guru
  • PipPipPipPipPip
  • Group: Retired Staff
  • Posts: 2,077
  • Joined: 27-February 05
  • Gender:Male
  • Location:Germany
  • I'm running:OS X 10.6.4

Post icon  Posted 11 December 2006 - 04:28 PM

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.

Attached File  IMAGE_872.png (14.42K)
Number of downloads: 199

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.

Attached File  Unbenannt.jpg (2.55K)
Number of downloads: 169 Attached File  Unbenannt2.jpg (3.63K)
Number of downloads: 123 Attached File  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:

Attached File  Unbenannt4.jpg (141.2K)
Number of downloads: 442

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 :P)

Attached File  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.

Attached File  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:

Attached File  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...):

Attached File  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: 11 December 2006 - 04:42 PM

Posted Image
Remember Utakz...
0

#2 User is offline   Willy Icon

  • I (L) Vista
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 771
  • Joined: 09-December 04
  • Gender:Male
  • Location:Omaha, NE. USA
  • I'm running:XP SP2.

Posted 11 December 2006 - 04:39 PM

Thanks, I believe this topic should be pinned for future reference. :D
Posted Image
0

#3 User is offline   ingeniouspieman Icon

  • flickr.com/chriskphotography
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 1,425
  • Joined: 16-February 06
  • Location:UK
  • Interests:http://www.flickr.com/chriskphotography/
  • I'm running:XP Home SP3 + Vista Ultimate SP1

Posted 11 December 2006 - 05:04 PM

Nice job, great tutorial
0

#4 User is offline   jordy.green Icon

  • •°o.O jordygreen O.o°•
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 597
  • Joined: 06-January 06
  • Location:UK
  • I'm running:Windows XP Pro SP2, Win Vista 5308

Posted 11 December 2006 - 05:08 PM

OOOOOOhhh great stuff thanks alot michael!
Posted Image
0

#5 User is offline   jordy.green Icon

  • •°o.O jordygreen O.o°•
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 597
  • Joined: 06-January 06
  • Location:UK
  • I'm running:Windows XP Pro SP2, Win Vista 5308

Posted 11 December 2006 - 06:32 PM

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

#6 User is offline   Karl Icon

  • =Cold As Ice=
  • PipPipPipPipPip
  • Group: Expert
  • Posts: 3,081
  • Joined: 01-August 04
  • Gender:Male
  • Location:London, UK
  • I'm running:on caffeine

Posted 11 December 2006 - 06:33 PM

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!
Posted Image
Click above to visit my tech blog! | If you like my post, up my reputation.
0

#7 User is offline   jordy.green Icon

  • •°o.O jordygreen O.o°•
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 597
  • Joined: 06-January 06
  • Location:UK
  • I'm running:Windows XP Pro SP2, Win Vista 5308

Posted 11 December 2006 - 06:38 PM

Ohh i have got it working with glass now i made a new folder and put it in there :)
Posted Image
0

#8 User is offline   Michael Icon

  • Forum Guru
  • PipPipPipPipPip
  • Group: Retired Staff
  • Posts: 2,077
  • Joined: 27-February 05
  • Gender:Male
  • Location:Germany
  • I'm running:OS X 10.6.4

Posted 11 December 2006 - 06:43 PM

View PostKarl, on Dec 11 2006, 07:33 PM, said:

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. :)
Posted Image
Remember Utakz...
0

#9 User is offline   SoftecH Icon

  • Forum Guru
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 462
  • Joined: 10-March 06
  • Gender:Male
  • Location:India
  • Interests:Customizing and Hacking XP to Looks More Like Vista ~
  • I'm running:Windows Vista RTM

Posted 23 December 2006 - 12:37 PM

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... :)
Posted Image
0

#10 User is offline   NetRolller 3D Icon

  • "Linux... that's a game, isn't it?" :-D
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 652
  • Joined: 05-March 05
  • Gender:Male
  • Location:Betadrome, where betas live
  • I'm running:out of ideas

Posted 28 December 2006 - 07:59 PM

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.
Posted Image
0

#11 User is offline   Tony291993 Icon

  • Forum Guru
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 714
  • Joined: 23-April 06
  • Location:Australia
  • I'm running:Concept: Longhorn

Posted 29 December 2006 - 07:22 AM

View PostNetRolller 3D, on Dec 29 2006, 06:59 AM, said:

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 :blink:).
Posted Image
0

#12 User is offline   Hiroshi-Old Icon

  • Forum Guru
  • PipPipPipPipPip
  • Group: Member
  • Posts: 827
  • Joined: 23-January 06
  • Gender:Male
  • Location:Maryland, United States
  • I'm running:Ubuntu 7.10, Windows XP

Posted 29 January 2007 - 06:17 PM

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

#13 User is offline   ''El'' Buga™ Icon

  • Back from the dead...
  • PipPipPipPipPip
  • Group: Forum Guru
  • Posts: 1,002
  • Joined: 26-April 06
  • Gender:Male
  • Location:Rio De Janeiro! \o/
  • I'm running:Windows 7 RC1

Posted 11 February 2007 - 05:26 AM

The images are off.
Posted Image
0

#14 User is offline   Pocket PC Icon

  • My Pocket PC works again!
  • PipPipPipPip
  • Group: Loyal Member
  • Posts: 313
  • Joined: 22-February 06
  • Location:My Desk
  • Interests:RC Cars, Photography, Windows, Removing Timebombs.....
  • I'm running:XP,4074,Vista Ult,Win 7 7000,7077 (No Timebomb)

Posted 20 February 2007 - 05:56 AM

Wait a minute I remember I had a free converting utility.Give me a few minutes to find it
The Core i7 is awesome.
0

#15 User is offline   Pocket PC Icon

  • My Pocket PC works again!
  • PipPipPipPip
  • Group: Loyal Member
  • Posts: 313
  • Joined: 22-February 06
  • Location:My Desk
  • Interests:RC Cars, Photography, Windows, Removing Timebombs.....
  • I'm running:XP,4074,Vista Ult,Win 7 7000,7077 (No Timebomb)

Posted 20 February 2007 - 07:52 AM

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)


The Core i7 is awesome.
0

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users