Hi! It’s Brook again with another siggie tutorial! If you missed Part 1, you can catch up on the basics of how to make your own custom signature graphic to use in the forums here: How To Make a Custom Siggie: Part 1.
In this tutorial, I originally intended to go through how to make Mary’s basic siggie step-by-step. But, because of a helpful comment I decided to shift gears and teach you something else entirely: how to link to multiple websites from your siggie. Part one of my siggie tutorials teaches you enough of the basics, so I’m glad it was suggested. There are many ways you can go about designing a link-able siggie. Here are a few examples of siggies that use link-able sections to help people find their blog, facebook page, gallery, and more.
As you can see by these awesome examples by Jessica, Darcy and Trish, not all link-able siggies look the same. But they all serve the same purpose. Maybe you’re feeling inspired to push your forum presence a step further and allow people to follow you on your blog, see what you are pinning lately, or admire your most complete gallery with a quick click. Adding these links to your siggie is the best and most visually pleasing way to do that. You can do it simply by adding the words to your signature and cutting up the image into ‘pieces’ or by adding whole separate icons for each link below your signature. Robin’s signature is an example of the latter:
Her siggie is a single graphic (labeled 1) created in a method very similar to the way I created Rachel’s siggie in Tut 1. Then, below her siggie (labeled 1-3) are individual custom-made icons that she has linked. You can use the standard twitter, facebook, pinterest, and blogger (etc.) icons or make your own. I’ll show you how to link up these images in the forum Control Panel at the end of this tutorial.
So, let’s start with Mary’s siggie here:
I want to add three links to the bottom without changing the design too much, and I want them to all be attached to the main siggie image (unlike Robin’s). I could get pretty fancy here like Jessica’s siggie in the first image I shared. She has her links incorporated into the design of the siggie, above and below her name. I’m going to do something more simple, like Trish’s example, and just add words to the bottom of it which I can then link up by cutting the image into vertical slices.
Let’s start by opening the original .psd layered file of the siggie and making the canvas size a little bigger by going to Image>Canvas Size. Then, adjust the anchor point as shown below so that the canvas will enlarge on the bottom half and sides only. I only needed a little extra room to add some words to the bottom of my already finished siggie… but if you’re going to just make a totally new siggie, just be sure to leave room on the bottom (or top… or sides) for your links.
Now my canvas is bigger and I can add my words.
I quickly add the three words I want to link up to: Pinterest, Blog and Gallery. I’m making them about 35 pt. in the free font Bebas Neue in the same color as the background gray in the siggie. Then I crop the siggie back down to size again. Because my words are light gray, I have the background turned on so you can see them in this image. Make sure to turn the background visibility off before saving it as a .png so your siggie will be floating on a transparent background. If you need a refresher, I covered how to save your siggie in Tutorial 1 HERE.
Once finished, I save it as a .png.
And now it’s time to slice & dice! Make sure to turn on your ruler guides. On a PC in Photoshop you can click Ctrl+R to turn them on. Or go to View>Rulers. Now, click on the ruler to the left of the image and drag guides over onto the canvas to help you see where you will crop the image. I will slice it in-between each word so that when each piece is clicked it will lead to the link indicated by that word. So, the section to the left will link to pinterest, the center will link to the blog, and the right side will link to a gallery.
Here’s a close-up of the rulers…
And here’s my image with the guides placed where I will crop in-between each word:
And, just for fun… see how my lovely 3 example siggies at the beginning of this tutorial were likely sliced? Once you learn how to do this, it’s easy to get new ideas by studying the talented ladies’ siggies in the forum.
Now that I have my guides in place, it’s easy to crop without accidentally overlapping or missing pixels. This is important so that my image will appear seamless in the forums. I need to crop each section up to the guides, making sure to not overlap the guide into the other section. I do this for all three parts, saving each one with the same file name plus an ‘a’, ‘b’, or ‘c’ at the end so I can easily put them together again in the correct order. After cropping each section, I go to Edit>Step Backward to get back to my un-cropped whole siggie.
Once I have all three parts cropped and saved, I upload my images to an online image hosting site (such as Photobucket) and then head to the User Control Panel on the Sweet Shoppe forum (I cover how to get here and more about loading up siggies in Tutorial 1 in case you’ve forgotten). Instead of linking up to only one whole siggie, we need to link up to all 3 parts of Mary’s new one… in order from left to right, a-c. It’s also important to note NOT to leave any spaces in-between your IMG codes here. If you do leave spaces, you will see spaces where you cut apart the image instead of it being seamless like we want it to be. Copy how I’ve linked each part below, inserting your own image url’s.
A little close-up if you need to see those codes better:
Now, it’s time to add the actual links to websites. Each of the 3 images will link up to a separate website. Select the IMG code from the first bracket to the last and click on the little globe icon from the panel. Then, enter the url for your link. Do this for each image in your new fancy-schmancy-linky siggie!!! Hit save and Ta-Da! Finished!
I hope this helped you!
Thanks for following along.