Design party: grab buttons (for GIMP)

Today  I'm going to show you how to make ad/sponsor buttons on free software that does basically the same thing as Photoshop. Its called GIMP and you can download it here if you're a PC user or here if you use a Mac. Go download and come back when its installed! (You can go to this tutorial if you have Photoshop or if you want to learn how to code buttons for a text box or your sidebar).

I want to start this tutorial off by saying that Photoshop is much more intuitive and user-friendly, but GIMP still gets the job done. Using GIMP is a little more complicated so the directions might seem wordy or lengthy. Please re-read the directions as you're using the tutorial and if you're stumped with something shoot me an email [mybilliedesigns@gmail.com] and maybe I can clarify it for you!

Step 1//Open up the image you want to make into a button.

Step 2//Save the file (and make sure you save it as an .xcf, which indicates that its a GIMP file). Naming the file with the size and who it's for has been really helpful for me. So if I was making the button for myself the file name would look like this: 300x150_formybillie.xcf.

Step 3//Crop your image. The "crop" button is on the left-hand side and looks like an x-acto knife. After you click it look at the "tool options" box below it. Click the little box next to "fixed" then enter in your dimensions, keeping them separated by a colon (:). The first number is your width and the second number is your height.

Step 4//Scale your image (Image>Scale Image). Make sure the chain icons are linked together (if not click the icon). This keeps the image dimensions accurate as you scale the image. Enter in whatever your ad dimensions need to be then click "scale".

Step 5//Enter in your text. Click the big black "A" in the toolbox on the left-hand side. A little box will pop up, which is where you enter in your text. You can edit the font, size, color, alignment, etc in the "tool options" box below the toolbox.

Step 6//We're looking at the "layers" box now (on the right-hand side). Right click your text layer then click "text to selection". This should put a selection on just your text.

Step 7//Now we want to "grow" our selection. Click Select>Grow. Enter in whatever number you want, but the skinnier the font, the less you need to grow. Mine is a really skinny font so I only grew my selection by 2 pixels.
Step 8//Make a new layer (click the little paper icon at the bottom of the "layers" box). Select transparent and okay.

Step 9//Now we want to fill in our selection that we just "grew". To pick your color, look towards the bottom of the "toolbox" (left-hand side of the screen) and double click the top of the two larger rectangles (there is probably a black and white one on your screen). Click on the full spectrum rectangle (tall and skinny) to find a color you like, then click around in the bigger square box to its left to get the right hue and shade. Click "ok" once you've got it picked out.

Step 10//Click Edit>Fill with FG Color. This should fill in the selection with whatever color you selected.
Step 11//In the "layers" box, move your text layer to the top (hold down your mouse key while moving the layer box up).

Step 12//You should have three layers now: the text layer, a "new layer" with your filled in text selection, and a background layer. We want merge the text and color selection layers now. Do this by right-clicking the text layer and clicking "merge down".

Step 13//Your text may be a little too big now that we've added a border color to the text, so we'll scale it down next. Make sure the top layer is selected in the "layers" box, then click the "scale" button in the "toolbox". On the actual image you can play with the proportions until you like the results (just make sure the chains are linked on the "scale" box that pops up). Press "scale" when you're finished scaling.

Step 14//After you "scale" the text, its going to save it in a new layer. Double click the layer and name it whatever you want (I usually name it "a", "b", "c", etc). Move the text layer around until you're happy with the positioning.

Step 15//Save your image as a .jpeg and we're done (File>Save As)!

Have fun creating new buttons! : )