Nov 22, 2009
Pages: 1, 2, 3, 4

Johnny's Sig Tutorials Pt. 2 -- Coloring - Finally! Multicolor your sigs!

free web hosting

Read Latest Entries..: (Post #31) by snlildude87 on Aug 3 2005, 04:36 PM.
QUOTE(Johnny @ Aug 2 2005, 07:32 PM)Mike, what in my name are you talking about?I think he was saying how we should test our coloring in gift sigs for becca...because everyone is giving her one.
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion > Xisto Network Sites > The GFXTrap Forum - Trap17 Graphics Site > Tutorials

Johnny's Sig Tutorials Pt. 2 -- Coloring - Finally! Multicolor your sigs!

Johnny
Okay guys, after forever and a day of putting these tutorials off, I finally got around to making part one of my tutorial series, to show you how to effectively color your sigs, and multicolor as well.

One result will look like the very last image in the tutorial.

So, without further ado, let's get down to business.


STEP 1:
Open a new sig (I used 400x150 pixels) and fill the background with black. Then brush up your sig (this will be in a future tutorial) with white and add a brightness/contrast layer (from the layer-->new adjustment layer menu, or the black/white circle icon in the layers box.) and bring the contrast up to about 30. It's always wise to add a brightness/contrast layer to give a background more depth, and a cleaner look.

user posted image


STEP 2:
Now add whatever render you may want to use (also in a future tutorial.) In this case, I used a nice Half-Life 2 one. Add a bit more brushing to blend him in (ALSO in a future tutorial) and you're looking good so far.

user posted image


STEP 3:
Then, add whatever effects you may like, and some text.

user posted image


STEP 4:
Now comes the fun part. Make a new color balance layer (found right by where you found the brightnesscontrast) and check out the new box. There's some sliders, and radial buttons for the different tones of light. Make sure the preserve luminosity box is checked, otherwise the "clean-cut" feel you made earlier with the brightness/contrast layer will dissipate. Now, play with the sliders a bit to create a base color. You'll want something not too vivid, and a similar color to your render's main color.

user posted image


STEP 5:
Now, for the multicoloring part. There's quite a few ways to multicolor. I'll show you a few different ones, as each one is useful in different situations. First is the cloud coloring technique. This is a really quick and easy way to multicolor, but also has less control over colors than other methods. Create a new color balance layer, and play with the sliders until you get a more vivid color, which is similar to your render's secondary color, if any. It should be along the same lines as your first one, but a lot more vibrant. Once you have that, you can go to Filter-->Render-->Clouds, and this will add a cloudy look to your color balance's mask, and you'll see that you now have a multicolored sig.

user posted image


STEP 6:
You can also take it a step further by right clicking the color balance's layer mask in the layers box, and clicking "Add Layer Mask to selection", then clicking the first color balance layer, and pressing delete (make sure your background color is still black.) This will make it so instead of the primary color on all of the sig, and the secondary on certain parts on top of it, the primary color will be in some parts, and the secondary will be inverted, and everywhere else.

user posted image


STEP 7:
Next up is the lasso coloring technique. This gives you a bit more control on what parts you would like to multicolor, which is useful in situations like explosions, where you'd want to have a centralized section of color, or for example, you'd like to color a render's pieces differently or something. Anyway, create your primary color just like before, and then take out your lasso tool. At the top there will be a box called feather, change the 0px to about 15px. This will give the color soft edges, instead of abruptly changing from one color to the next, although that may be wanted in some situations. Now, hold shift (to make more than one selection at a time), and make some selections wherever you want the secondary color to be. Then, let go of shift, but with the areas still selected, create a new color balance layer, and play with the settings again to get your secondary color. You'll notice that the areas you had selected, are being filled with the new color. There's your lasso coloring.

user posted image


STEP 8:
A slightly less used method of coloring, but sometimes useful (mainly in tech style sigs) is the rectangle coloring technique. Starting with your base color as before, grab your rectangular selection tool, and make some selections (while holding shift) wherever you like. Then create a new color balance layer and create your secondary color again. This won't look nearly as good on this one, because this isn't a tech sig, but you get the general idea. I've also found that this works well with different layer effects and patterns.

user posted image


STEP 9:
Another way to color is done by brushing over the layer masks of your color balance layers. To do this, just create your primary and secondary color balance layers, and grab whatever brush (soft grunge or sparkle works best) you like, and brush over your color balance's layer mask. This produces similar results to the lasso coloring technique, but gives you a bit more control in the way the color is shaped. This is probably the most useful coloring method, as it gives you the most control, and it's slightly easier to do than some other ones.

user posted image


So, here's my final result for that sig, with a few additions.

user posted image


And SURPRISE! Yes, that's right, for the first time ever, I'm giving you guys the PSD for this sig so you can check it out, and maybe learn a few more things from the different layers in there. The link will be at the bottom of the post. Try hiding/unhiding (click the eye icon) the different layers, to see what effect they have on the sig. Now, remember, this is not for you to use as your sig. You may not use this or any part of it as your own. If any layer or part of it is found in a sig of yours, that is called a rip, which is basically image plagiarism, and I will not only make you remove it, but I'll also publicly declare you as an art theft, and the download will be taken away from everyone, to prevent further problems. Remember, this is just for you to LOOK and LEARN, I'm not giving it to you to use as your own. I've never had any of my art ripped, and I'd appreciate it if I could continue with that. If you REALLY want one of my sigs, send me a request through PM or instant message, and I'll most likely make you one anyway.

Okay guys, have fun, and look forward to future tutorials by me. If you have any questions or concerns, feel free to ask, and I'll do my best to help you out. And remember, this is just a general guideline. You don't have to follow it directly, and you can add/remove/replace steps as you wish. Experimenting is the key to becoming a good designer.

Also, this was done in Photoshop CS, so things may vary in different versions, but you shouldn't have any problems.

Link to PSD:
http://www.pic-host.com/files/7m258o1nnx.psd

 

 

 


Comment/Reply (w/o sign-up)

biscuitrat
Half-life 2 sig <3

Very pretty biggrin.gif 9/10

Notice from Johnny:
Took out the quotes to reduce scrolling.

Comment/Reply (w/o sign-up)

snlildude87
Woohoo! I can't believe all the pestering I gave you in the Photoshop forum worked after all!

I'll try this tutorial later and tell you how it goes. Thanks man.

Comment/Reply (w/o sign-up)

Saint_Michael
you seem to have missed something out of the muticoloring, some people use like 4-5 differnt colors in thier sigs, mind you they might use the same process, multicolor is more then one color in dictionary terms. hmm pt 3 should be that, the use of different colors properly.

Comment/Reply (w/o sign-up)

Johnny
QUOTE(biscuitrat @ Jul 23 2005, 08:59 AM)
Half-life 2 sig <3

Very pretty biggrin.gif 9/10

Notice from Johnny:
Took out the quotes to reduce scrolling.

*



X.x it's more about the tutorial than the sig, but thanks.

QUOTE(snlildude87 @ Jul 23 2005, 09:02 AM)
Woohoo! I can't believe all the pestering I gave you in the Photoshop forum worked after all!

I'll try this tutorial later and tell you how it goes. Thanks man.
*



Nah, I pretty much ignored you. Just felt like doing them. tongue.gif

But np. Show me some results sometime.

QUOTE(Saint_Michael @ Jul 23 2005, 02:01 PM)
you seem to have missed something out of the muticoloring, some people use like 4-5 differnt colors in thier sigs, mind you they might use the same process, multicolor is more then one color in dictionary terms. hmm pt 3 should be that, the use of different colors properly.
*



Well this is just a general outline of the techniques. If people want to add more, they can use the same methods. O.o

 

 

 


Comment/Reply (w/o sign-up)

snlildude87
QUOTE(Johnny @ Jul 23 2005, 06:28 PM)
X.x it's more about the tutorial than the sig, but thanks.
*

I have no idea why people are rating tutorials now either. :-/

You should post them in the normal tutorials forum, and then move it here leaving the link.

Hmm, after doing this tutorial, I've learned a few things, but I've been using color balance in my sigs anyway. I think you should do effects and stuff....I don't know. Anyway, here're what I got:

user posted image

user posted image

How did you get your scanlines like that? I tried making them just 2 pixels far each, and it turned out really crappy.

Edit: Inserted img tags.

Comment/Reply (w/o sign-up)

Johnny
QUOTE(snlildude87 @ Jul 23 2005, 05:15 PM)
I have no idea why people are rating tutorials now either. :-/

You should post them in the normal tutorials forum, and then move it here leaving the link.

Hmm, after doing this tutorial, I've learned a few things, but I've been using color balance in my sigs anyway. I think you should do effects and stuff....I don't know. Anyway, here're what I got:

user posted image

user posted image

How did you get your scanlines like that? I tried making them just 2 pixels far each, and it turned out really crappy.

Edit: Inserted img tags.
*



Hm...good point. I'll move them and whatnot in the future.

Not a bad sig, and the scanlines, I believe, were set on soft light for mine, and set in a 3x3 pattern.

Comment/Reply (w/o sign-up)

strawberrie
Thanks for this tutorial!! I'll definitely test it out later in Photoshop... *can't wait* ^___^

I like how you introduced different multicoloring techniques. I used to only apply the cloud rendering effect before, but now I've got more to experiment with! XD

Comment/Reply (w/o sign-up)

snlildude87
QUOTE(strawberrie @ Jul 23 2005, 11:16 PM)
Thanks for this tutorial!! I'll definitely test it out later in Photoshop... *can't wait* ^___^

I like how you introduced different multicoloring techniques. I used to only apply the cloud rendering effect before, but now I've got more to experiment with! XD
*

Sweet. Remember to post it so that we can make fun look at it. tongue.gif

I used the cloud effects on my tekken sig, by the way. If you care. laugh.gif

Comment/Reply (w/o sign-up)

Johnny
QUOTE(strawberrie @ Jul 23 2005, 07:16 PM)
Thanks for this tutorial!! I'll definitely test it out later in Photoshop... *can't wait* ^___^

I like how you introduced different multicoloring techniques. I used to only apply the cloud rendering effect before, but now I've got more to experiment with! XD
*



WHEE! Sounds good. Be sure to lemme know (even though I stalk the photoshop forums like 24/7)

QUOTE(snlildude87 @ Jul 23 2005, 08:06 PM)
Sweet. Remember to post it so that we can make fun look at it. tongue.gif

I used the cloud effects on my tekken sig, by the way. If you care. laugh.gif
*


Make fun? Want me to make fun of your sigs Nguyen? I can give you some cruel truth if you want me to. smile.gif

Comment/Reply (w/o sign-up)

Latest Entries

snlildude87
QUOTE(Johnny @ Aug 2 2005, 07:32 PM)
Mike, what in my name are you talking about?
*

I think he was saying how we should test our coloring in gift sigs for becca...because everyone is giving her one.

Comment/Reply (w/o sign-up)

Johnny
QUOTE(Saint_Michael @ Aug 2 2005, 03:06 PM)
anywho, but yeah this color scheme should colors for people starting out or want to try it out "Becca", now only if i can mix the colors up a bit i would be in heaven. with blues, purples, oranges and green oh my!!!
*


Mike, what in my name are you talking about?

Comment/Reply (w/o sign-up)

Saint_Michael
anywho, but yeah this color scheme should colors for people starting out or want to try it out "Becca", now only if i can mix the colors up a bit i would be in heaven. with blues, purples, oranges and green oh my!!!

Comment/Reply (w/o sign-up)

snlildude87
QUOTE(Saint_Michael @ Aug 2 2005, 12:31 AM)
actually i listen to a little rap not much of it but just a little.
*

Well, I was talking about people who listen to a LOT of rap. Like me.

Now back on topic.

Comment/Reply (w/o sign-up)

Saint_Michael
actually i listen to a little rap not much of it but just a little.

Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Pages: 1, 2, 3, 4
Similar Topics

Keywords : johnnys, sig, tutorials, pt, 2, coloring, finally, multicolor, sigs

  1. Wings3d And Blender3d (updated, 16-12-2006)
    tutorials for a sophisticated open source 3D modellers and animator (3)
  2. My Tutorials
    (2)
    these aren't that new and i hope they can help out some noobs /tongue.gif"
    style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> i used to sell them on GR
    but no-one bought them....... do not re-distribute any of these in any way! i worked
    hard for these and should have some more coming.....
  3. My First Sig Tutorial (c4d+coloring) (photoshop)
    your comments please (11)
    First of all open a new document with white background and size 355 / 105 import your render to a
    new layer , name the layer original and hide the layer create a new copy of the original layer
    here's the render i choosed ..... go to Image > Adjustments > Hue saturation choose
    colorize and drag the hue slider to 121 create another copy of the orignal layer go to Filter >
    Blur > Radial blur set amount to 10 , blur method to spin and quality to good now set the blending
    mode of the layer to vivid light go to Image > Adjustments > Hue saturation choose color....
  4. 17 Garbage Tutorials
    All tutorials made by me (6)
    Im not sure how many images i can post, so instead i will just post the direct links to the tutorial
    images. These links are not re-dercting links to any forums or anything of that sort. Some of these
    tutorials where made under my previous gfx name jinx. and some will be under my current gfx name
    garbage. Well i hope you enjoy these tutorials, ands yes i know some of these may be old and you
    probably already new how to do that but keep in mind there are many people out there who still dont
    know how and this is for them. enjoy. and feel free to leavce me any feedback. ....
  5. Smudge/sharpen Tutorials {adobe Ps}
    (4)
    How to Create a Sharpen/Smudge Sig Saint-Michael Style Step 1. Open Adobe PhotoShop(wow your
    good already) Step 2. Open a New Document. (my size 300x120) Step 3. Grab a render that
    has alot of detail design to it in which you want to smudge and sharpen and resize it to fit the
    document the best way you want. (using prince of persia) Step 4. press ctrl+j to make a copy
    of your locked layer and then delete the locked layer. Step 5. Make Several Copies of your
    render and place them all over the background to make sure it is covered and then using a ....
  6. Tutorials ****updates***
    admin, mods. member need to read this (3)
    1: Also since this is a graphics tutorial datebase we require that you provide some sort of images
    used in your tutorial so anyone reading a tutorial on our forums will have a better idea on how its
    done. and keep the questions down to a minimum to like emergancy type questions and comments as
    well. Mods before accepting a gfx tutorial make sure it has some sort of image on it that can
    include thumbnails, links to the image or the actual image its self. 2: In your topic title
    make sure you say what program you are using IE Paint shop pro, adobe photoshop or gimp....
  7. Tutorials Must Be Approved
    Just like in the other tut section (3)
    Forgot to tell you guys...the tutorial section has the tutorials invisible when you first submit
    one...you'll have to wait for a moderator to approve first. Bad or already done tutorials will
    be removed. It's the same as the other tutorials section, basically. So if your tutorial
    doesn't show at first, just wait for a moderator to approve it. Thanks.....
  8. Johnny's Sig Tutorials Pt. 3 -- Choosing Brushes
    Which to use, and what they look like. (17)
    Okay, the first part of sig brushing is figuring out which to use. Let's go over some of the
    types, and I'll show some examples of each. Excuse me if it's not the greatest tutorial in
    the world...I was tired and got bored and rushed it a bit. Abstract -- Abstract is pointed out by
    3d shapes or by triangular-ish shapes. It's kind of hard to explain, but you should be able to
    recognize it if you see it, although some brush designers have different ideas of abstract.
    Basically, abstract brushes are useful in tech sigs. Fractal -- Fractal brushes are....
  9. Johnny's Sig Tutorials Pt. 1 -- Teaser
    (15)
    Okay guys, to hold you over until I EVENTUALLY get off my lazy butt and...well, actually, I'd
    still be on my lazy butt, but whatever. Until I "get off" my lazy butt and do those tutorials I said
    I would, here's like a mini-tutorial as like a teaser or whatever. It's basically just
    general tips and resources... Tips (In no particular order): Don't use colored brushes.
    Don't use Hue/Saturation. Always add a brightness contrast layer and up the contrast. Always use
    color balance layers to color. Rarely leave text a flat color. Usually it's best....
  10. Coloring Eyes In Photoshop Cs
    changing eye color. (1)
    Author:Molotov Level: Easy Copyright: Molotov 2005 Ok, here is another good basic tutorial
    that any site should have. This is an easy to do and fun effect to preform on photos. For your
    convience they are all thumbnails so click them and they will get bigger. So lets start off by
    choosing a good photo I am gonna choose this one: Ok Then you can desaturate the picture like
    mine is above, already done for me of course /cool.gif' border='0' style='vertical-align:middle'
    alt='cool.gif' /> , or you can leave it in color; its your descion. So after we decided....
  11. Tutorials
    good tuts (5)
    I found 2 sites with really good tutorials here they are: www.good-tutorials.com www.zymic.com....
  12. Tons Of Awesome Tutorials!
    photoshop, 3D studiomax, flash, cenima4D (8)
    i get tons of great tutorials from here so i thought id post it and share the awesomeness!!
    http://www.bluesfear.com/ its definetly worth a click /cool.gif' border='0'
    style='vertical-align:middle' alt='cool.gif' /> ....
  13. Photoshop Tutorials
    My bookmark (11)
    Tutorial Sites http://geda-online.com/ http://gliebster.com/tutorials/
    http://links.gfx-forum.de/photoshop.php http://noxcel.com/root/tutorials.htm
    http://psworkshop.net/psworkshop/ http://retouchpro.com/tutorials/index.php
    http://user.fundy.net/morris/redire...photoshop.shtml http://www.3031-designs.com/tutorials.html
    http://www.absolutecross.com/ http://www.actionfx.com/ http://www.adobeevangelists.com/
    http://www.aovs02.dsl.pipex.com/ http://www.art4eye.com http://www.bluesfear.com/
    http://www.b-man.dk http://www.dubtastic.com htt....

    1. Looking for johnnys, sig, tutorials, pt, 2, coloring, finally, multicolor, sigs

Searching Video's for johnnys, sig, tutorials, pt, 2, coloring, finally, multicolor, sigs
See Also,
advertisement


Johnny's Sig Tutorials Pt. 2 -- Coloring - Finally! Multicolor your sigs!

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com