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.
