Make yourself a forum signature

A fair few times when reading (or just lurking) on forums, I spot an empty signature spot.. That’s prime advertising material being wasted!

Here’s a quick guide on how to utilize it.

You will need:

  • A decent image to do with your hobby/business, or something to show off your character.
  • A fairly decent picture editing program (Paint.net is good)
  • To know where you social media profiles are (URLs) and websites etc.
  • about 20 minutes
  • cup of hot stuff of choice..
  • No scissors or sticky back plastic tacky stuff..

Respect Others!

First of all, Forums are free to use by many, many people.. So no abusing the service with massive images. No bigger than 300 by 200 pixels, none of us have screen big enough to see a 4266 by 2036 pixel image..

As I’m lacking inspiration to work on my logo, I’ll use that file today. (all thumbs should be click-able for bigger images)

paint sig1

Next Add a layer (Automatically transparent) to draw on our social media icons, lettering for sizing. For this example I’ll align them along on the top. Drag each media icon in as a layer and size it/ move where you want it (remembering they must all be on same side/edge), when complete, merge layers down all into 1 layer.

sign part 2

If you have a patterned banner – try not to have anything on the same level as your icons, unless you feeling adventurous with scissors.

Now draw a selection box around each icon  and the top of the banner image cut and paste it into a new image. You will need to slice out the rest of the image on the line of your icons, and the banner image under where the icons where. As browsers count transparency as part of the image, it will be misaligned and show space in between images. You will need to resize canvas on  your main image slowly by small amounts of pixels (I used bottom anchor as I wanted to preserve the bottom part), this is under Image – Canvas Size

sign part 3

Save each image in order if banner is patterned (ie. banner1, banner2 from left to right) and your big image defined as something unique..

 Now the technical part..

Now that we’ve created the images for icons, the space after them, and the main image. Now we upload them to our webspace (usually a public folder with permissions of 744, for example /images for most sites work.) and make a note of their path (http://www.mwebsite.com/images/banner1.jpg etc)

Most forum signature editors will support HTML (what we’ll use to call the files and provide links to your content) and a few buttons to automatically link it all up.

For this example, we shall use pure HTML as there’ll be no conflict with forumBB code.

Each linked image needs to look like this (in source/html mode)

<a href=”http://yoursite.com”>
<img src=”http://yoursite.com/images/banner1.jpeg” alt=”My social network”>

Until you reach the last social image or spacer to align everything:

<img src=”http://yoursite.com/banner7.jpg” alt=”empty space”>

Hints:

  • remove alt=”empty space” and no text will show up when you hover over the spacing image.
  • You can size each image by pixels:

<img src=”http://yoursite.com/tiny-banner.jpeg” alt=”sized image” width=”32″ height=”32″>

(useful if you accidentally sliced a pixel off an image, more than 10 and it looks odd..)

Test and tweak

Your forum signature should have preview (vBulletin usually) which will allow you to tweak little things and your pattern, with icon alignment and how the image deals with window sizes (another reason to keep to a most of 300 pixels wide.

Also keep a copy of each image file safe, you an add more icons in your spacer image and add it in the signature coding.

 Finished Product! 

With a bit of tweaking we sort out WordPress’s system of trying to malign everything (image controls). Have a hover over and watch your status bar report the url changes. Nice eh?  Have a go yourself and see how you get on.

Lit-signFB-1GPluslit-sign-space
lits-sign-main

If you get stuck, or want something made up ( for a small fee of course!) I’m happy to help!
Remember to use BBcode if you are using lots of icons/code.

Leave a Reply

One thought on “Make yourself a forum signature”