Saturday, January 28, 2012

Making Linkable Signatures for Message Boards

When I was trying to find out how to do this, I ended up not finding a whole lot that made sense.  After finding instructions from a few different places on how to do this for web pages, I was finally able to piece together how to do it for message board signatures.  So I wrote this tutorial to hopefully help you to avoid a lot of frustration. :)  and tears...and throwing things...saying bad words (not that I'm admitting I did)....

You need to check your forum rules to see what, if any, limitations there are regarding the size of signatures.  A lot that I’ve seen can be around 600 px x 200 px so you can use that as a guide and adjust later if you need.
For this tutorial, we’ll use the one I created for mine.

You can use anything you want to create yours.  I’m assuming you can probably figure that part out. ;)

Now to make it linkable…

Open up your Photoshop program.  I’m using CS5 for this.  Elements users…you will need to make your CS friends a batch of cookies and ask them to link it up for you.  I have no idea if you are able to do this with PSP or Gimp.  If you find that you can, feel free to post a comment letting everyone know! 
You are going to become friends with your slice tool.  

Now you will need to select your slice tool and draw selections around the different parts that need to be linked.  If you are wanting the whole image linked to one place, then you don’t need to do any of this.  On my siggy, I need 4 different links, so I will be making four different selections.  

You will need to make your selections right next to each other trying to avoid overlapping them.  If you do accidentally overlap them and need to fix or resize them, then click down on the slice tool and hold it down until you can see the other embedded tools.  Pick the slice select tool and click down on the slice you need to resize and resize it like you would anything else.

Another thing to think about is that it is way easier to slice side-by-side like I have mine.  I tried slicing it in ½ vertically and then doing little slices for my links under it and it was a disaster!  You can play around with it and see what works for you though.

After you get your slices where you want them, you will need to save them.  Go to File>Save for Web & Devices.  

Make sure you have Optimized selected (don’t ask me why…have no idea…just saw that somewhere).  You will also need PNG-24 selected.  The png part is for the transparency.  If you have a solid rectangle and no transparency parts, then you can pick jpeg.  Do a quick check and make sure that your Image Size is right.  You can change it here if you need to. 

When your settings are right, click save.  Now you can name your siggy.  Since you didn’t actually embed hyperlinks into the image itself (you can do that for actual web pages but I’m not covering that in this tut), then you can choose Images Only in the Format and All Slices.  Be sure to save this where you can find it easily. 

Now, go to the place where you saved your image.  You will have a folder called Images.  In that folder you will find each of your slices. 

Here in mine you see 2 extra files.  I really think that’s some overlap where my slices didn’t quite meet where they should.  We can just ignore them…it looks like it’s just on the edge and the top or bottom.  My image has transparent areas around it so it’s not going to matter much. 

You will need to have an account as some image hosting site like Photobucket (which I use) or Flickr or something like it.  Upload each image and open up your message board where you are going to place your siggy…be sure to open in a different tab or window because you will need the coding from Photobucket.
I’m going to show you how to load your images to the message board but keep in mind that every board is different.  Some may not allow links or may need different coding than what I’m showing you.  You will need to check with your forum rules or ask a moderator if there’s something different.

Ok…now log in to your forum and go to where you can edit your signature.  A lot of boards either have a Settings tab or a tab called User CP.  Then find a link that says Edit Signature. 

In the signature box, you will need to place your image codes.  It’s the [IMG][/IMG] code…in Photobucket, it’s the last one in the coding list. Some boards may need you to spell out image instead of using IMG…try the IMG first and if it doesn’t work, try the other.  When you are copying the code to your signature box, you will need to copy it in the order your image will appear with NO SPACES between the different image codes.  If you add a space, that will add a gap in your image. ;)  After you get all your images loaded, then click on Preview Signature and look at your image to make sure that it looks right.  Sometimes if you didn’t get your slices lined up exactly right you may have a little glitch that shows up.  If it’s not too noticeable and you aren’t a perfectionist, you can just leave it. Now scroll the screen back down to the message box.  Your image will show up there.  Click on the slice where you want to add your first link and it will highlight or have a box around it.  Now click on the hyperlink box…it’s a picture of the earth with a double chain link on it.  A box will pop up and you can add the url of the link.  An easy way to do this is to open up each place that you are wanting to link in a different tab.  When you are ready to link that page, then flip over to it and copy the url and then paste it directly into the pop up box.  Make sure that the http:// that is already in the box is highlighted so when you paste the url it replaces it.  Otherwise you will have http:// twice and your link won’t work until you remove one of them. 

Now do that for each of your links.  If you only had one image with one link, then just highlight the whole thing and do your link the same way as above. 

Click on preview signature again and click each of your links to make sure they work.  Save your signature!
If you want your signature to be centered, then go back to Edit Signature and highlight the whole thing and push the centering text button.  Save it again and your done!

If you have any questions or run into any problems, feel free to leave a comment and I’ll help out the best I can. 

No comments: