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! : )

Design party: grab buttons

So here's the first tutorial of my blog design series. Its a three part tutorial so it's kind of lengthy. 

Today we're going over:
1//How to create a button
2//How to resize your button (because everyone is always asking for a different size!)
3//How to add code to a button

 Please note: this is a tutorial for Photoshop (using CS5 but still adaptable to all versions). I'll be posting the same tutorial using free photo-editing software in the near future!

Step 1//Open your photo in Photoshop (mine is already edited so you might want to play around with a few things before we start manipulating the image).

Step 2//Immediately save as a .psd file. The image will most likely be a .jpeg file, which keeps all layers that we'll be creating flat (aka merged together). Saving the picture as .psd insures that all of our layers will stay separated (which we'll need when resizing the button). I always find it helpful to save the image with the dimensions and who it is for in the title. So if I was making a button for myself, the title might look like this: mybillie_200x120.psd.

Step 3//Select your crop tool (its on the left hand side underneath the magnifying glass). Before we go to cropping, lets set the width and height. The area to do this should be under your main menu (file, edit, image, etc) but if it isn't, select Window>Options. Enter in the height and width that you want your button to be (make sure you have pixels selected), then go to work on your image. It will automatically be resized to the dimensions you entered (but to double check, go to Image>Image size and see what it says).

Step 4//Next we'll add in our text (click the capital "T" on the tool bar on the left hand side). Change your font, color and size to whatever fits your blog's aesthetic (this button is representing your blog!). I used the same font that I used on my blog's header. Its hard to see now but we'll fix that in the next step.

Step 5//To help put emphasis on your words, double click the text layer (on the right hand side of the screen) and a "Layers Style" box will pop up. Click on the box that says "Stroke" then play with the colors, size and opacity. Please note: this is just one way to add emphasis to the words on your button. I recommend adding a drop shadow to your texts or a gradient to your image as other options to make your text pop!

Step 6//Once your happy with your button, save it as a .jpeg again (this will flatten all the layers and make the internet very happy when you go to upload the picture!).

Good job! Youuuuu did it! Now let's turn the button we made into a different size!

Please note: this only works for buttons that are smaller than the original button and tends to work best with buttons that will end up in a similar shape (ie I'm creating another rectangle button vs  a square-shaped button). When I'm creating a ton of buttons at one time, I start with the biggest sized button that I'll need and work down from there.

Step 1//Open up your .psd button (not the .jpeg). 

2//Use your crop tool again. Enter in the new dimensions and let the magic happen.

Step 3//In this case, I don't need to change my text but you might with yours. Just move it around as needed. You might even want to change the stroke color to keep all your buttons different. It's up to you! Once you're happy with all your changes, save the button as a .jpeg (and don't forget to rename it with the new dimensions).

Okay y'all we're in the home stretch of the tutorial! Now I'm going to show you how to add code to your button. These are two different codes that you might find useful: code to add another blog's button to your sidebar and code to create the "grab box" underneath your button.

Adding buttons to your sidebar:
Step 1//Upload the button to a photo-hosting site (I use Photobucket).
Step 2//Now go to the "layout" part of your blog (if you're using the updated interface start at your dashboard then click the "layout" option from the drop down menu).
Step 3//You'll need to add a (an??) HTML/JavaScript gadget if you don't have one for your sponsors/friends section (click "Add A Gadget" then "Html/JavaScript").
Step 4//Type in this code: <a href=""><img src="">. The a href part is code for where the button should link to and the img src part tells the internet where to find the image.
Step 5//Fill in the rest of the code! If I were linking the button to my blog I would put http://mybilliedesigns.com between the quotation marks after a href (where the button will link to). You'll have to go back to your photo-hosting site to get the link for the image source (img src). For Photobucket users you just hover over your button and click the bar next to "Direct Link" (it automatically copies the link when you click it). Paste that between the quotation marks after img src.
Step 6//Repeat this process with all the buttons in the world, if you want to. Then click "save". We're done!!

Please note: if you are using Photobucket they have the code all typed up for you! Just click the bar next to "HTML code" and past the code into your gadget box instead of typing it all out. You will need to change the link in the "a href" part though!!

Adding the "grab box" code to your sidebar:
Step 1//Go to your HTML/JavaScript gadget and type in (or copy and paste) this code: 

<center><a href=""><img src="" /></a><center> </center> <center><textarea id=”code-source” rows=”3″ name=”code-source”> <center><a href="" target="_blank"><img src="" /></a></center></textarea></center></center></p>
Step 2//The a href and img src part of the code should look familiar now. This is all you need to worry about changing, and its just like we did in the steps above! Notice that it's in there twice though. Fill in where you want the button linked to after a href (both times that you see it) then fill in the image link after img src (both times).
Step 3//DONE!

Okay, did you stick through it? If you're overwhelmed...so am I! Just keep sticking with the directions and I pinky promise that it becomes easier and faster to do each time that you do it! I recommend starting a word document with all the coding you need, or even adding the directions for any of these tutorials for easy access (although it wouldn't hurt my feelings if you had a tutorial party on my blog as often as you needed!).

And here are some of the things you can look forward to learning at my future design parties:
//how to install fonts to your computer
//adding an image or background to your post titles
//other tweaks to your post header: making the title/date centered or right-aligned+removing the date
//how to rotate your ads each page click
//learning code to automatically resize your images to the same width
//how to automatically add a signature to your posts
//three different ways that I edit my pictures
//how to create the collages I make for posts (much like the "design party" image at the top of this post)
//and so much more!

So. Was this helpful? Anything you want to learn how to do that you didn't see on the list??! Let me know!