A Beginners' Tutorial For Forum Signatures

[Kid Saiyan 0]

Well I decided to make a tutorial showing how to make a signature pic for Online forums, however this is no ordinary tutorial. It is designed so as that even if oyu haev not touched photoshop in your entire life, you can still follow it. So I will explain exactly how to do everything in detail, with pictures -------------------------------------------------------------------------------- Alrighty, The basic idea behind a signature is that you have your background, an image of a character of some sort, usually from a game, called a render, your main text (your username on the forum), and a caption. The thing to remember though is that sigs should never be made in the same way, so always do something different, like adding a layer here and there with clouds or something, etc. 1. So first, get your Render. There are two ways to get one: the easy way and the harder way. The harder way: Go on https://www.google.com/imghp?gws_rd=ssland type in his name. Then find a good picture of him/her/it.Then once you found it, right click on it and select Save Image As... and select a lotation you want to save it. http://cpostudios.com/IMAGESAVEIMAGEAS.jpg Then, open up Photoshop, and go to File>Open or hit Ctrl-O and go to select your file and hit OK. Your image will pop up in a small window in Photoshop. I usually liek to make my window larger, so grab the window's corner and make the window larger, thus adding some grey space aroudn the image. It's best to haev the image size as close to 100% as possible in the top right hand corner http://cpostudios.com/IMAGESIZE.jpg So try and have a good compromise of the image size and the window size. Now, how you cut out the render is up to how round it is. If it is, say, a spaceship, then I use the Polygonal Lasso Tool, which I can use by clicking and holding the lasso Icon and selecting the Polygonal Lasso tool: http://cpostudios.com/IMAGEPOLYGONALLASSO.jpg Now each time you click it makes an invisible point in the selected area, and connects each of those points in a straight line, which is why your render needs to have straighter edges. For round edges simple click numerous times around it, until you have a black and white moving line going around the render. If the render has a space in the middle that is not part of it (say he has a hole in his head ) then on the top left corner, select the Substract option http://cpostudios.com/IMAGESUBSTRACTOPTION.jpg and lasso around this section, thus removing it from the selection.Now once you have it selected nice and tidy, hit CTRL-C to copy the image. The Easier way: http://forums.xisto.com/no_longer_exists/has some very good renders, and they are already on a plain backgroudn for your easy selection of them. They don't always have the character you want, but as logn as the render is good, we don't really care So go to it, and find a render you like. In this case I'm using Son Goku here: http://cpostudios.com/IMAGESONGOKU.jpg So click "Save" below the image and select where you want to save it. Then open up Photoshop, hit CTRL-O or go to File>Open and open up your image.Then click on the Magic Wand Tool: http://cpostudios.com/IMAGEMAGICWAND.jpg And click on the white background. And magically it selects all of the white! Once you have all your white selected, hit CTRL-****-I to invert the selection and select the render instead of the background. Then hit CTRL-C to copy. 2. Now you have to make your background. So first create a new Image by goign to File>New or hitting CTRL-N. Then enter these setting: http://cpostudios.com/IMAGENEWIMAGE.jpg you can vary slightly on the size, but this is the most commonly used one. Next make sure your foreground and background colour are Black foreground and White Background by clicking this Icon: http://cpostudios.com/IMAGEICON.jpg Or hitting D on your keyboard. Now go to Filter>Render>Clouds. These grayish black clouds will then appear on your image. Try to have the blckness rather spread out like so: http://cpostudios.com/IMAGECLOUDSGOOD.jpg and not have it all on one side like this: http://cpostudios.com/IMAGECLOUDSBAD.jpg Now, we need to add some grunge on it. However, for this we need grunge brushes, and they do not come with Photoshop originally. So, go to http://forums.xisto.com/no_longer_exists/and download all of their brushes in the brushes section, and extract them to your Photosohp/Presets/Brushes directory. Then on http://forums.xisto.com/no_longer_exists/ download the Crazy's Grunge Brushes, the Heavy Scratches brushes, and all of the techish brushes and do the same. Then in Photoshop Click your brush tool, and click the arrow next to your current brush on the top left, and a brush selecting palette will pop up. Click the arrom on the top right of that and Select "Load Brushes". http://cpostudios.com/IMAGELOADBRUSHES.jpg Now select all the brushes you downloaded earlier and hit load. Voila! Bunch of new brushes! Now, go down at the bottom of the layers palette and click the "New Layer" button: http://cpostudios.com/IMAGENEWLAYERBUTTON.jpg This will create a New Layer. The advantage of making stuff on different layers is that you can change each layer individually. So if something is behind another, you can simply only change that one, but not the one on top. However in this case it is to make a more random appearance. You will see in you layers palette a new layer named "Layer 2". Below that there should be "Layer 1". Double click that one and rename it to "Clouds". http://cpostudios.com/IMAGERENAMECLOUDS.jpg Now, select Layer 2, and select the Brush Tool in the tool palette. Now go up to the arrow next to the brush type again, and select one of the more cloudy grunge brushes.The "Officialcdpgrunge" brushes, aka Crazy's Grunge, are the best ones for this. http://cpostudios.com/IMAGESELECTBRUSH.jpg Now, for your new layer, change the Blending mode to "Soft Light". http://cpostudios.com/IMAGESOFTLIGHTBLENDINGMODE.jpg Blending modes are basically how the layer overlaps onto the layer(s) underneath it. Now with your grunge brush, making sure the foreground layer is still at Black, click a few times around the picture, until it looks a bit like this: http://cpostudios.com/IMAGEGRUNGELAYER2.jpg Now, make a new layer again and change its blending mode to soft light again. Now change your brush, and brush again until you have maybe something like this: http://cpostudios.com/IMAGEGRUNGELATER.jpg Repeat this a couple more times, using all sorts of different Brushe, until you have maybe 10 layers. I use the Heavy Scratches Brush (aka the huge one with lots of scratches and stuff) a few times too. I got this: http://cpostudios.com/IMAGEGRUNGEWHITE.jpg Don't worry if it's a bit dark, we'll fix this up by changing the foreground color to white and continuing to brush. Now, click the little folder icon at the bottom of the layers palette to make a new folder. http://cpostudios.com/IMAGEFOLDERICON.jpg Now a folder will pop up in your Layers palette. Double click it and rename it "Background". Now, drag each of the layers you made into it. Now click the arrow beside the folder and it will all fold up inside it, nice and tidy http://cpostudios.com/IMAGEFOLDERBACKGROUND.jpg Well that's it for the background, onto the render. 3. Remember earlier we hit CTRL-C to copy the render we had? Well now hit CTRL-V to paste it onto a new layer. Rename this layer "Render." Now go to Edit>transform>Scale and a square will appear around your render. (If you don't see it, zoom out). Now grab a corner and hold CTRL-SHIFT-ALT and change the size (holding these keys makes it keep its aspect ratio, and not get squashed). http://cpostudios.com/IMAGERESIZE.jpg Now hit enter to apply the transformation. Alrighty, now that we have our render well positioned, let's make it blend in better with the background. Click the "Add Layer Mask" button at the bottom of the layers palette: http://cpostudios.com/IMADEADDNEWLAYERMASK.jpg A layer mask is basically a way to erase parts of an image, but it's mroe sofisticated than the eraser tool. What's cool about it is that you can use a brush to both erase and unerase parts of an image. A layer mask is represented by a black and white image, where black represents erased bits, white is unerased, and grey is half erased (transparent). So now in your layers palette you should have a white quare next to your "Render" layer, this is your layer mask. As you can see it is all white right now. Click it and it will have a kind of double border. http://cpostudios.com/IMAGESELECTLAYERMASK.jpg Now get a grunge brush, preferably cloudy (officialcdpgrunge brushes for example) and make sure your foregroudn color is set to black. Now on the top you should see some options for the brush tool. Change the Opacity to 50% (opacity is how transparent the brushing will be. So therefore making the opacity lower will mean the brush will appear grey when painted on white. http://cpostudios.com/IMAGEBRUSHOPACITY.jpg Don't forget you can also change the size of your brush. Now, click a bit around the edges of your Render, sometimes changing brushes and opacity, while making sure you always have your Layer Mask selected. If you mess up, then you can hit CTRL-Z to undo. But if you want to undo a couple steps, then on the left of the screen there is a kind of "action History where you can go back in time. http://cpostudios.com/IMAGEACTIONHISTORY.jpg It also helps to change the opacity of your actual layer to something like 97% sometimes. Now Brush until you get somethign like this: http://cpostudios.com/IMAGELAYERMASKDONE.jpg I didn't brush much in this case, but sometimes it helps to brush a lot more. Now, it looks rather strange to have a colored character on a black and, white background so I'll lower the saturation a bit by hitting CTRL-U and changing the saturation to this: http://cpostudios.com/IMAGESATURATIONCHANGE.jpg So now it has a bit of color, but is very close to Black and White. Of course,I don't want my final sig to be Black and White, so I'll add waht is called an adjustment layer. Adjustment layers change all the layers underneath them. So go to Later>Add New Adjustment Layer>Color Balance. Click OK on the window that pops up, and a little windwo with sliders appears. Just toy around with the settings until you get a color you like. Click the Shadow/Midtones/Higlights buttons to change them instead, and once you're happy click OK. http://cpostudios.com/IMAGECOLORBALANCE.jpg Now you will have a New layer on top of everything with a Layer Mask and a strange circle thing. If you double click the circle thing it will allow you to modify your Color Balance settings. Sometimesit'll seem too dark or too light. To Fix this simply make a Layer>New Adjustment Layer>Levels. A strange window with a kind of graph will pop up after you click Ok. What we use though are the little arrows right beneath it.If you move the white one left, it will make the image darker, if you mvoe the black one right it will make it darker. If you move the grey one right or left it will also change it.Click OK once you're done. http://cpostudios.com/IMAGELEVELS.jpg Alright. Now comes the hard part: being original It's here that you have to use your imagination and come up with something to do. So now it gets hard to write a Tutorial, so I'll just tell you the different things you can do, but of course, try to come up with new ones. 1. First of all you can get an overlay. There are 3 kinds of overlays I know of, Scanlines, Squares, and dots. Both are made the same way, but one thing changes in each. a)Scanlines. Tutorial Only thing I do differently is I change my Blendign mode to Soft Light and tweak the Opacity of the Layer. b)Squares. This is the same thing as scanlines, except this time make your Document 7 x 7 pixels and fill it in like so: http://cpostudios.com/IMAGESQUARES.jpg c)Dots. Same thing as Scanlines, except make your document 10 x 10 and fill it in like so: http://cpostudios.com/IMAGEDOTS.jpg In this case I used simple Scanlines with a layer mask. http://cpostudios.com/IMAGESIGSCANLINES.jpg Now I Won't get too jinky with it and I'll leave it there, but keep in mind this is the part of the sig that makes it stand out and decides wether it's good or bad. However for the purpose of this tut I'll stop here. Now let's move on to the text. 4. Text. Alrighty. Click the Text Tool http://cpostudios.com/IMAGETEXTTOOL.jpg And click somewhere where you want to put your text. Now select a good font, in this case Serpentine. However you can get many many good fonts from http://www.dafont.com/de/. Anywho, I but my text white and wrote my username: Pooky at 36 px Size. http://cpostudios.com/IMAGETEXTSETTINGS.jpg Now right click it in the layers palette and select "Rasterize Layer". This will allow you to access the Blending Options, by double clicking the Text Layer's Image. Now it will pop up a box with lots of options. But you really have to play with it to understand what everythign does. Right now I'm simply applying a bunch of options until my Text looks like this: http://cpostudios.com/IMAGEMYTEXT.jpg Now for captions use the font "Visitor TT1 BRK" at 10px size and write your caption in white. Then Rasterize it and apply a Stroke like so: http://cpostudios.com/IMAGESTROKESETTINGS.jpg Then lower the layer's opacity and maybe change the blending mode. http://cpostudios.com/IMAGESIGCAPTION.jpg 5. Border. Alright there are many different kinds of borders. One kind is this, and then there's simple thin borders. To make thin borders, simply hit CTRL-A to select the whole Canvas, then go to Edit>Stroke and put in the width as 3px and the color as black. Then go to Edit>Stroke again and type in 2px and make the color grey. Then go to Edit>Stroke a final time, make it 1px and make the color be the color oyu want the border to be, in this case darkish blue. http://cpostudios.com/IMAGEBORDER.jpg Voila! Now you can add some stuff and touch up some layers, but his is the end of the tutorial, hope it was helpful! :)

Edited November 29, 2016 by OpaQue (see edit history)

[JUDGE_RELIC 0]

nicely, done...

[Andrew1405241517 0]

I appreciate the help, your directions are nicely done and easy to understand. I plan to follow your tutorial later today and see what I come up with. In the past I've always gotton somebody to create my sig's which is hard because they don't know exactly how I want it to look. I'm scared of photoshop, but I'll try to whip something up and see if you're help gets me anywhere.

[Jeigh1405241495 0]

Wow...I have no need to read all that but well done, it looks pretty freaking comprehensive :| I'm sure it'll help alot of people who don't follow my pattern of "find stuff, add other stuff, stick name on it". Good work

[ebbinger_413 0]

nice tut...very very detailed...wonder how long it took you to do that ? i like the style you used in the sig as well...text wasnt my favorite...but it was still good...i saw the outcome sig and it gave me an idea...i didnt read through the whole tut (being so long and i already know that stuff) but i wanted to make something similar but it came out quite different...

 

 

but very nice tut...i like it a lot...keep it up

[iGuest 3]

Photoshop Used?A Beginners' Tutorial For Forum Signatures

hey, awesome tutorial,

but I was wondering... Which version of photoshop did you use?

Like, what was the name of it, because I couldn't follow your instructions

perfectly well because my settings and tabs are in a different place than

yours.

Please email me, or just message me back on this,

Thanks, Curtis

-reply by curtis