How To Make Full-Sized, Non-Blurry Buttons in Photoshop

[OzzyKP]

Ok, this has long been a mystery for me. Some mods I've seen have buttons that look nice, crisp and normal sized all all the default Vanilla/BTS buttons. But others, many others, the buttons look very blurry and when seen in the civilopedia are much smaller in size than the vanilla icons. When I started making my own buttons, using DXTbmp as others here have recommended, I found that my buttons ended up the same way. Small and blurry:



So I did some searching and came across this comment by TheLopez:

TGA, I finally got it straightened out.

Basically for me used Photoshop and the DDS had to make sure that I had the "Explicit Alpha (DXT3)" option selected in the "Save Format" section, the "No MIP maps" option selected in the "MIP map generation" section and the "Blend Amount" set to 0% in the "Fade MIP Maps" section.

You can check out the results in any of the newly updated Great person mods in my sig or to see all of them combined you can see them in the Great Specialists mod.

And this one by Kael:

I redid every button in the game over the weekend (I had no idea how many there were until I started to pour through them). I think it will fix this. The problem was that I was including the mip maps in the images before (letting photoshop provide differently scaled models of the pics). Removing the mips lets civ4 resize them itself and it looks a lot cleaner (not to mention reducing the image size from 22k to 3k each).

Both of them seemed to have come across and then resolved the problem I was experiencing, but it took me a bit longer to figure out what they did and replicate it. Now that I have, I want to share it with y'all.

Since I couldn't figure out how to get it to work with DXTbmp I followed TheLopez' suggestion and decided to do it in Photoshop exclusively.

So, if you have Photoshop CS3, go here to get this free plugin:
http://developer.nvidia.com/object/photoshop_dds_plugins.html

Download and install that.

Then (and I'm making it easy for you) download this file:
http://www.oneandfour.org/images/Civ/buttonmaker.psd

Open that up in Photoshop. It has the Alpha layer already added and the file has two layers. The top layer, "layer 2" is the border. "Layer 0" is where you put your image.

Just select layer 0, and copy/paste or drag in whatever art work you want for the button. Then go to Layer --> Flatten Image.

Then go to File --> Save As. Save it in the .dds format. Make sure Alpha channels is selected (should be default).

Another dialog will pop up (yours won't be green though, that's just my awesome custom windows style, heh):


All those options should be set just as in the image. DXT3, explicit Alpha, and no MIP maps selected. Also, as TheLopez said, go to the "Fading MIP maps" section and make sure "Blend Amount" is set to 0%.

Click save and you're done!

 

[Shiggs713]

nice job. This makes me wonder if my buttons are blurry, though no one has said anything, and they look perfectly fine on my 19' flat panel.

 

[OzzyKP]

Yea, they're blurry & small.

The trick is the MIP maps. They prevent Civ from auto-sizing icons according to different monitors and resolutions and such. So the icons need to have MIP maps removed to look right for everyone.

 

[Shiggs713]

cool, sounds easy enough to fix, I have PS.

 

[OzzyKP]

Great.

rtghjghjghjg

 

[Deon]

I have the error "too many channels to export"...

 

[Maniac]

Anyone can check if their buttons are blurry by selecting the "Low resolution textures" graphics option.

 

[Shiggs713]

thats why I never can tell, I run everything on highest quality.

 

[asioasioasio]

Does this settings work better with other things, for example with units' textures?
It's shame to say, but i'm using this plugin for 2 years and always hit save (i just switch dxt3 to dxt1 sometimes)

 

[asioasioasio]

I have the error "too many channels to export"...

Probably you've deleted (or made invisible, or changed name) Background layer. Check also on Chanels Tab if you have 5 channels (RGB, Red, Green, Blue and Alpha)

 

[Arian]

And for those of you who don't have photoshop:
http://forums.civfanatics.com/showthread.php?t=278459

 

[RulerOfDaPeople]

Sorry to bump an old thread, but I am trying your method and really need some help. I saved my .dds file to the exact specifications (and correct path/filename) and save as options, however none of the dds files seem to work in the game. When ever I go into the game, the civs that I tried to make custom flags for have blank flags that are only the color of whatever their secondary civ color is.

What could this be?

I am using Photoshop 7 with your reccomended plugin. It can't be that can it?

 

[Shiggs713]

this is for how to make buttons, not flags.

 

[human machine]

Another way for people without Photoshop (like my poor self)
is to use GIMP (which can open pds files)
Use this plug-in to handle the dds files

 

[OzzyKP]

Sorry to bump an old thread, but I am trying your method and really need some help. I saved my .dds file to the exact specifications (and correct path/filename) and save as options, however none of the dds files seem to work in the game. When ever I go into the game, the civs that I tried to make custom flags for have blank flags that are only the color of whatever their secondary civ color is.

What could this be?

I am using Photoshop 7 with your reccomended plugin. It can't be that can it?

Yea, what Shiggs said, this is for buttons. But thanks for bumping it anyhow.

 

[Chiyu]

Thanks very much for this tutorial! Now all the buttons in my mod look nice and clean, even on lowest settings .

 

[RulerOfDaPeople]

I second that. I finally figured everything out and it looks great.

 

[OzzyKP]

I'm very glad people find it useful.

 

[Lava]

Ok, this has long been a mystery for me. Some mods I've seen have buttons that look nice, crisp and normal sized all all the default Vanilla/BTS buttons. But others, many others, the buttons look very blurry and when seen in the civilopedia are much smaller in size than the vanilla icons. When I started making my own buttons, using DXTbmp as others here have recommended, I found that my buttons ended up the same way. Small and blurry:



So I did some searching and came across this comment by TheLopez:


And this one by Kael:


Both of them seemed to have come across and then resolved the problem I was experiencing, but it took me a bit longer to figure out what they did and replicate it. Now that I have, I want to share it with y'all.

Since I couldn't figure out how to get it to work with DXTbmp I followed TheLopez' suggestion and decided to do it in Photoshop exclusively.

So, if you have Photoshop CS3, go here to get this free plugin:
http://developer.nvidia.com/object/photoshop_dds_plugins.html

Download and install that.

Then (and I'm making it easy for you) download this file:
http://www.oneandfour.org/images/Civ/buttonmaker.psd

Open that up in Photoshop. It has the Alpha layer already added and the file has two layers. The top layer, "layer 2" is the border. "Layer 0" is where you put your image.

Just select layer 0, and copy/paste or drag in whatever art work you want for the button. Then go to Layer --> Flatten Image.

Then go to File --> Save As. Save it in the .dds format. Make sure Alpha channels is selected (should be default).

Another dialog will pop up (yours won't be green though, that's just my awesome custom windows style, heh):


All those options should be set just as in the image. DXT3, explicit Alpha, and no MIP maps selected. Also, as TheLopez said, go to the "Fading MIP maps" section and make sure "Blend Amount" is set to 0%.

Click save and you're done!

Hi
What about for adobe photoshop user ??
Can I use this setting too ??

 

[RulerOfDaPeople]

Hi
What about for adobe photoshop user ??
Can I use this setting too ??

Err That's exactly what he's showing you with.