Video Blogging Challenge – Day #16 | How to Create a Web Button with Gimp

Today is day #16 of the video blogging challenge. This is a video tutorial on how to create a web button using the free software, Gimp.

This tutorial is much easier to follow by watching the video, but there is also text below if you prefer to read the instructions.

Watch the Video:


from

Instructions

When you create a web button, whether it is inside Photoshop or Gimp, there are certain steps to take that will give a button a realistic look and feel, such as shadows and highlights.

It is not as easy to explain the stops involved unless you have a visual view, but I will do my best to help you understand how to create a realistic looking web button.

Here is how your final button will look:

Click Here for Instant Access button

Step 1: Login to Gimp

  • Go to the file menu and choose “New” to create your image size.
  • Enter 350 pixels for the width and 60 pixels for the height.
  • Click the “Advanced Options” button and choose “Fill with: White.”
  • Press the “OK” button to create a new background image on the canvas.

Step 2: Set Margins

  • Once you have the canvas properly sized, click the “Zoom” tool from the toolbox options.
  • Click on your new background image to zoom in for a closer view.
  • You should see rulers positioned at the top and side of the Gimp interface.
  • Click your mouse on the top ruler, hold the button down, and drag a guide to 10 pixels high.
  • Click your mouse on the side ruler, hold the button down, and drag a guide to 10 pixels wide.
  • Repeat the rules for the bottom and right side of your background image.
  • Choose the “Zoom” tool and zoom out to reveal the entire canvas.

Step 3: Create a Button Shape

  • Go to the file menu and choose “Layer” to create a new layer.
  • Name this layer “Button” for easier distinction.
  • Choose “Transparency” for the layer fill type.
  • Click “OK” to create the new layer.

This will add a new transparent layer to your layers window.

  • Change the foreground color to whatever color button you want.
  • Click “OK” to accept the new button color.
  • Choose the “Rectangle” select tool from the toolbox options.
  • Chose “Rounded Corners” and set the “Radius” to 20 pixels.
  • Place your mouse cursor over the overlapping (left) horizontal and vertical guides.
  • Click the canvas and drag the mouse from the upper left bottom right corner of your image.

Your rectangle should “snap” to the guide if you have done this step properly. The result will be a rectangle with rounded corners that have marching ants around the entire shape.

  • Choose the “Bucket Fill” tool and fill the space inside the marching ants with your button color.

Step 4: Add a Shadow

  • Go to the file menu and choose “Select” >> “Grow” and enter the number 1 into the box.
  • Click “OK” to accept the 1 pixel dimension.
  • Go to the file menu and choose “Layer” to create a new transparent layer.
  • Name this layer as “Shadow” for easier distinction.
  • Click “OK” to create the new layer.
  • Change the foreground color to black.
  • Choose the “Bucket Fill” tool and fill the layer with black.
  • Go to the file menu and choose “Select” >> “None” to remove the marching ants.
  • Position the “Shadow” layer underneath the “Button” layer.
  • Change the “Opacity” of the “Shadow” layer to about 35%.

Step 5: Add a Gaussian Blue to Shadow

  • Highlight the “Shadow” layer.
  • Go to the file menu and choose “Filters” >> Blur >> Gaussian Blur.
  • Change the “Blur Radius” to 4.0 horizontal and vertical pixels.
  • Keep the “Blur Method” at RLE
  • Click “OK” to create the blur impression.

Step 6: Add a Highlight

  • Go to the file menu and choose “Layer” >> “New Layer”.
  • Name this layer “Highlight” and click “OK” to create the layer.
  • Place your mouse over the “Button” layer from the Layers window.
  • Right click your mouse and choose “Alpha to Selection” to select the colored image.
  • Go to the file menu and choose “Select” >> “Shrink” and enter the number 1 into the box.
  • Choose “OK” to accept the 1 pixel dimension.

This will reduce the size of the marching ants by 1 pixel in preparation for adding a highlight (glow) to your web button. To continue, place your mouse over the “Highlight” layer in the Layers window to make it the active layer.

  • Change your foreground color to white.
  • Choose the “Blend” tool from the Toolbox options.
  • In the lower window, choose “Linear” as the shape.
  • In the lower window, choose “FG to Transparent” mode.
  • Choose the “Highlight” layer on the Layers window.
  • Place your mouse at the top of the marching ants on the canvas; click and drag the mouse cursor to the bottom of the marching ants and release.

You should see a white highlight that fades to transparent on top of your colored button.

  • Change the opacity of the “Highlight” layer to your satisfaction. (I changed mine to 49% opacity.)
  • Go to the file menu and choose “Select” >> “None” to remove the marching ants.

Step 7: Add Text

  • Change the foreground color to bright yellow.
  • Choose the “Text” tool from the Toolbox options window.
  • In the lower window, change the font type to “Impact Condensed”.
  • In the lower window, change the font size to 20 pixels.
  • In the lower window, change the “Justify” settings to “Centered”.

To create a text box on your canvas, you must place your mouse where you want to start. Click and drag a text box onto the top of your canvas then, type in the words you want on your button. I typed in, “Click Here for Instant Access!”

I do not care for a web button that has the text in one color, so I will make a copy of the yellow layer and change some of the wording to white. To duplicate the text, right click your mouse over the text layer and choose “Duplicate Layer” from the drop down menu.

  • Choose the top most text layer and highlight the text with your mouse.
  • In the lower window, change the font color to “white”.
  • Choose the portion of text you want to delete – in my case, I choose the words “Instant Access!”

Naturally, this garbles the text because the text layer below still has the entire wording you originally typed. Since we removed part of the text, we now have to hit the space bar until the top text layer aligns with the text on the bottom.

  • Once your text is the way you want, highlight the top text layer with your mouse.
  • Choose “Merge Down” from the drop down menu to merge both text layers into a single layer.

To finish off your text, add a drop shadow to make it stand out against the button background.

  • Highlight the “Text” layer on the Layers window.
  • Go to the file menu and choose “Filters” >> Light and Shadow >> Drop Shadow.
  • Set the Offset X & Y to 1, Blur Radius to 4, and Color to Black with an Opacity of 50.
  • Click “OK” to accept the appearance.

Your web button is now ready to export from Gimp as a PNG file.

Step 8: Export the Button

Save the web button to your computer for easier retrieval. I like to save mine to the desktop. You are free to save your button to any directory as long as you are able to find it later.

Go to the file menu and choose “File” >> Export As. At the bottom of the pop up window, choose the drop down box and find the PNG image (*.png) setting.

In the Name box on the top of the window, type a name for your web button. Under places, select the directory where you want to save the file. (I chose Desktop.) Click the “Export” button at the bottom of the window and choose the “Export” button on the following window.

Step 9: Save the Gimp File

Just in case you would like to create a new button, but you do not care to go through all these steps again – I would advise that you save the canvas to the Gimp format.

  • Go to the file menu and choose “File” >> Save as.
  • Name your file (I like to choose a name that describes what the image is.)
  • Choose a directory on your computer to save the file. (I like to save it to my desktop.)
  • Choose “All XCF images” from the drop down box at the bottom of the window.
  • Click the “Save” button to save the Gimp file to your computer.

Have you tried Gimp to create web graphics? Leave a comment below and let me know!

Thanks for reading,
– Bonnie

P.S. Did you enjoy this message? If so, please share it with your friends so they can benefit from schmoozing. Then, if you want to get more messages like this one, connect with me via my social links below or hop aboard my notification list. I would like to keep in touch.

About Bonnie Gean

Bonnie is a full-time writer and marketer with over 20-years of experience as an entrepreneur. She loves helping people overcome the technical challenges associated with an online business. Need a step-by-step tutorial? Simply ASK her and she'll help you too.

Join the Discussion

  1. Thanks for this tutorial Bonnie! I am going to have to watch it several times so that it sinks in!! LOL As I haven’t used Gimp so far…… Thanks for the text as well which I will print out to help.
    The only thing I have a doubt with is how to put where to go….. I mean, people click on this but where does it take them? How do I add the affiliate link I want them to go to?
    Sorry for so many questions! :) You have explained exactly what I wanted but I don’t know how to add the affiliate link under the button. Hope this is not a daft question!! LOL
    Hope you are feeling much better now.

    Ann
    Ann recently posted…Dress A Girl Around The World – My First DressMy Profile

  2. Hi Bonnie, Great tutorial using GIMP to create a web button. I have and use both Adobe Photoshop and GIMP and they both do the job. Even if you have PS it’s good to familiarize yourself with GIMP. I say this because of my experiences with Adobe. Both have similar tools with similar icons. I appreciate you taking the time to share this. Thanks!

    One thing I found out about Photoshop is it doesn’t run when your computer is in safe mode like when you get the blue screen of death. Even in safe mode with network so you can access the web. I think it needs to access Adobe’s verifying server but for some reason it can’t in safe mode. Not good when you have a deadline to create banner ads. GIMP to the rescue! GIMP does work in safe mode.
    John Collins recently posted…The Original Tiffany Lambert PLR Catalog OnlineMy Profile

  3. Fabulous tutorial Bonnie! I have Gimp – again, not used to it’s full potential. I mainly cut and paste lol

    I’ll be playing with layers and buttons now though!
    Jan Kearney recently posted…Combat WordPress Comment Spam (Akismet Alternative)My Profile

  4. Hi Bonnie, Thanks for the detailed instructions. I never really mastered Gimp so I bought Logo Creator instead – but I liked your tip about having two colored text on your buttons, which obviously I can do with LC too. You’re right… it looked much better.
    Joy
    Joy Healey recently posted…Google Blocked From My SiteMy Profile

    • I believe, if you gave it time, you could master Gimp as well as you work inside of the Logo Creator.

      But… since the Logo Creator helps you create the type of graphics you need – no sense in wasting time learning something new, right? :)

      Nice to see you back on the blog again, Joy! You were missed!

  5. Amazing! You make it look fairly easy although there seems to be a lot of steps to get the look you created. Very easy to follow tutorial, though. Thanks!

  6. Bonnie,

    I have a couple of video tutorials on GIMP, but yours is by far THE BEST. Your style of teaching is very simple, easy, and concise. You make it look like child’s play. Keep up the great work!
    Cynthia Dixon recently posted…Moms Orchid Color PaletteMy Profile

  7. Love your video intro BG!
    Cool and useful instructional video Bonnie and great to know you dont need the massively expensive Photoshop

    Sue
    Sue Worthington recently posted…Where Have All The LinkedIn Status Updates Gone?My Profile

  8. Super tutorial as usual Bonnie, you make it look all too easy! I certainly do need to spend some time with Gimp.
    Marilyn Thompson recently posted…How to Test the Speed of Your SiteMy Profile

  9. Very nice tutorial Bonnie! I haven’t used Gimp yet for buttons, I typically use PS but the process is pretty similar.
    Misty Spears recently posted…Starting a Subscription Membership Niche Site for Passive IncomeMy Profile

  10. Hi Bonnie,

    What a nice tutorial. Looks very easy to do. Thanks for the great tips!
    Nate recently posted…M & G Home Business List Building System – Is It Legit?My Profile

Share Your Thoughts

*

CommentLuv badge

16 Shares
Share8
Tweet2
+15
Share
Pin1