Blog Design Tips #3: Create a Blog Grab Button


I never know what to call these little buttons/banners but I’m sure you all know what I mean – a small banner for other bloggers to use to advertise your blog in their own sidebars or ad swap pages. I’ve seen quite a few people asking on Twitter lately how to make them, and they’re actually pretty easy to do. All you need is an image editing programme of some kind (I usually use Photoshop but you don’t need anything as fancy as that – for this tutorial I’ll be using GIMP which is pretty easy to use and can be downloaded for free) and an image or colour scheme you want to use.

So, firstly, open GIMP and click on File >> New and select the size of your image. 200 x 200 pixels is a good size which will fit in most blog sidebars. A new window will open with your blank image, so now you can start building your banner.

Start by adding a background colour. Click on the Paint Bucket tool, then choose a colour by clicking on the Foreground Colour swatch. You can then use the colour picker to choose a colour, or enter the hex code if you know the specific colour you want to use. It’s a good idea to use the same colour scheme as you have on your blog so it is recognisable. Once you’ve selected a colour, click anywhere on the canvas with the paint bucket tool to fill it in.

Next we’re going to add some text. Select the Text Tool from the menu then in the Tool Options change the settings to your preferred font face, size and colour. DaFont is a great place to look for free fonts if you want something a little nicer than the default fonts available. Once you’re happy with the font, click on the canvas to create a new text box and type in your blog name. If you want text on more than one line, it is easiest to create separate text boxes so you can move them around independently. Just click anywhere else on the canvas to create a new text box.

Once you’ve added your text, you’ll probably want to move it around to be aligned properly. To do this, click on the Move Tool and in Tool Options make sure Move the Active Layer is selected. In the Layers Palette on the right, select the layer you want to move, then click on the canvas and drag the layer to its new position. In the image above, the yellow box shows where the text used to be and the grey box shows where it is now.

If you just wanted a simple banner, you could leave it as it is now but I’m going to add a few extra elements. First, I’m going to add a coloured rectangle behind the text. Select the Rectangle Tool then create a New Layer in the Layers Palette. You want the new layer to be behind the text but above the background, so use the green arrows to move the layer up or down to get it in the right position. Then click and drag your mouse over the canvas to create the outline of your shape. Fill it in by selecting the Paint Bucket tool again (you may need to change the foreground colour again) and clicking in the highlighted rectangle.

Next, I’m going to add an image to the banner. You could use part of your blog header, a profile picture, your blog’s logo etc. etc. Open the image you want to use in a separate document (or create a new image and paste it in). As the background of my banner is purple, I want to remove the white from around my illustration. Hide the background layer by clicking on the eye icon to make the background transparent so it’s easier to see what you’re doing. Then, making sure the top layer is selected in the Layers Palette, click on the Magic Wand Tool and then click on the areas you want to remove and press the delete button on your keyboard. Once you’ve removed all the white areas, press Ctrl + A to select the whole layer then press Ctrl + C to copy it. Go back to your original document and press Ctrl + V to paste the illustration into the banner.

The illustration will have pasted into the banner as a Floating Selection – to make it into a proper layer, right click on it in the Layers Palette and select To New Layer. Now we can resize the illustration so it fits onto the banner. Click on the Scale Tool and check the Keep Aspect box to make sure the illustration doesn’t get distorted whilst resizing. Then, making sure the corrected layer is highlighted, click on the canvas and a resizing grid will appear. Drag the corners to get it to the size you want then click on Scale once you’re happy and it will change to the new size.

Once all the elements of your banner have been added, go back to the Move Tool to rearrange them. Instead of having my text centred, I moved it to the right to fit in my illustration as well. I also added an extra coloured rectangle at the bottom, and some extra text to describe my blog. You may need to rearrage the layers to get the correct ones on top, but this can easily be done by clicking and dragging the layers in the Layers Palette or using the green arrows. You can also resize any of the elements using the Scale Tool. Once you’re finished, click on File >> Export to save your image. I usually save my images as .png files as I find they are better quality than .jpgs.

And that’s it! Now all you need to do is upload it using an image hosting service like TinyPic and paste the HTML code into your sidebar. If you want to make a code for other people to use, just use the textarea tag to create a box with your code in it – you can use the code below as your basis. Add in the URLs of your blog and image where appropriate, and change the dimensions of the image if necessary. The top section of code will display the image in your blog, the bottom section will display the text box underneath it for people to copy & paste your code.

<a href=”YOUR BLOG URL”>
<img src=”YOUR IMAGE URL” />
</a>

<br>

<textarea rows=”5″ cols=”25″>
<a href=”YOUR BLOG URL” target=”_blank”>
<img src=”YOUR IMAGE URL” height=”200″ width=”200″ alt=”BLOG NAME” />
</a>
</textarea>

I hope that all made sense and has helped those of you who weren’t sure how to create customised banners before! Once you get used to using the programme, it will become much quicker and easier to create all sorts of blog-related graphics. You can use the same ideas outlined here to create headers, navigation buttons, profile picture graphics etc. Please do let me know if you have any questions!

Gillian x

Gillian

Freelance social media and digital marketing consultant with a penchant for writing blog posts, drinking sickly sweet cocktails and exploring the cobbled streets of Edinburgh.

5 Comments

  • Maria Fallon says:

    I need to do this, I have it bookmarked now!

    Maria xxx

  • All of your blog design tips are brilliant! You'll see on my layout I've put them to good use! Thanks so much!

  • Paula B says:

    Love your tutorials! Will try and do this, thanks! 🙂

    http://www.la-vida-fresa.com xo

  • Nomad says:

    great tutorial – will definitely be giving this a go! 🙂 x

  • brilliant tip! thanks for this tutorial. Wish I have found this eralier..because I was working on my layout and changed it completely this week^^ but I can use it in future.

Comments are closed.