Internet Forum Signature Tutorial

Introduction

Why hello there, fellow 'temper! Do YOU want to have a cool signature like me, or Shockwind? Then give this tutorial a read.
In this tutorial, I will teach the basics of signature-making on GBAtemp. I will be using Adobe Photoshop CS6, but I will also include a tutorial for GIMP. I will also not use custom files that are unavailable for the average PS/GIMP user (I.E Brush presets, custom fonts, plugins etc.) So everything is just stock. So, lets get started!

Basics

Your signature (or what I'll be calling a "sig" from now on) can be almost anything. It could be a nice list of things or a sig banner that looks nice, or even both! Just make sure you're not linking to warez stuff or porn in your sig or anything NSFW (because it could ruin the minds of the little children that are browsing this forum!).


The Signature itself
Banner-type Signature

First thing first, you want to create a new file in Photoshop. Preferably having a 500x150 resolution.
Your image should now look something like this:
SpxalHA.png
Now, we want to add something to it. Let's say, a stock image. This could be anything from an anime character to a real life model. I usually get my stock images from http://www.zerochan.net/. I found this image of Megaman and I downloaded it. Of course you don't need to download it, you could just copy it and paste it right into photoshop, but that's going to cause some problems I'll explain further. Now we drag in our image into PS, and it should look something like this now:
7woRuWM.png
Well, obviously we don't want megaman to be a 100x100 jigged pixel-art mess! We can RESIZE him!
BCt27N8.png
There! That looks way better! Let's use our Magic Wand Tool and remove the white background from our render.
Now, we add a background to the image. But before that, lets duplicate our layer (Ctrl (Command) + J on the layer).
The easiest way to add a background, of course, is by using a stock background. But we're better than that! We can make a background out of the stock image itself! First, get your Smudge Tool and open up your brush properties. Use these settings on a 12px diameter round brush:
ZhDPdx6.png
YbK0no4.png
YspVwTg.png
Also, make sure "Noise" is on.​
After setting up our smudge tool, lets select our lower layer and make the top one invisible. If you did everything correctly so far, your layers should look something like this. Lets take out our smudge tool and play around with our lower layer, make sure everything is going "up" as if Megaman is about to teleport somewhere. If done correctly, this should be your result:
B6suYwc.png
Now, of course that doesn't look very good, but lets make our top layer visible again and you'll see how cool it looks!
u5jg1iA.png
This is the part where we make a real background. If you like your signature to be "minimalistic" and don't want anything other than your render and effects added to it on your sig, you may skip this part.
Lets take out our Gradient Tool and make a new layer in-between the background color and the 2 layers we made. Open up your Gradient Editor and make a new gradient which consists out of 2 colors, #3257af and #72b8ff. Now that we have our new gradient, lets fill up our new layer with it like this:
o1klOsN.png
The result doesn't look very well due to the fact that the render has a white outline, but we fix that by changing the gradient-filled layers opacity to 25%. If you've done everything correctly so far, your sig should look like this:
sV09RfL.png
Great! Now, before we do our final touches, we should add some text in order to prove that you're the creator of the sig or at least who this sig is for. When doing signatures at relatively small resolutions (500x150 and lower) I personally use pixel-art bitmap fonts. But since this tutorial is for the average GBAtemp user, we're not going to go look for bitmap fonts. But don't worry! Bitmap text is easy! You can do it by yourself, and I doubt you need an explanation how to.
So, lets make a new layer specifically for your text. Create some cool-looking bitmap text. Then, add some cool homemade pixel-art around it to make it supercool. Here's what I got:
XspLCBZ.png
Great! Now time for the final touches. Here is where the real magic happens. Even if your sig doesn't look really good, this is the part where it makes it at least okay, and if your sig is good so far, this step will make it excellent.
Add a new layer, and take out your Brush Tool. Select a 500px diameter brush with its hardness set to 0%, and use it with letting only the edge of the brush touch the image, like so:
La6bAcO.png
Lets add a gradient map (you can make one by pressing this)
Now that you've added this gradient map, you think you've ruined it, right? Wrong. Change the opacity of your gradient map to 15%~10% (depends on what gradient you're using). Use different gradients and see what fits you and use it.
You should come out with something looking like this:
DggROVv.png
Now, the final touch! The famous 1px-wide black border! This is something very easy to do in programs like MS Paint and whatnot, but in PS it's just a little bit more harder!
Create a new layer, and select it all. Then, Select>Modify>Border and put the width to 1px. Take out your Bucket-fill tooland fill your selection with black, but don't deselect yet! As you see, there's another line that's not in the selection put PS still decided to put in there even though you didn't want it. Press Ctrl(command)+shift+i to invert the selection and delete that useless line by pressing delete 4 times. If done correctly, this should be what your result:
hNKn76Q.png
Congratulations! You've just made your first good-looking sig! :D
Text-based Banner
Have you ever wondered how you could make a signature like the following:
iJ8vIGLaFh5F2.png
Well, this is the part where I teach you how to!
First off, lets make a completely new image at 500x150 resolution. Lets take out our Text tool and write down your nick, preferably at a size over 72px and all caps:
XQBmBnO.png
As you can see, the text is aliased, boring, and is dull. We need to change the font and add some anti-aliasing. I used Century Gothic as my font and changed the anti-alias to Sharp.
NaFQ2MV.png
Starting to look real good here! Now, let's go to wallbase.cc to find some cool picture to use for this text. I chose this, but of course you can use anything else you wish. Copy that image and paste it straight into photoshop, place it right on top the text. Then, right-click on the imported layer and create a clipping mask. If done properly, you will come out with something like this:
MFEldxN.png
That alone looks quite good. In fact, it looks so good that you can stop reading right here! But, if your sig still doesn't fit you, then continue reading.
Right now we're gonna give this text a shadow, but it depends on you if you want it to be a drop shadow or an inner shadow. Right click on the text and choose blending options. Let's try a drop shadow.
4tjgQwn.png
As you see, the result isn't very appealing. So lets try an inner shadow:
UJGtpxt.png
As you can see, that's pretty cool. So, yeah, that's basically it.
Here's the final result in case you're wondering:
6CltfDI.png
Banner-type Signature
First off, let's create a new image with the resolution of 500x150. Now, we import our stock image. I personally use zerochan.net for my renders, but a simple google image search can help you too. I'm going to be using this Megaman render. Download it and import it into GIMP:
OrS0iNI.png
Now, I've got to say that looks pretty cool by itself and can surely used a signature without problems. But, in this tutorial we're supposed to go through the basics of sig-making. And unfortunately, 99% of all these times this kind of thing doesn't happen! So, we need to re-size the render. Select the render and use the Scale tool and hold Ctrl(Command) to scale it properly:
0xLrDto.jpg
Sorry for the poor quality, imgur is screwing up
Now, we need something happening in the background. Duplicate the render. Select your Smudge Tool and input the following settings:
LKIvQ9u.png
Make the top layer invisible and select the lower one.
Now, smudge megaman around his corners. This adds an effect which makes it look like megaman is getting a console port. It should look like this:
YdfcbbO.jpg
Make your top layer visible and you should be greeted with an image like this:
GYAUsGS.jpg
Now, time to add something more to the background! Add a new layer in-between the background and 2 layers. Take out your gradient tool. Create a gradient out of the colors #3257af and #72b8ff. Make a gradient on the layer like this:
1As4d0p.jpg
After applying the gradient, we see that it doesn't fit very well. This can be easily fixed by changing the opacity to 20.3%:
2MaQphY.png
Before we do our final touches to the sig, lets add some text and nice pixel-art to it:
2B0Eyyb.png
Great! Now time for the final touches. Here is where the real magic happens. Even if your sig doesn't look really good, this is the part where it makes it at least okay, and if your sig is good so far, this step will make it excellent.
Add a new layer, and take out your Brush Tool. Select a 500px diameter brush with its hardness set to 0%, and use it with letting only the edge of the brush touch the image, like so:
T8lBgtr.png
Now, the final touch! The famous 1px-wide black border! This is something very easy to do in programs like MS Paint and whatnot, but in GIMP it's just a little bit more harder!
Create a new layer, and select it all. Then, Select>Modify>Border and put the width to 1px. Take out your Bucket-fill tool and fill your selection with black. If done correctly, this should be what your result:
m1QsWyr.png
Note: gradient overlay is not included in this tutorial since it's not very possible in GIMP as of the writing of this tutorial.
Does your banner still feel a little bland and unworthy of being in your signature field? Here I'm going to talk about how you can make your signature better.
  1. Use the Curves and Levels tools
Here's the Megaman sig I was making in Photoshop. As you see it's quite good, but we can adjust it a little bit by playing with the Curves (Ctrl(Command)+M). But first, we need to merge all of the layers together. This can be done by making all of the layers visible and pressing Shift+Ctrl+E. There really is nothing to explain about curves, just play around with it until you find something that fits you. Here's my sig after I adjusted the curves:
XzW7HCX.png
Uploading & Size
Now, I personally always upload in .png since it gives me the best quality and takes less space. On GBAtemp, you have a size limit of 80kb for your signature and profile pic combined. So, you'll need to always make sure the sum of your profile pic and sig aren't over 80kb or else you might get banned (actually you won't but your signature/profile pic will be removed). If your signature or profile pic has a lot of colors use .jpeg, if it doesn't use .png. Here's a good article about which format you use and when.. Here's and image that can quickly explain the differences:
file_type_comparison.png
Uploading your image is kind of the tricky part. I used to upload on GBAtemps servers but then I lost access to them after the XenForo update. So, now I mostly use minus.com for my important uploads (Signatures, Homescreens, Hentmei, Porn etc.) and imgur for very minor things that are mostly useless for me. Whatever you do, don't use terrible upload services like photobucket, since they take down your image after they become "popular" and start demanding money.

Text
Text is important. You can use your signature as your own personal advertisement (well, not really). You can put your twitter, tumblr, steam, etc. on it. But, how do you make it look cool like in my sig? This is where I talk exactly about that.
One of the most important things in putting text under your sig banner is the font and color. Since the introduction of XenForo on GBAtemp, there isn't any visible option for fonts like in IPB, but they're still there. The fonts which I have personally checked to still work are Ariel, Courier, Century Gothic, Courier New.
Your links should be divided by symbols like "\", "|", or "/". These symbols should also be colored. Here's an example of a text-oriented signature:

Steam / Twitter / DeviantArt

See? Very nice, clean, and minimal. Looks even better when there's a good banner above it.


Well, that concludes this basic tutorial! Thank you for reading!
 

Sicklyboy

#JOYCONBOYZFOREVER
Global Moderator
Joined
Jul 15, 2009
Messages
6,297
Trophies
2
Location
[̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅]
XP
7,950
Country
United States
I learned things today, even though I don't have a current copy of PS and CBA to find the old ones I have or download a new one. A lot of those instructions should translate well into GIMP if you know your way around the basics of the program and aren't a total idiot.

Good tutorial.
 

Sop

groovy dude lmao
Banned
Joined
Nov 14, 2010
Messages
1,244
Trophies
0
Location
qld
XP
553
Country
You are one of the best graphical artists I know (the ones i know are pretty bad)... But anyway, what do you recommend, GIMP or Photoshop, and if Photoshop, how can a GIMP user learn to use photoshop?
 

AlanJohn

くたばれ
OP
Global Moderator
Joined
Jan 6, 2011
Messages
3,849
Trophies
2
Age
26
Location
Canada,New Jersey
Website
www.deenextreme.com
XP
8,173
Country
Ukraine
You are one of the best graphical artists I know (the ones i know are pretty bad)... But anyway, what do you recommend, GIMP or Photoshop, and if Photoshop, how can a GIMP user learn to use photoshop?
I totally recommend Photoshop. It's a lot better and has a lot of more functions. PS is very easy to learn and, ironically, it's easier than GIMP.
 

Ericthegreat

Not New Member
Member
Joined
Nov 8, 2008
Messages
3,454
Trophies
2
Location
Vana'diel
XP
4,254
Country
United States
I learned things today, even though I don't have a current copy of PS and CBA to find the old ones I have or download a new one. A lot of those instructions should translate well into GIMP if you know your way around the basics of the program and aren't a total idiot.

Good tutorial.
I totally recommend Photoshop. It's a lot better and has a lot of more functions. PS is very easy to learn and, ironically, it's easier than GIMP.
Its also just something good to know. Its also free for everyone on gbatemp so every member should have a copy of master collection ;)
 

AlanJohn

くたばれ
OP
Global Moderator
Joined
Jan 6, 2011
Messages
3,849
Trophies
2
Age
26
Location
Canada,New Jersey
Website
www.deenextreme.com
XP
8,173
Country
Ukraine
Thank you. This is what I made using some of the steps from your first Photoshop tutorial.
Looks good for your first signature! I recommend to re-size your images without changing the aspect ratio by scaling them while pressing the shift key, that way it doesn't look stretched out.
 

Natural

Well-Known Member
Member
Joined
Jul 25, 2014
Messages
380
Trophies
0
XP
594
Country
United States
Looks good for your first signature! I recommend to re-size your images without changing the aspect ratio by scaling them while pressing the shift key, that way it doesn't look stretched out.

You mean when I use File>Place to open an image?

I held the shift key and nothing seemed to change.

Is there some other tool you are talking about?

Also, how did you create your smudge settings and is there a guide to understand what exactly each of the brush settings do?
 
Last edited by Natural,

Site & Scene News

Popular threads in this forum

General chit-chat
Help Users
  • No one is chatting at the moment.
    LeoTCK @ LeoTCK: yes for nearly a month i was officially a wanted fugitive, until yesterday when it ended