How do i put LINKS in my signature image?

[Lauren]

I asked the oh-so-sweet Michelle Godin (aka Mishou) if she would put together a little tutorial on how to do this....

This is ONE way to do it....

1) Create a graphic in Photoshop (or program of choice)



2) Decide how many links you want. You can see in mine above that I will have 3 links - to my blog, Flickr and my gallery.

We will be cutting up our graphic into as many pieces are there are links. 3 links = 3 separate graphics.

3) Use a selection tool (I used the Rectangular Marquee Tool) to select an area of your graphic that includes the spot where you want your first link to be.

Here you can see the "marching ants" around the section I selected.



When anyone clicks anywhere within that selection, they will be linked to my blog.


4) Go to Edit --> Cut
(Command+X on a Mac or Ctrl+X on a PC)

Then go to Edit --> Paste
(Command+V or Ctrl+V)

Now your first piece is cut out and sitting on a separate layer in your layers palette.



If it didn't paste in exactly the same spot, nudge it back perfectly into place.

5) Repeat steps #3 and #4 to cut out the next piece. Select the area where you want your next link to be - in this case it's my Flickr link.



I find it easier to work with the first layer hidden. You can hide a layer by clicking on the little eyeball icon next to it on the layers palette.



6) If you're doing 3 pieces like me, then you're done! If you have more, keep repeating those steps until you have all the pieces on separate layers.



7) Now we need to save each piece separately.

Use the little eyeball icons to make it so that Piece #1 is the only thing visible.

Then go to Image --> Trim.



A dialog pox will appear - select Transparent Pixels, make sure all the checkboxes at the bottom are checked and hit "OK".



8) This will trim away the empty space and leave you with only Piece #1 of your graphic.



(to save w/ a transparent background, turn off the bottom white layer BEFORE saving)
Go to Save --> Save for Web and Devices to save your image as a .png

{NOTE: You may be accustomed to saving your signature graphics as .jpg's, but because the signature area at OSD is grey, not white, you need to save it as a transparent .png}

9) To repeat this with the other pieces, we first need to go back a step to before we trimmed.

Go to Edit --> Step Backward, or go back a step on your History Palette.

This will bring you back to where you can hide Piece #1, and reveal Piece #2



10) Repeat Steps #8 and #9 until each one of your layers is trimmed and saved into a separate .jpg.

Now you're done with the Photoshop part!

11) Next you need to upload your images to the web. I use Photobucket to store my forum graphics.

Upload all your graphics, and leave that window open because we will need to grab the links from there.

12) Open a second browser window or tab and come to the OSD forum. Look in the right corner and click on "Settings" and then go to "Edit Signature".





13) Use the "Insert Image" icon to add your first image. It will ask you for a link. Go to your browser window where you have Photobucket open and grab the link.



15) The link will appear between "IMG" HTML tags in your signature box. If you want to have a look at it, you can click on "Preview Signature". Now it's time to link the first image.

Highlight your link including the IMG tags. Click on the "Insert Link" icon (the globe with a chain link) and add the link.

Now your code will look like this, with URL HTML tags added in:



16) Now repeat those steps to add and link the rest of your images until the graphic is complete.

Do NOT leave spaces in between the graphics. Make one continuous line of text - this way your images will appear right next to each other and appear as one graphic.



And that's it! You're done!

THANK YOU MICHELLE!!!!

(PS...don't forget to then stick [ center ] [ /center ] (w/o the spaces) around it! )

[scrapsandsass]

Can't wait to try this out.

[crystalbella77]

*sigh* ok..I really need to try this I think...lol Every time I do I mess it up but this all makes sense....

[nietis]

awesome!!!

[lingovise]

this is soooo helpful! thanks ♥

[Mye]

Love this tut, Lauren. I have tried the slice version it worked fine too

[Keely~B]

I dare someone to NOT center

[maaike]

Whaaa I totally didn't know this tread was here and I wrestled myself trough doing this last monday! I finally figured out how to do it perfectly...and now here's the explanation!

[crystalbella77]

oooooh! Keely! Yours is cuuuuuuuuuuute!

[scrapsandsass]

For some reason, even though the tut is amazing, I can't get mine to work. Two of the three pieces line up, but the other won't. Now I'm going back to the drawing board to make something that will be more "piece" friendly.