making a button in Gimp(easy for noobs and for experts) LONG

[catron]

Okay, so today i thought it might be interesting to write up a tut for gimp. So first if you dont already have Gimp then for windows users use this link:
http://gimp-win.sourceforge.net

So now you have Gimp. Boot it up and there you should have a few windows.
But all we want is the main side. There you will see 'File' so click on that then press new.



now we are going to have another window that opens. in the width put 200 or 100 (depending on the size of the button you want) and for height 100 or 50 (same reason). Press 'OK'



now you will have the blank image:



goto 'Select' on the image window and press rounded rectangle:



now you will have another window that pops up. for the radius put at 50 and click concave off. Press 'OK'.



go baack to your image. it will have parts of it selected. bring up the gimp side bar and then press the bucket icon. make sure the background color is black so when you use the bucket it will be black:



go back to your image and use the bucket by left clicking.
Now what we do is go back to the 'select' tab and press shrink. a new window will pop up. change shrink selection to '2' like so:



now go back to the image. switch the background color to white like we did last time and then use the bucket by left-clicking again. so you will have this so far.



now you have that. goto image->canvas size and a window should pop up. we must change the image to a power of 2 for good rendering. for different sizes this may need to be changed. Press 'Resize':



goto 'layer'->''layer to image size'

now goto 'select' and then 'select none'.
goto 'filters'->'colors'->color to alpha :



save it. you need to play around with the colors for the best result.

My final design:




Later i will be adding how to do shadows and other things to make it look alot better, but my hand are getting tired so later i will.

Thanks,
Catron

[xDan]

I was just wondering how to do something like that for my website. So, thanks!

[Virion]

I never used Gimp before, but this could be very useful to let me familiarize with it. nice tutorial.

[catron]

@xDan i guess you would do it the same way, no reason to change it to a power of 2 tho.

@Virion Thanks, later today i will add a shadow tutorial for anything!

[BlindSide]

Thanks for taking the time to do this.

May I ask why you make it 200x100 first and resize to pow2 instead of just making the size pow2 from the start? Must be a good reason

[omaremad]

It also needs to be a square, not just pow2. In this case make it pow2 and just render the small shape.

[catron]

@ blindside - the button would be the size of the power of two. so this way it can be any size. but you could still make it any size with power of 2 just it is easier to do it later.

really? i didnt have a problem in irrlicht with it not being a square. as long is it has a power of two i think it is fine.

also i dont think ill get to the shadow tutorial today expect one tommorow.

[BlindSide]

It also needs to be a square, not just pow2. In this case make it pow2 and just render the small shape.

Does it really need to be square? I can make RTT's that are 1024x512 so I doubt a simple button has to be square...

[omaremad]

You can render non square textures and non pow2 textures, you just lose mipmaps if they arenot pow2 square. Hence there is no point in pow2 scaling if it isnt square.