I am bored with the same old buttons in webpages. I want more color, textures... I want to make a wooden button with different border colors for different states of the button. How would I do that?
Well, pretty simple... using Gimp...
Here are the steps...
Step 1:
First get a wooden plank! What I meant is search for and download a wooden texture image of your liking.
Step 2:
Open it is Gimp...
Step 3:
Cut out a rectangle out of the wood as per the needed size.
1. Select "Crop Tool" from Toolbox or Tools -> Transform Tools -> Crop.
2. Draw a rectangle over the required area. Use the Toolbar fields to enter the width and height in section "Size". I am going for 150 x 50.
3. Crop.
Step 4:
Now we have the button, well not really... we need a rounded border around it... let's do that...
1. Select "Rectangle Select Tool" or Tools -> Selection Tools -> Rectangle Select.
2. Check "Rounded Corners" option and set the radius to 16.
3. Draw a rectangle exactly along the edges of the image. It won't be that hard...
4. Click Select -> Shrink... Set the thickness as 2px (or more if you need a thicker border). Make sure "Shrink from image border" is checked.
5. Click Select -> Invert
6. Click Select -> Feather. Give 2px feather.
7. Use Bucket Fill Tool to fill the outer region with whatever color you need for the border. Make sure you have "Fill whole selection" on in Bucket Fill settings.
8. Click Select -> None
9. Repeat steps 1 to 3 on the current image.
10. Click Select -> Invert
11. Click Select -> Feather. Give 2px feather.
12. Click Layer -> Transparency -> Add Alpha Channel
13. Click Edit -> Clear or press Delete key.
14. Save as PNG format, otherwise the transparency won't be there.
There you go, you have a rounded wooden button with a border...
Keep playing around with the size, color, thickness and curve radius to meet your specific needs...
Comments please...
Contact Us
1 comments:
Hey, nice button you've made. Thank you for sharing this guide. I'm also using this tool http://besthdrprogram.com/ to create HDR images for my work. Check it out.
Post a Comment