How to make a sigbox

Need help making a website? Coding your own adoptables? Ask questions or share knowledge here

How to make a sigbox

Postby eliethewolf » Sun Aug 22, 2010 3:02 pm

Since I've seen so many people asking how to make a sigbox or imagemap I thought I'd post a little tutorial. Brushes used are by Aka-Joe on Deviantart.

To make one you'll need an image host (photobucket, tinypic, imageshack, etc), and an art program (GIMP, Photoshop, etc).

First you start with an image. For this example I'll use a picture of my fursona, Elie.

Open the image in your art program. I use GIMP because it's free. Make sure you make the canvas size the size and shape you want the sigbox to be. To fit in your signature you want it to be a medium rectangle. Example

Now you can decorate the image however you want to. You can use brushes to add designs and make it pretty. I make a separate layer underneath my base image for the decorations. Example

Then you add the text. You want to make each word have its own vertical space because you are going to be splitting the image vertically. For this one I just used pets, trade and wishlist. Example

Then you merge all the layers together. Save the whole image now, in case you mess up. Now you split the image into pieces. You don't want any space between the pieces or it won't look right. Each word has its own piece. Make the piece with the rectangle tool, copy and then "paste as new image". Save the new image (Save as a .png if there is transparency) and go back to the old one. Right where the old piece ends, use the rectangle tool to make a new piece and repeat for each word. Example

Now upload each piece to your image host account.

Now is the easy part. You just treat each piece as an image link. So for the first piece I'd write
Code: Select all
[url="link to my pets"][img]Link to my image[/img][/url]


and repeat for each piece.

So it ends up looking like this

ImageImageImage

Hope that helped. :mrgreen:
User avatar
eliethewolf
 
Posts: 1464
Joined: Wed Oct 08, 2008 1:42 pm
My pets
My items
My wishlist
My gallery
My dressups
Trade with me

Re: How to make a sigbox

Postby TamakoKitashirakawa » Tue Aug 24, 2010 6:19 am

AWESome!
Image

Arisu-chan Here~! Reporting for Duty~! Sorry for being gone~! Sorta lost interest, but I do drop by every now and then. If you want me to stay, give me a good roleplay group~! Teehee~! Thanks for everything!
User avatar
TamakoKitashirakawa
 
Posts: 5767
Joined: Sun Feb 21, 2010 7:18 am
My pets
My items
My wishlist
My gallery
My dressups
Trade with me


Re: How to make a sigbox

Postby chillisart » Thu Aug 26, 2010 9:05 pm

Elie, you have just saved my life! Thank you so much <3
Image

Site Links wrote:{*Gallery*}
--
CLOVER // UK // [he/she/they]
I'm an artist! I've drawn all that you see in this signature -- you can also find me on tumblr, FA or dA <3
User avatar
chillisart
 
Posts: 2013
Joined: Sun Sep 27, 2009 8:56 am
My pets
My items
My wishlist
My gallery
My dressups
Trade with me

Re: How to make a sigbox

Postby eliethewolf » Sat Aug 28, 2010 6:17 am

Hahaha, glad to help. :D
User avatar
eliethewolf
 
Posts: 1464
Joined: Wed Oct 08, 2008 1:42 pm
My pets
My items
My wishlist
My gallery
My dressups
Trade with me


Re: How to make a sigbox

Postby DisabledLlama » Tue Aug 31, 2010 8:37 pm

WolfWarrior wrote:can we use this sites drawing program

Not if you want it to have a transparent background. You'd need to use an external program to split the image up anyway.
User avatar
DisabledLlama
 
Posts: 3136
Joined: Sat Aug 01, 2009 5:04 pm
My pets
My items
My wishlist
My gallery
My dressups
Trade with me

Re: How to make a sigbox

Postby chillisart » Tue Aug 31, 2010 8:56 pm

You can erase the white layer on the oekaki and it will be transparent :P
Image

Site Links wrote:{*Gallery*}
--
CLOVER // UK // [he/she/they]
I'm an artist! I've drawn all that you see in this signature -- you can also find me on tumblr, FA or dA <3
User avatar
chillisart
 
Posts: 2013
Joined: Sun Sep 27, 2009 8:56 am
My pets
My items
My wishlist
My gallery
My dressups
Trade with me

Re: How to make a sigbox

Postby BadDogAlliance » Wed Sep 01, 2010 7:16 am

kk I think I get it....then I can use paint on top of that right
User avatar
BadDogAlliance
 
Posts: 5495
Joined: Wed Jan 13, 2010 12:24 pm
My pets
My items
My wishlist
My gallery
My dressups
Trade with me

Re: How to make a sigbox

Postby Ultimate_Aero » Thu Sep 02, 2010 9:47 pm

This is such a good guide!I will get one soon,do you have any places you'd recomend to get a sig box made?
ImageImageImageImage
User avatar
Ultimate_Aero
 
Posts: 23
Joined: Thu Feb 11, 2010 3:04 pm
My pets
My items
My wishlist
My gallery
My dressups
Trade with me

Return to HTML/PHP Coding and Webdesign help

Who is online

Users browsing this forum: Electric~Lime~Zebra and 1 guest