Monday, January 2, 2012

Creating A Signature Clickable To Multiple Destinations

I'm going to help you make a forum signature, or siggy, that is divided into different sections. This will make different areas of your signature clickable thru to different destinations. 

First, you're going to create your signature using your program. The forum guidelines of the places you frequent will dictate your size, but the one I made was 600x300 pixels. I used Paint Shop Pro X3 to create my signature and this tutorial. I'm also a PSCS2 user, however, and the idea will translate to any program, you may just need to tweak slightly for your program. I've followed plenty of PS tutorials in PSP :) 


When you're creating your siggy, you're going to want to be sure the area you want people to click thru to get to your gallery, for instance, doesn't overlap with the area they would click thru to get to your blog.

Here's a preview of the files you're going to have when we're done with the tutorial:





A finished 600x300 pixel .png file, and 5 different columns saved as individual .png files.


First, open your finished .png siggy in your program.


Because my siggy is 600 pixels wide and I want it to click thru 5 ways, I divide 600 by 5 and get 120 pixels.   I go to View>Change Grid, Guide & Snap Properties and change my Current Image Settings to 120x120.  I also ensure my grid is "on" by using my keyboard shortcut of Ctrl+Alt+G or choosing View>Grid.

If you are working with a 600 pixel wide canvas and want your image to click thru to 6 locations, grid it 100x100 pixels. If you are working with a 600 pixel wide canvas and want your image to click thru to 4 locations, grid it 150x150 pixels, and so on and so forth.


Once I select "OK" my image will be gridded.



Select Ctrl+ Shift+ G to Snap to Grid or you can do it from View>Snap To Grid. Use the Selection Tool to select the first column only. Copy your selection by choosing Edit>Copy or a keyboard shortcut and paste your selection as a new image by choosing Edit>Paste As New Image or using a keyboard shortcut. Save the new image as a .png (I saved mine part 1, part 2, part 3, etc but name yours whatever you'd like.)


Once that is done, select the the area of the second column using the Selection Tool and repeat the steps above.  

Do this for all of the columns you wish to have. I saved 5 separate .png files. 

Upload them to your photo hosting site. I used Photobucket. 

Once you have that done, go to the Control Panel for the forum you want to display your siggy in and select Edit Signature.

(I'm not going to include screenshots for this portion because every forum could be different but the steps should be similar no matter what.)

Paste in the image code for your first column from your image hosting site in your signature box.

[IMG] http://www.imagehostingsite.com/myusername/column1.png [/IMG]

Highlight this image code with your mouse and select the "Insert Link" button. A box will pop up asking you where to link the image to. Paste into the popup box the web location you want that portion of your siggy to link to. 

When you're finished with that, it will look like this:

[URL=http://www.website.com/destination][IMG]http://www.imagehostingsite.com/myusername/column1.png[/IMG][/URL]

With NO SPACES, you'll continue to do this for all of the columns you have created. It will look like a lot of info when you're done!

My code, when I was all done, looked like this:

[CENTER][URL="http://www.myscrapbookart.com/gallery/showgallery.php?cat=500&ppuser=276"][IMG]http://i243.photobucket.com/albums/ff258/bellagypsygirl/Stuff%20De%20Lena/part1.png[/IMG][/URL][URL="http://365project.org/lenagardner/365"][IMG]http://i243.photobucket.com/albums/ff258/bellagypsygirl/Stuff%20De%20Lena/part2ish.png[/IMG][/URL][URL="http://pinterest.com/mrslenagardner/"][IMG]http://i243.photobucket.com/albums/ff258/bellagypsygirl/Stuff%20De%20Lena/part3.png[/IMG][/URL][URL="http://lenagardner.blogspot.com"][IMG]http://i243.photobucket.com/albums/ff258/bellagypsygirl/Stuff%20De%20Lena/part4.png[/IMG][/URL][URL="http://www.facebook.com/mrslenagardner"][IMG]http://i243.photobucket.com/albums/ff258/bellagypsygirl/Stuff%20De%20Lena/part5.png[/IMG][/URL][/CENTER]

I am NOT a tutorial writer by trade, but I hope you've found it helpful. I am HAPPY to answer any questions you might have or assist you if you are struggling with this! Just leave me a message here if you have any questions! 

6 comments:

  1. Thank you. I am going to try this soon. :)

    ReplyDelete
  2. Thank you so much for this tutorial Lena!!

    ReplyDelete
  3. Thanks Lena! i was just admiring your siggy and wondering how you made it clickable in different spots and then i saw your post about this tut! Awesome timing, thanks so much, going to give this a try!

    ReplyDelete
  4. thanks so much - always wondered how to do this - i pinned it to my pinterest for a day when i have time to sit and nut thru this myself! love u lena, thanx!

    ReplyDelete
  5. This is such a great tutorial. Worked like a charm!

    ReplyDelete
  6. This is such a great tutorial! Worked like a charm. Thank you so much!

    ReplyDelete