| | | |

Thursday, 19 March 2015

Arts 'n' Crafts | Hammie Forum Sig

"Be brave enough to live life creatively. The creative place where no one else has ever been."
Alan Alda

This week's Arts 'n' Crafts post is a little different. So far I've done the more tangible type of arts and crafts and I had planned to do cross stitching for today's post but as I was putting together a signature for the hamster forum I joined since getting Rue, I decided to do a post about it! You can probably tell by my blog that I am by no means a whizz when it comes to graphics but I do know some basics. Many of the skills I amassed were from making signatures and the like for different forums I've been apart of over the years. I used to have Photoshop but I now use GIMP which is free.

Click the images to see them bigger.

Obviously different forums and such have different guidelines for signatures. Some bigger than others. The forum I'll be using this signature on is Hamster Central and their guidelines are a maximum of 465 by 60 pixels or 22.0 KB. Which ever is smaller. This presented a little bit of a challenge as it's smaller than what I'm used to working with. 

First you want to open a new image at the appropriate size. For the background you can use patterns and such but I decided to go for something clean simple. I went for a gradient background of two of my favourite colours, blue and purple. I've highlighted the gradient tool below and basically you pull the line in the direction you want the gradient to go and the length of the line also determines how much the colours will blend. 

You will be left with something like this. 

Then you want to move on to the images you'll want to use on your signature. The two I've decided to use are. 

I won't be using the whole picture but I will be cutting Rue out of them, shrinking her to the appropriate size and pasting on to the signature. Start by opening the photo in GIMP. I then use the free select tool, as highlighted in the picture below, to go around her until the line joins up. 

Once I have her highlighted I go to Edit and then Copy. After that I go to File and open a new image and Paste her on to it. Once I have her pasted I highlight her again with a box around her using the rectangle select tool, as seen below, and then go to Image and select Crop to Selection.

I wanted the box around her to be as tight as possible because next I'm going to shrink her down so she fits on to the signature. Once she's shrunk down I make sure she's still highlighted and then go to Edit and Copy her again at her new size. 

I then go back to my original image of the signature and open a new layer as seen below. This is so the pasted image has a layer of it's own so we can edit and move it around etc. 

Once I paste the photo on to the new layer on the signature I zoom in to make it easier to see and work with. I wanted to have a picture of her on each side and planned to put her name in the middle. So I moved the first pasted photo using the move tool as seen below.

I then repeated the steps above on the second photo, this time deciding to include the little bowl of fruit she's eating from too for some extra colour. I finished up with this. 

After I had both photos in the positions I wanted them I went to Layer and merged the two photo layers together to make the next step a little more simple. 

Once I had them merged I wanted to give them a drop shadow, so I went to Filters and then Light and Shadow and then Drop Shadow.

With drop shadow it's really down to personal preference but I tend to stick with a shadow that isn't too dramatic. You can play about with the settings and see what you like but this is what I went for with mine. Just make sure you have Allow resizing unchecked or else it may move the layers on you.

I finished up with this. As you can see the shadow just makes the photos pop a little. 

Next I moved on to the text. Again this is very much down to personal preference. The font I decided to go with was Cinnamon Cake but you can find many others that might fit your style better for free at Dafont. I wanted the text to be near enough in the middle the two Rue photos. I find the easiest way to do this is to make the text box fit just between whatever you want the text to be in the centre of and as common sense dictates choose the centered text option. 

Once I had the text how I wanted it I wanted to give it a boarder. I go about this by right clicking on the text layer and choosing Path from Text as seen below.

Then I go to Select at the top and to where it says From Path. This will highlight around the text much the same way I highlighted around the photo of Rue. 

To be able to give the text a boarder we have to make the select bigger. So once again I go to Select but this time down to Grow. Again this is up to personal preference. You can make the boarder whatever colour you want and as thick as you want. It will bring up a little box and you say how many pixels you want to grow the select. For this particular one I picked 2 pixels. I then selected the Bucket Fill Tool as circled below, made a new layer beneath the text layer and filled the selection in with black on that new layer.

Now you can see the boarder around the text. Again this just makes it pop a little more. 

The final touch I make to the text is another drop shadow. As I've already used it I can go to Filter and click on repeat and it will repeat the drop shadow as the same settings as before. If you want it to be a little different then repeat the steps the same as the last time and fiddle with the settings until you have it how you want it. 

Finally I decided to add some more text, repeating the steps above but this time I made the text a different font, colour and have a smaller boarder. The text I added was Rue's nicknames. Perhaps when I have more clear photos of her to work with I may add them instead. 

Once I was happy with how everything was set out and was sure I was finished I went to Image and then Merge Visible Layers. 

It will bring up a box and to be honest I'm not sure what difference it makes but I just check clipped to bottom layer. 

Now all that is left to do is save the signature! However, rather than going to save as you instead go to File and then Export As. And then just continue the steps like you would saving anything else. I personally save mine as png's but it's up to you. 

Finished Signature

And there you have it. My super simple hammie forum signature. Now I'm sure this isn't the only way to go about things but this is just how I do it personally. This can be used for banners for Facebook pages, YouTube or even your blog. Anyway, I hope you enjoyed this digital arts and crafts post. If you did please let me know and I'll do more in the future. 


  1. This is such a wonderful post - I love the idea of sharing a tutorial (which so many people are bound to find interesting) with your readers. I've seen custom signatures on forums, etc., but I never had any clue how to even start making one. You've broken it down to such simple terms that I think I probably could manage my own (famous last words, haha!).

    The final signature is also very cute - I'm happy I got to see photographs of Rue after talking to you about her on Twitter!


    1. Thank you! Hopefully people will find it helpful. Even if not for forum sigs, perhaps for blog buttons etc. It's the same method. I'm usually told I'm not very good at explaining things but hopefully I did okay with this. :D

      Anyway, thank you! She's a photogenic little lady. :D xo

  2. This was brilliant! I am definitely going to attempt this at some point - thank you for all the pointers on how to do it too, and Rue is so cute! Lovely, creative post! - Tasha

    1. Thank you! I actually enjoyed putting it together. I'm usually not very good at explaining things so hopefully people will be able to understand. xD xo


I read and welcome all comments and appreciate them greatly even if I may not answer all of them. I love hearing my reader's thoughts and interacting with you. Thanks!

Related Posts Plugin for WordPress, Blogger...