IPB
 
Reply to this topicStart new topic
> How To Add Links To Your Signature
your_mother
post Jul 10 2011, 09:44 AM
Post #1



Group Icon

Group: Legendary Designer
Posts: 2657
Joined: 9-January 08
From: Taka Tuka Land
Member No.: 2505090



This tutorial will show you how you add links to your forum signature. It doesn't help with creating the signature itself... I'm using Tattwams siggy for an example:
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/Tattwamw.png)

To add the links to your siggy you have to cut your image in different parts. To do that open the image in photoshop. It all works best if your file has only one layer...


1. Create some guidelines where you want to cut your image.
Make sure the 'Move Tool' is selected. Now simply click on any part of the rulers and pull the guide line to the point you want to cut your image. Let go of the mouse when you are satisfied. You can still move your guide afterwards. Simply move the mouse on the line, click and drag.
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/Sig1.jpg)

If you can't see the rulers on your photoshop window you can make them visible by choosing 'View' - 'Rulers'.
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/Sig2.jpg)

In this siggy I want to have three images, one with Tattwams Name, that has no link, one for the gallery-link and one for the profile-link. I added guide-lines accordingly:
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/Sig3.jpg)


2. Choose the 'Crop Tool' from your tools bar.
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/Sig4.jpg)

Now choose the first part of your siggy. In my case that's the part with Tattwams Name. Make sure you crop the image where you set your guide lines. Press the ok symbol on the top of your photoshop window when you are satisfied.
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/Sig5.jpg)


3. Save the cropped image. You have to do that with 'File' - 'Save for web and devices'


4. Now undo your last step with 'Edit' - 'Step Backward' or press 'ctrl' & 'alt' &'Z'.
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/Sig6.jpg)


5. Repeat the steps 2 and 3 with the other two parts of the image. Of course your siggy can also have only two parts... More than three doesn't work, by the way.

You should now have three different images saved:
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/nothing.png) (IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/profile.png) (IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/gallery.png)


6. Upload your images.
You can use any webpage for that. I'm mainly using Photobucket...


7. The code.
Post your images as you would usually do in the forum. The only thing you have to take care of is the right order. Since I have one image on top and two that have to be placed under it my code looks like this:
CODE
[img]http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/nothing.png[/img]
[img]http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/profile.png[/img][img]http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/gallery.png[/img]

First the image with Tattwams Name, then the Profile and Gallery image right under it.

8. Adding the links
Mark the part of the code where you have your profile image. In my example that would be this part:
CODE
[img]http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/profile.png[/img]

Now press the 'Insert Link' button of the editor and insert the link to your profile. After that mark the part of the code where you have your gallery image and insert the link to your gallery.

That's it. You now have a linked signature. (IMG:style_emoticons/default/clap.gif)

By the way: If you're making a siggy for somebody else you might want to share the code. To do that simply ad code-tags to the code you want to share. Like this:
(IMG:http://i1121.photobucket.com/albums/l507/your_mothers/Tutorials/code.png)
Go to the top of the page
 
+Quote Post
soumyadeepbshn
post Jul 10 2011, 11:13 PM
Post #2



Group Icon

Group: Gifted Themer
Posts: 1827
Joined: 9-October 10
From: India
Member No.: 8177967



Thnx a lot Mom !

Previously I used "Photoscape" for cropping the images & insert the links

Now I have learned with cs5 , thnx 2 u .
Go to the top of the page
 
+Quote Post
sksahoozzz
post Jul 12 2011, 02:41 AM
Post #3



Group Icon

Group: Gifted Designer
Posts: 1439
Joined: 19-August 10
From: INCREDIBLE INDIA
Member No.: 7919246



Very good Tutorials about Siggy.
BTW mom is it only allowed .png formats / .jpg formats also allowed for use ?
Go to the top of the page
 
+Quote Post
your_mother
post Jul 12 2011, 05:00 AM
Post #4



Group Icon

Group: Legendary Designer
Posts: 2657
Joined: 9-January 08
From: Taka Tuka Land
Member No.: 2505090



QUOTE (sksahoozzz @ Jul 12 2011, 11:41 AM) *
Very good Tutorials about Siggy.
BTW mom is it only allowed .png formats / .jpg formats also allowed for use ?

Basically you can use any format for a signature (png, jpg, gif). If you are using jpg you have no possibility to make the background of your siggy transparent, that's why it's often in png format. If you are using gif format you can add transparency, but not as nice as with png (it's pretty hard to add a shadow for example). But it gives you the possibility of adding an animation...
Go to the top of the page
 
+Quote Post
Na3em0
post Jul 12 2011, 05:17 AM
Post #5





Group: Super Members
Posts: 515
Joined: 27-June 09
Member No.: 5446391



that's amazing u r so good thnx
Go to the top of the page
 
+Quote Post
LordOfLightning
post Jul 12 2011, 07:01 AM
Post #6





Group: Super Members
Posts: 1325
Joined: 23-December 10
From: The Shadows
Member No.: 8562758



Awesome tutorials
mom
Go to the top of the page
 
+Quote Post
mkraj25
post Oct 4 2011, 08:26 PM
Post #7



Group Icon

Group: Gifted Themer
Posts: 706
Joined: 10-July 11
From: Bangladesh
Member No.: 9477888



THANKS MOTHER (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
 
+Quote Post
san-sagar
post Oct 5 2011, 02:39 AM
Post #8



Group Icon

Group: Rising Themer
Posts: 3390
Joined: 28-March 11
From: India,maharastra-mumbai
Member No.: 9008745



Thanks mommy for this amnsome tutorial
Go to the top of the page
 
+Quote Post
_Daniel_02
post Jan 23 2012, 04:19 AM
Post #9





Group: Members
Posts: 357
Joined: 7-May 11
Member No.: 9189013



Thanks alot...nice tutorial..! (IMG:style_emoticons/default/clap.gif)
Go to the top of the page
 
+Quote Post
peace_lover3
post Sep 23 2012, 12:43 AM
Post #10





Group: Partial Members
Posts: 90
Joined: 11-August 11
From: Pakistan
Member No.: 9889802



thahks
Go to the top of the page
 
+Quote Post
gourabguddu
post Oct 13 2012, 12:27 PM
Post #11





Group: Super Members
Posts: 625
Joined: 14-September 12
From: darjeeling, siliguri, west bengal [INDIA]
Member No.: 15808131



thank you..
Go to the top of the page
 
+Quote Post
king_abhishek
post Dec 23 2012, 09:52 PM
Post #12



Group Icon

Group: Rising Themer
Posts: 1397
Joined: 1-October 11
From: india (banglore)
Member No.: 10822442



nice tutorial (IMG:style_emoticons/default/thumbsup.gif)
Go to the top of the page
 
+Quote Post
Rohitkohli888
post Dec 23 2012, 10:59 PM
Post #13





Group: Super Members
Posts: 711
Joined: 23-October 12
From: 7-c-15 mahaveer nagar 3rd kota, rajasthan
Member No.: 16309069



nice tutorial (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
 
+Quote Post
Emopintu95
post Dec 26 2012, 09:32 AM
Post #14





Group: Partial Members
Posts: 121
Joined: 28-March 12
From: Beautiful INDIA.
Member No.: 13541784



Can u make any emoboy sig for me.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

 

Lo-Fi Version Time is now: 1st September 2014 - 04:28 AM