Photoshop 7 Sig making tutorial

[DraGunZer0]

Umm... aiight as promised heres the little photoshop sig making guide...
I really dunno where to start so umm... I'll just talk you through while I make a new sig
1.) First thing you need as with all sigs, is pictures. I usually spend a really long time on this step (about 1-2 hours to get the right angles I want, yes im nit picky)
- If you have a character in mind, get some pics that you like and find some neat angles. Also try to keep the quality to same for best looks.
- Next pic you should look for is a background. Try to find a background that will go with your pic. For 3d or graphical backgroudns you can find them on various sites on the internet, or you can make your own with 3d studio max (can't help you with that because I still haven't found a working version of 3d studio max, yes I'm too broke to buy it.)
- I'm gonna make a sig with Haku since I have some good pics for him already
- For a background I'll be using this because it looks icy (My theme will be a light blue icy feel) http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/7.jpg
- The next pics I THINK i'll be using (just get a bunch so you can arrange them later for the best angles and looks) http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/6.jpg http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/5.jpg http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/4.jpg http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/3.jpg http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/2.jpg http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/1.jpg (Note these pics were scaled down just so that it would load faster)

2.) Once you get all the pics you need its time to go to photoshop.
- First pick a part of your BG that you really like (if its verticle then you can easily make it horizontal by going to edit -> transform -> and change it accordingly)
- Remember that the dimensions must remain 400x80 (but getting the BG doesn'e have to be that size, do a free transform to get the right size.)
- Next chop out off the images you plan to use or think would fit well. Also arrange it so that it would look somewhat like the way you want your finished product to be.
- http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/8.jpg

3.) Now to make the pics look more alike (as you can see, some pics of Haku are brighter/darker than others.)
- If you want to get the pics brighter, select layers that are darker then go to image -> adjustments -> levels and mess around with it until you get the right shade. You can also try any of those stuff under adjustments. The easiest thing to use is color overlay under layers -> layer styles.
- Heres what it looks like after I adjusted everything to fit closely http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/9.jpg

4.) Now for the beauty of it all. Basically, you want your colors to match some sort of theme. Since im using a light blue/blue theme im going to make the pics have some tint of blue in them. Again you can go to adjust and adjust the colors but this is where i mainly use color overlay just because I'm usually really tired at this point lol.
- I decided to make the Haku face shots on the left lighter than the body pics on the right mainly because there is more dark spots on the right side than the left.
- Also decided to keep the middle Haku face and middle body darker than the rest because I want those to stick out more. You have have more things stick out just don't go overboard or else people won't focus on one point of the pic.
- Also mess around with the layer styles. Especially Opacity which I really love. Makes those transparent pictures that gives moody pics a nice touch.
- http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/10.jpg
- http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/11.jpg
- You might also want to give your main pic an outer glow to make it stand out, try to make it blend with the other pics though.
- http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/12.jpg
- A note, you might also want to edit a pic to fit your needs, I edited Haku's face a bit, kinda want him clean instead of those small battle cuts he has on his cheeks.

5.) Any finishing touches such as text or small pics to increase a feel in the sig.
- I'll just keep it simple and add some text
- Give the Text some effects to go alone with the theme. Since it fits the icey feel, I can use Pattern Overlay on teh text to make it look like its made of ice. I can rarely use layer style mainly because it never fit into any of my work, cept this one.
- Also changed the full Haku's body color overlay a bit to fit with the face. I used gradient overlay to fade 2 colors together.
- Also any extra effects (like the hardly noticeable points near my name on my Sasuke sig) makes it neat
- You really need to experiment on your own and play around with the tools. So far I have shown you how to basically compile pics together. But advanced choppers and create their own effects and do crazy things all with photoshop. Also for 3d designs just use 3d studio max... photoshop is mainly for 2d although experts can create 3d designs on it. (Or you can just follow some online tutorials ^_^)
- Here is my old sig for the forum which I made when I was bored, you can probably come up with something like this:
http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/Sexy_no_Jutsu_Sig.jpg
- Something a little more advanced, this was what got me back into photoshop again (this was made before that sexy no jutsu sig, I didn't really put much thought or effort into my works if I keep creating things constantly so sexy no jutsu turned out crappier than this.)
http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/Lightning_Edge.jpg
- And finally, here is the finished product:
http://img78.photobucket.com/albums/v299/DraGunZer0/Sig/13.jpg

::Edit:: Forgot to tell you that I used most of these techniques on my wallpapers too and umm... have fun! ^_^v

[Mut]

uhhh... i mean...

*runs off*

[DraGunZer0]

Take the easy way like Sasuke?

[Assertn]

yes.....because......the sharingan is for stealing abilities, instead of learning them on your own i/expressions/face-icon-small-tongue.gif

nice tutorial, although some of those faded pictures are harder to visualize without having seen them through the design process

[DraGunZer0]

yea i purposely do that to almost all my works... just to see if people can point it out ^_^ and i get it now! lol yea kinda slow there... a bit sleepy and tired from writing, typing and UL the pics...

[Darkflare]

i would recommend a little bit of blurring on the edges to give it a slightly better look.

[DraGunZer0]

Edged of which pic(s)?

[Darkflare]

any pic. all pics, almost. the sasuke in your sig could use a little once you can change your sig.

[Assertn]

hey, if you dont mind....i think im bored enough to add in a very simple effect trick that i think alot of people would like to use to touch up their screencaps for sigs and wallpapers.....this is something ive seen on some really nice wallpaper, and i decided to recreate it....its actually quite simple to do


HOW TO ENHANCE THE LOOK OF A SCREENCAPTURED ANIME PIC

1) obtain the pic

you can dl them easy enough, but if you want your own, and have windows media player, all you need to do is press ctrl + i to save them as an image file

http://mywebpage.netscape.com/AssertnFailure/tute1.jpg
i chose to use this clean shot of jiraiya for this tutorial
i also went ahead and cropped the image using the crop tool (its that square shaped tool thing with the slash through it)


2) crop the pic (note that if the pic you are cropping is the background layer, then you need to duplicate it first and crop the duplicated layer instead)

there's different ways of doing it, but if you want to get in the habit of doing it the PROFESSIONAL way, then i suggest using the path tool. (its the pen shaped tool near the text one) before you start, make sure in the options window (the horizontal one at the top) has the second option, which is the pen shape in front of a box, enabled. Now you just click to place points and a path is created to connect them. If you click and drag, you can create "bezier" curves, which is definitely a beautiful thing. Once the path is made and connected back to the start, then in bottom of the paths window click the 3rd button (it looks like a dotted circle line) and it will turn the path into a selection, then you can hit ctrl+shift+i to inverse selection and del to delete it.

http://mywebpage.netscape.com/AssertnFailure/tute2.jpg
i was quick with the cropping for the tutorial, but if you want you can zoom in alot and use the spacebar to help drag the image around while you are drawing the path.


3) add the pic to the background image (or vice versa)

you can just drag the layer from the layer window to another pdf if they are seperate, but make sure to keep the cropped image on its own layer

http://mywebpage.netscape.com/AssertnFailure/tute3.jpg
i was lazy so i just took the original screencap and blurred it alot as my bg. This adds a really nice depth effect.


4) duplicate and blur the cropped image

layer > duplicate layer will do the job for ya
then make sure the higher of the 2 duplicated layers is selected, and apply a generous guassian blur filter (filter > blur > guassian blur)

http://mywebpage.netscape.com/AssertnFailure/tute4.jpg
for my example i used a blur radius of 3.2 pixels, but it all depends on the size of the image, and how much of an effect you want to the original pic.


5) finally, specify blending mode

http://mywebpage.netscape.com/AssertnFailure/tute5.jpg
the blue arrow points to where you can change the blending mode of a layer. Just select the layer you blurred in step 4 and set the mode to something different. try each mode to see what they do. Personally, i think for this effect darken and overlay provide the best results.

http://mywebpage.netscape.com/AssertnFailure/tute6.jpg
i used overlay, and this is the final result. While darken is great for emphasizing the black outlines and creating more of a cel shaded look, i prefered the more vivid color results of overlay for this image.


thats all there is to it. I tried to elaborate enough for ps noobs to follow along, but let me know if anything is confusing. good luck!

[Darkflare]

soft light is similar to overlay but not as bright.

[hopeknight]

You're explaination was quite clear AssertnFailure, anyone who knows at least some basic photoshop methods shouldn't have any problems. I had never learned how to make paths and such personally. It will come in handy later.

[Zabuza No Jutsu]

Hey there,

I jus wanna give a MASSIVE thank you to Dragunzer0...i'm talking gamabunta sized thank you!
P.S i think your lightning edge sig looks AMAZING, and ur haku sig was wicked too. Nice job! You got msn?

[DraGunZer0]

nope I use Aim (DraGunZer0 on aim and finally the admins wipe my sig wen i figured out how to get my avatar back up -.- ......)

[NM]

Well, since this is a tutorial, I have a question. I have the background for photoshop (I wana try and make my own sig) but the problem is this pic. I want to take Naruto, Sakura, and Sasuke and put them in my pic but the thing is the Japanese text on them. How do I edit that without ruining the characters?

http://img76.photobucket.com/albums/v232/NarutoMaster/Naruto_and_gang.jpg

[DraGunZer0]

well normally i would use the eye dropper tool to get a color near the text and then use the paintbrush took to cover over it, but since naruto screen shots have slightly diff shades in each pixel it would make the pic look really weird so i suggest maybe copying a chunk somewhere close by the text and then pasting it over the text, that might not turn out well too... i'll mess around and see what i come up with

::Edit:: I tried, can't do it. too much text to get rid of to make the pic look natural. I can get rid of it but left over where the text would be is a single shade of one color which really craps the pic. Honestly, I saw your post requesting a sig and I was about to attempt to do it but after seeing that first pic (the one you posted) I gave up immediately. Too advanced to work with my knowledge =/ But I do have a suggestion, if you can find pics of them in a similar pose you can probably copy and paste the parts which are covered over by the text. but then again the coloring might be off =/

[Darkflare]

i would say it doesnt help the text has the black outer glow to it. that makes it much harder i would say to get it to look right

[NM]

Originally posted by: DraGunZer0
well normally i would use the eye dropper tool to get a color near the text and then use the paintbrush took to cover over it, but since naruto screen shots have slightly diff shades in each pixel it would make the pic look really weird so i suggest maybe copying a chunk somewhere close by the text and then pasting it over the text, that might not turn out well too... i'll mess around and see what i come up with

::Edit:: I tried, can't do it. too much text to get rid of to make the pic look natural. I can get rid of it but left over where the text would be is a single shade of one color which really craps the pic. Honestly, I saw your post requesting a sig and I was about to attempt to do it but after seeing that first pic (the one you posted) I gave up immediately. Too advanced to work with my knowledge =/ But I do have a suggestion, if you can find pics of them in a similar pose you can probably copy and paste the parts which are covered over by the text. but then again the coloring might be off =/

Thanks for trying anyway Dragun. My other pics are easy to do because they are from Haruka Kanata and the characters (like Rock Lee's team) dont have any of that Japanese text on them. I've tried looking for pictures of the pic I posted up but I couldn't find anything. Do you know where I can find it possibly?

[Darkflare]

heres what i did http://jeffp.no-ip.org/sigs/nar1.bmp

[DraGunZer0]

Hmm... not bad.. although there are minor spots that we can't help thats pretty decent.. good job getting rid of the text (evil texts haunts my imagery)

[NM]

Hey, thats pretty cool.

[Fox Fire]

I been looking for stuff like this, Thanks!

[Assertn]

Originally posted by: DraGunZer0
well normally i would use the eye dropper tool to get a color near the text and then use the paintbrush took to cover over it, but since naruto screen shots have slightly diff shades in each pixel it would make the pic look really weird so i suggest maybe copying a chunk somewhere close by the text and then pasting it over the text, that might not turn out well too... i'll mess around and see what i come up with

::Edit:: I tried, can't do it. too much text to get rid of to make the pic look natural. I can get rid of it but left over where the text would be is a single shade of one color which really craps the pic. Honestly, I saw your post requesting a sig and I was about to attempt to do it but after seeing that first pic (the one you posted) I gave up immediately. Too advanced to work with my knowledge =/ But I do have a suggestion, if you can find pics of them in a similar pose you can probably copy and paste the parts which are covered over by the text. but then again the coloring might be off =/

eww...rarely would something behind text or a detail that you want removed is a solid color....thats what the healing brush is for! back in the older versions of photoshop, the clone stamp tool was the only option, and in some cases its still perfect for what it does. The clone stamp is a kind of brush that duplicates another part of the same image as it paints, and you can specify where to take the texture from. Keep in mind though, that as you move the stamp, its duplicating source target moves as well, so if you dont keep changing the source after every few strokes, then you're just gonna end up with an exact copy of the side you set for the source. It sounds kinda confusing, but its the sort of thing you just have to experiment with for yourself. Now the healing brush, on the other hand, not only duplicates the texture like the stamp tool, but it matches the hues, saturation, and brightness with the surface you are painting on, to make it a much smoother blend. let me show you an example......

http://mywebpage.netscape.com/AssertnFailure/soccer3a.jpg
here i took some random picture off the internet and will remove the soccer ball from the pic. The clone stamp tool is perfectly fine for this, since its just grass and a soccor ball. Grass is noisy enough to be able to clone stamp without anybody noticing repeats in the pattern, as long as you at least try to mix it up a little. however i also added a black gradient on the left side, thus making the clone stamp tool practically useless. (i would need to pretty much set the source for the tool to be on the same horizontal level, as you can see that the grass details appear smaller the higher up in the image you go. And since the right side of the image is much lighter than the left side, then it would be hard to find a pattern that matches.

so.......thats where the healing brush comes into play
http://mywebpage.netscape.com/AssertnFailure/soccer3.jpg
it took me literally less than 5 seconds to erase the soccer ball. With the healing brush, i just copy the grass texture as if both sides of the image were the same brightness, and it automatically darkens the texture to match the rest of the scene!

wasnt that easy?

edit: oh i forgot to mention, as useful as this is, it isnt a miracle worker. If the details behind what you want to remove are unique to just that area, then you wont have a reference to designate as the source texture. With the pic of naruto, sasuke, and sakura...the text simply covers up too much to be removed easily.

[Darkflare]

yea, this thing took like an hour and a half because of all the little things that had to be tweaked. there was alot of healing brush and blur tool involved. the text had that black outer glow, making it so i had to recolor parts of it and reblend some shadows and stuff. i should do a little work on naruto's pockets once i finish doing some yard work. it seems i erased part of the shadows and stuff and forgot to redo it.
i changed it a little. http://jeffp.no-ip.org/sigs/nar1.bmp i think i am done with this for now. hope it helps

[DraGunZer0]

Yet I learn new things everything.. ::writes down HeaLing BruSH::

[AlbinoFury]

also a good way to get caps without credits and stuff is to take a frame series in virtual dub, often in openings and endings their are scenes that would be impossible to capture with like a screenshot taker like bs player, but with virtual dub you can progress it frame by frame until you have exactly what you need. And on stuff that always has credits on it if the credits change but the pic stays the same you can take caps of all the credits over layed and then each will fill in different blanks and from there you can fill in the blanks much more aestetically.

Also wanted to say good tutorial but you shouldnt rely on outside cg images for you sigs, make your own visual effects, look up tutorials, play with filters, itll lead to an overall higher skill with PS.

[Darkflare]

which reminds me, ive been wanting to learn how to do those abstract cg designs so if anyone has a tutorial link or whatever please post it, i cant seem to find any of the stuff i want on the internet.

[Assertn]

try 3dbuzz.com
im taking some free online courses in 3d studio there, although its too late to sign up for it, but you can still at least obtain lots of tutorials for 3d stuff

[DraGunZer0]

Originally posted by: AlbinoFury
also a good way to get caps without credits and stuff is to take a frame series in virtual dub, often in openings and endings their are scenes that would be impossible to capture with like a screenshot taker like bs player, but with virtual dub you can progress it frame by frame until you have exactly what you need. And on stuff that always has credits on it if the credits change but the pic stays the same you can take caps of all the credits over layed and then each will fill in different blanks and from there you can fill in the blanks much more aestetically.

Also wanted to say good tutorial but you shouldnt rely on outside cg images for you sigs, make your own visual effects, look up tutorials, play with filters, itll lead to an overall higher skill with PS.

Thats why i stated
"- You really need to experiment on your own and play around with the tools. So far I have shown you how to basically compile pics together. But advanced choppers and create their own effects and do crazy things all with photoshop. Also for 3d designs just use 3d studio max... photoshop is mainly for 2d although experts can create 3d designs on it. (Or you can just follow some online tutorials ^_^)"

As you see, I still am a beginner at PS....

[Koyuki]

Yeah I know. I've done PS for 3-4 weeks now. Still lack some skills but overall I'm kina a good.
I'm pretty good with bg. Now I just need some cool fonts. Where can I get that?



Darkflare: pretty good job on the pic

vvv Thanks

[AlbinoFury]

Originally posted by: Uzumaki Naruto # 1
Yeah I know. I've done PS for 3-4 weeks now. Still lack some skills but overall I'm kina a good.
I'm pretty good with bg. Now I just need some cool fonts. Where can I get that?



Darkflare: pretty good job on the pic

do a search function of this forum of the word font or something awhile back someone posted a bigass file with fonts in it, its a good start. I have a couple hundred on mine its just something u gotta search out and find over time.

[Knives122]

one question, how do I do I get the picture on the background?

Ive tried it and it doesnt work

[DraGunZer0]

Errr..... paste? did you copy the picture? if you did then you should be able to paste it...

[Zabuza No Jutsu]

Hey Dragunzero,

I used your guide , as well as a couple of tutorials online, and (the DAY after i acquired photoshop), managed to come up with the sig i've got @ the moment...not bad a for a complete beginner huh?

[DraGunZer0]

Better than me i guess, first day i got photoshop i was lost with the layers so i went back to paint ^_^... until I got used to the terms and tools

Also: your sig dimensions is too big, use 400x80

[Nara Shikamaru VI]

anyone using PS CS?? i am usin it and the part where Assertn Failure mention about

'there's different ways of doing it, but if you want to get in the habit of doing it the PROFESSIONAL way, then i suggest using the path tool. (its the pen shaped tool near the text one) before you start, make sure in the options window (the horizontal one at the top) has the second option, which is the pen shape in front of a box, enabled. Now you just click to place points and a path is created to connect them. If you click and drag, you can create "bezier" curves, which is definitely a beautiful thing. Once the path is made and connected back to the start, then in bottom of the paths window click the 3rd button (it looks like a dotted circle line) and it will turn the path into a selection, then you can hit ctrl+shift+i to inverse selection and del to delete it.'

i am lost there. can anoyone translate into CS term?? pls bare with me i am complete PS noob

[DraGunZer0]

.........wtf............. just tried it and i find that "professional way" too much of a hassle. Instead of doing all that:

- use Magnetic lasso tool
- go around the character or thing u wanna cut out (just like above in creating points)
- end it at the start point
- If you accidentally missed something go back and hold shift and cut that thing u missed to add it in (say a point in their hair, hold shift and cut that to put it back in with your selection.)
- if you want to take out something (lets say some background from the space inbetween their arms or something) go back hold alt and cut that out
- copy whatever you selected and paste it on your project. OR do what he did and right click, select inverse then press delete to get rid of the background.

I dont use that "professional" way because its hard to get in the tiny corners without zooming in, and after each click it adds another point in your history (which is either a good or bad thing to go back and undo a mistake in selecting, but that can be done with mag. lasso by taking out or adding in with alt or shift)
Also magnetic lasso only takes up one point in your histories and the bezier curves might help but you probably wont need it with enough experiece chopping round parts.

::Edit:: To assertnfailure, i tried that healing brush thingy thing and it does patch things up well. and i think im getting the hand of it so thanx for telling us bout that.

[Forgotten]

Wow , this trick pwns

[Assertn]

DraGunZer0, you can zoom in on your picture and still use the path tool.....in fact if you want to get the nicest results then you should do that anyway. At the studio i was at, they would have the image zoomed in and taking up the entire screen on one of the monitors (their second monitor would hold all the little window things) and then use the path tool and whatnot...

All you gotta do, is zoom in on the image, without worrying about if its all on the screen or not, then as you lay the path down and need more room, hold the space bar and your cursor will temporarily change to a hand that lets you drag the zoomed portion around. Then you can release the space bar and continue dropping the path.

When you get the feel of it, you can lay down bezier curves just by guessing and usually manage a full path with only a few sparse adjustments to make later. Even if you decide you need more or less points, you can change the pen tool to the "add anchor point tool" or "remove anchor point tool"
And to adjust individual anchor points, change the black arrow tool above it to the white arrow tool.
also, its best to make these adjustments after completing the path

glad to be of any help i/expressions/face-icon-small-smile.gif

[DraGunZer0]

Hmm..perhaps i'll experiment with that again later

[Nara Shikamaru VI]

thanks a million guys. i manage to make myself a decent sig. cheers for the lesson on how to make screenshot pic brighter AssertnFailure.

[Mut]

uhhh... someone asked for fonts. all you have to do is search FREE FONTS in google. you'll get like 10000000000000 sites.

[Everon]

Okay time to have fun with Shadows, and Bevel. These are some easy little tricks to make a siggy more dramatic and dynamic. Follow the steps from previous sig making tutorials, and place everything in they're final positions.
http://home.comcast.net/~anthony_ip/photos/100Gir.jpg
Yuck. Lets make this better! By going to layers and double clicking, you're brought to a page that has a bunch of neat stuff. Beveling, Inner glow, drop shadows, color overlays, etc. For now I'm just messing with the color overlay, bevel, and drop shadows. Adding beveling can makes text appear to be more 3D, while drop shadows add depth to your sig.
http://home.comcast.net/~anthony_ip/photos/101Gir.jpg
However, not all shadows can be created by using drop, so to create a shadow on Gir, for example, we duplicate the layer.
http://home.comcast.net/~anthony_ip/photos/102Gir.jpg
After which, go to edit->transform from here use rotate, skew, and distort on the image till you get something that your satisfied with.
http://home.comcast.net/~anthony_ip/photos/103Gir.jpg
Double click the layer again to use "color overlay" the image with black, and adjust the opacity to soften the shadow. (Try a little blurring and see if it helps)
http://home.comcast.net/~anthony_ip/photos/104Gir.jpg

[Darkflare]

nifty shadow trick, i never thought about that. gonna have to remember that one for later use

[Assertn]

yep, ive used that shadow trick a few times myself

the downside to it, however, is that depending on how you have it angled, it may or may not look realistic with respect to the side of the figure that it is being cast from.
For example, if you have a person facing the camera, yet the shadow is dropping to the side of him, then the shadow SHOULD look like a side profile of the person, rather than a distorted front profile. With Everon's example, would you see the tongue hanging in the shadow the way it is now? If the angle is far enough, then the tongue might actually appear on the right side of the shadow, rather than the left side. Of course most people wouldnt even pay attention to such minor inconsistencies i/expressions/face-icon-small-smile.gif

[r3n]

oo nice trick, never really thought of using shadows. i should probably paste some nifty things ive picked up along the way here sometime, but i cant be arsed. ohwell

[lasaire]

One of the best ways to jazz up sigs that I love to use is custom photoshop brushes. You can download them from any number of free brush sites and use them to add texture and dimension to backgrounds, as well as giving a different feel to blending options such as the smudge and clone brushes.

[r3n]

yeah i jst started messing about with grunge brushes as u can see from something i posted a while back in the sig thread, theyre easy to use and look great. i got mine from bluesphere or somewhere.