View Full Version : Civ4 Button Maker for Gimp, Photoshop and PaintDotNet


asioasioasio
Jan 13, 2007, 04:36 AM
This are the files for GIMP, Photoshop and PaintDotNet wich allows to quickly create buttons
for Civilization IV. Tested on Gimp 2.0 and Photoshop 8.0 CS, PaintDotNet 3.0 but i think it should work with older versions and other
softwere wich could read .xcf or .psd files.

Download here:
http://forums.civfanatics.com/downloads.php?do=file&id=3994

You may also try button maker for making flags
http://forums.civfanatics.com/downloads.php?do=file&id=4796

Both files for Gimp (buttonmaker2.xcf), Photoshop (buttonmaker2.psd) and PaintDotNet
(buttonmaker2.pdn) contains layers so you need the basic graphic knowledge, especially knowing
what the layers are and how they work.

http://forums.civfanatics.com/downloads//layers_screenshot_w65.jpg

The top - is your border - under this is shadow with reduced opacity -
where i paint with black brush shadows on the ground (not always used)
Under this there's layer for pasting your custom graphics (it could be your custom background,
graphic for technology, building, unit etc).

The next layers are for units and promotions it contains backgrounds used by game.

http://forums.civfanatics.com/downloads//buttons_look_screenshot_3kj.jpg

So if you want use your plane with civ4 buttons style you can (i use this method) make screenshot
of the unit in nifskope, cut the gray background, and select only the unit (you should know how
to work with selections in graphic programs). I just rescale selected airplane to the proper size
(all graphics should fit the size of button wich is 64x64) and paste in the layer named "Paste Graphics Here".
Here's the result:

http://forums.civfanatics.com/downloads//example_screenshot_O48.jpg


EDIT: You may consider using one of sniperrabits background http://forums.civfanatics.com/showthread.php?t=202164

If You have Gimp or Photoshop you don't have to worry about the alpha it contains alpha - so just export it as .dds.

http://forums.civfanatics.com/downloads//channels_screenshot_SqV.jpg

If you don't have Gimp (freeware) or Photoshop but for example
Paint Shop Pro or PaintDotNet (Note that for PaintDotNet you don't have .dds export plugin - so you have to convert it to .bmp)
you should be available to open the files and export as .bmp. Don't forget in that situation
to merge in DDS Converter with alpa (alpha chanel butons.bmp file)

It saved me a tone of hours and it's very useful thing - I hope it'll help you in creating buttons too.

EDIT:
I was asked how to work with backgrounds. Hmm - just google for tutorials about selections and layers. You may find many tutorials about selections and layers and cutting down the image on the web i just present few of them:
For Gimp Layers http://www.gilesorr.com/papers/gimp-tutorial/gimp.html#AEN111 this tut also explans other basics of gimp
For Gimp using of Selections http://mercury.chem.pitt.edu/~sasha/LinuxFocus/English/January2001/article119.shtml
For Photoshop Layers: http://www.elated.com/articles/introduction-to-layers/
For Photoshop Selections: http://graphicssoft.about.com/od/photoshoptutorialsselect/Working_with_Masks_and_Making_Selections_in_Photos hop.htm
http://www.video-animation.com/photo_03.shtml

So all you have to do for use civ4 background is take a screenshot (PrintScrn) in nifskope (i prefer this method) or find some cool graphic over the net and delete the old background - for example this gray background in nifskope or the sky and grass in other graphic - to that you'll have to now how to work with selections, you have to cut selected unit from background
Cutting for Photoshop (two different methods): http://www.tutorialized.com/tutorial/Cutting/4032
http://www.photoshopcafe.com/tutorials/cutout/cutout.htm
Cutting for Gimp http://www.gimpguru.org/Tutorials/ReplaceForeground/
and finally resize cutted unit to fit 64x64 button and paste it to the buttonmaker

snipperrabbit!!
Jan 13, 2007, 07:30 AM
Does it work with Paindotnet v3.0 ?

asioasioasio
Jan 13, 2007, 09:03 AM
Since PaintDotNet is freeware I've made version for it too
You may donload new version :) it contains now buttonmaker2.pdn.
I don't know how to work with channels in PDN and probably there's no .dds plugin for it - so you shoul export it as .bmp and merge with alpha

GarretSidzaka
Jan 13, 2007, 11:42 AM
asio

you've made alot of people's lives easier, my friend.

:goodjob:

snipperrabbit!!
Jan 13, 2007, 12:18 PM
actually, I use paintdotnet to make the RVB work in various format and use DXTBmp to make the DDS importing the alpha mask provided by Laurino. It works fine and has the sectorization my mind requies. The tool you've provided will be of some help ( the bottom right corner of my former buttons needs some re-works ).
Thank you, asioasioasio !

C~G
Jan 13, 2007, 04:15 PM
Quick question came to my mind and it's probably the stupidest question of century but can you edit the borders of civbuttons?
Meaning them to have different outlook than that metal greyish?

Haven't tested it myself yet...

snipperrabbit!!
Jan 13, 2007, 05:13 PM
Do you mean something like this :

http://forums.civfanatics.com/uploads/105110/framebrown.gif

for some reskinned interface mod ?

ClassicThunder
Jan 13, 2007, 07:12 PM
Very Nice!

I made some of this for myself but the backgrounds will be very useful.

asioasioasio
Jan 14, 2007, 12:40 AM
@ All
Thank You. I hope it will be useful - restoring backgrounds could be annoying and here you have it :)

@ C~G
Yes naturally - the easiest way is to play with
Hue / Saturation and Brightness / Contrast
It's just another layer so changing collor won't affect the layers behind
You can even turn off the border - but's it's not the purpose for wich it was created :)

C~G
Jan 14, 2007, 03:12 AM
Do you mean something like this :Yeah, exactly that.
Yes naturally - the easiest way is to play with
Hue / Saturation and Brightness / Contrast
It's just another layer so changing collor won't affect the layers behind
You can even turn off the border - but's it's not the purpose for wich it was created :)I was thinking of creating different kind of texture for the borders. Mainly keeping eye on the tan colored interface.

Thanks for the answer and thanks for the tool, have to start experimenting with it. :)

snipperrabbit!!
Jan 14, 2007, 03:35 AM
or just asking me to release the one i've presented and may be some more later.
http://forums.civfanatics.com/uploads/105110/bordertan.zip

woodelf
Jan 31, 2007, 04:39 AM
This is super asio. Thanks. :goodjob:

asioasioasio
Feb 02, 2007, 01:25 AM
:)

I've added some explanation in first post and where to find some tutorials about making selections, layers, cutting images to paste them into button

strategyonly
Feb 08, 2007, 12:42 AM
So all you have to do for use civ4 background is take a screenshot (PrintScrn) in nifskope


I dont see a print screen there?? Or are you talking about the one on the Keyboard, , mine dont work? I think?????

asioasioasio
Feb 08, 2007, 01:38 AM
Example for photoshop - in gimp and pain.net idea is quite the same

1. Hit printscreen on keybord when you're in nifskope
2. Open your graphic program
3. Select Menu File\New - create new graphic file
4. Menu Edit Paste - paste the screenshot from nifskope.
5. Use different selection tool
Marquee Tool or Lasso Tool or Magic Wand Tool. When you hold mouse click longer other options will appear
http://www.un.org/events/workshop/dpi-unitar/2003/photoshop/images/toolbox.gif
When you hold mouse click longer on the button other options will appear
http://www.un.org/events/workshop/dpi-unitar/2003/photoshop/images/tools_selecting.gif
The simpliest is to cut the unit with part of surrounding gray background with Marquee Tool. And paste to new smaller file and then with Magic Wand Tool select the gray background and hit delete
http://www.un.org/events/workshop/dpi-unitar/2003/photoshop/images/magicwand_example.gif
6. Resize it to desired size - for example 64 x 64.
7. Select once again with Marquee Tool you're resized unit and paste to button maker in layer named "Paste Graphic Here" and make visible or hidden other layers to get needed background

Impaler[WrG]
Feb 08, 2007, 02:10 AM
I noticed all the buttons made with this tool have square corners rather then rounded ones like the default buttons. It looks like this is because theirs some extra grey color filling in the space between the rounded corner Frame and the edge of the image, it should be transparent but that would allow the pasted picture to show in that space instead. So what I have done is add some magenta in that space for the border layer and made it transparent on the other layers. Follow all of asiox3's steps pasting on the middle layer and merge down. Then as the final step select the magenta and cut it out to leave transparency (Gimp can do this very easily). The button will then have the rounded corners like those made by Firaxis.

I've attacked version 3, please check to make sure I haven't broken anything, I'm not much of a graphics man ya know.

asioasioasio
Feb 08, 2007, 06:52 AM
Sorry - i couldn't test it well on gimp cause the .dds plugin doesn't work on my pc. I thought when alpha is one of layers or should work fine - it works well in photoshop. If anyone could check Impalers button i would update the button

snipperrabbit!!
Feb 08, 2007, 12:11 PM
nice duck, asio

@Impaler : With proper alpha mask, I think it works properly

Anyway, I will get an eye on new version.

EDIT : checked buttons made with buttonmaker 2.0 and nothing is wrong

exemple :

http://forums.civfanatics.com/uploads/105110/fuelshortage.png

How to import as a new layer in Gimp ?

Impaler[WrG]
Feb 08, 2007, 12:39 PM
It seems to be working for me so I'm happy, I can round off the edges of existing square buttons, here is an example, your Sydney Opera House button originally had square corners as can be seen in the first screen shot, the second is the same button converted to rounded corners.

asioasioasio
Feb 13, 2007, 03:48 AM
hmm about this sydney opera house button probably i forgot to set up for dds 3.0 - it happens sometime that i use dds 1.0 with noalpha

NikNaks
Jul 18, 2007, 02:10 PM
I created a version with unit weapons (like the sword and axe from units) and merged it with the flag creator. If anyone's interested, I'll upload it.

asioasioasio
Jul 18, 2007, 11:34 PM
Yup it would be awesome to have it - the weaopns of units it's still tough part :)
Feel free to post it here or create new thread :)

NikNaks
Jul 19, 2007, 02:15 AM
Okay, here you are:
Some units don't have buttons like these (horse archer, longbowman, tank), so they're not included.

To use a weapon, simply turn on the visibility for the layer you want to use (in the same way as the backgrounds).
If you want to make a flag, turn off all layers except 'Border', 'Flag Layer Top', 'Flag Layer Bottom' and 'Paste Graphic Here'.

Also, if you want a skyline with another background, turn on 'Unit Air Bgr TOP', which allows you to have a desert or grass skyline if you wish.

This comes only in GIMP format. If someone (like Snipper) want it converted to PDN, I'll have a go.

See file at the end of the post.

If anyone would like any more info, post here.

Some examples of this in action can be found in Chuggi's Flavour Workers thread, where I am about to post buttons for them.

snipperrabbit!!
Jul 19, 2007, 03:27 AM
Yes, I encourages you to do it. Thanks !

NikNaks
Jul 19, 2007, 03:32 AM
Aw.. now I actually have to do it! :lol:

lamppost4
Feb 07, 2008, 08:57 PM
I don't quite understand what you mean by export to .dds.
I'm using gimp and I can't find that.

asioasioasio
Feb 07, 2008, 11:42 PM
You need to install .dds plugin for gimp first

http://nifelheim.dyndns.org/~cocidius/dds/