Jump to content

TopHATslash

Members
 View Profile  See their activity

  • Posts

    3,300

  • Joined

  • Last visited

 Content Type 

Posts posted by TopHATslash

    The Ultimate Guide to Tags *Text Design by Yipp 8/24*

    in Tutorial Graveyard

    Posted

    The Ultimate Guide to Tags

    This is a guide that will be improved every day. So check back frequently for updates, and new techniques.

    I've seen many people on the paint.net forum start to make photoshop style sigs. Well in this guide I will explain techniques, terms, and resource sites. Hopefully, many people will like this tutorial and will use it to improve as they make more and more tags.

    So let's start with terms:


    • Sig: A image usually to follow every post on a message board; forum.
      Tag: Another word for sig. But a tag consists of flow, depth and lighting.
      Flow: This is how your eyes want to look at the focal. It also means the direction of the effects.
      Depth: This is how you make your tag not look flat. This means blurring or sharpening.. which we will discuss later in the guide.
      Render: A cut out character, vehicle, scenery, etc. It has a transparent background.
      Stock: A regular picture. No cut outs.
      C4D: A 3D render made in Cinema 4D. These are for flow and effect. Usually set them to screen.

    Okay so now that you know what I'm talking about, let's get started.

    Techniques to Improve your Tag

    Flow:

    You now know what flow is. So let me demonstrate. Here is a render:

    flow2zw8.png

    This render, when turned into a tag, will have a flow like this:

    flow1ur0.png

    When choosing you flow, be sure to decide on a good point of view. If the focal is looking to the top right, then you should choose the effects to mainly flow top right. Usually, bad flow and be fixed by rotating.

    Depth:

    Here's a simple stock placed into size. [so what? I used a vader stock, you got a problem with that?!]

    depth1ne5.png

    Now to get the focal, vader, to stand out I ran sharpen. [Photo>Sharpen]. You have to be the judge of the settings. Don't go over 20 though.

    Then I used my eraser tool to erase everything on the sharp layer other than vader.

    depth2du5.png

    Then what you should do is blur the background. Since as of me posting this, there is no blur tool.. we will have to improvise. Duplicate the original stock layer, then gaussian blur it. Then use clone stamp on a new lyer to just get the background, or use your eraser to erase the blurred focal.

    depth3hl0.png

    That is a good way to depth'n up your sig.

    C4D Usage:

    Alright, this is our first update. I was brain storming on a C4D section. So here, I have two of the same render, but different background colors. One tan, and one black.

    my.php?image=tanbgyx4.png

    blackbgfl3.png

    So I placed a normal 'ol C4D and then set it to screen.

    10694_eb004b5aa65b4a7b027eeeafc0ff566c

    c4dblklj7.png

    c4dtansv1.png

    Well.. it turned alright for the black one, but not the tan. Do ya agree? =P

    To fix this, I will be introducing a new type of C4D that not many people in the PdN Community know about. They are transparent background C4Ds. Amazing looking. They are so much better than ones with a black background. I used these types in this tag:

    http://im-vital.deviantart.com/art/Expr ... g-92696622

    So here is a great pack that I could find for this tutorial:

    Celtic__s_C4D_Pack_by_Celticboy.png

    And now with one of these C4Ds, this is what the tag looks like:

    c4dtransxx3.png

    Lighting:

    Okay, so here I will demonstrate some lighting. Let's start off with your tag. This is mine [yes I know it is absolutely terrible but it also is only like 3 layers haha, nothing complex]:

    lighting1xy7.png

    Alright, as you can see, this sig is very bland. It seems like I just put a render on a background. Which is never what the maker wants. So now I brushed a little white with a 60px brush [the brush tool, not the plugin] on where we can tell by the render where the lighting should be.

    lighting2np4.png

    Now we need to blur this. I blurred at 81px using gaussian blur but it all depends on the sig. Play around with the blurring and the opacity.

    lighting3zq3.png

    As you can tell now it is more blended and has a light source. But now we need to add a darkening to it. So let's repeat the previous steps except with black and toward where the light source would not be shining on the render.

    lighting4qk0.png

    And now blur it like above following the steps in the lighting, and voila!

    lighting5yh3.png

    *Make sure you play around with settings.

    Blending:

    Here will be a couple [more to come] ways of doing things for tags.

    Here is a quick blending technique:

    Take your brush tool and brush around with a flow with 30px brush.

    tech1oy9.png

    Then do a good frosted glass to spread it out nice like this:

    tech2lk9.png

    Now run dents to blur/distort it nicely:

    tech3sr3.png

    Another one:

    Here is a way for you to colorize your tag without using any color plugins. This is all about your opinion.

    So, I made a quick tag for this tutorial, nothing complicated:

    c4dflowro5.png

    Well, I really don't like the colors. So, let us change this! :) Make a new layer. Then choose 2 colors.. this is very hard to make right, but.. with practice, it will be easy to get a good eye for it. For this tutorial I made three gradients.

    gradszh1.png

    Here are their blending options:


    • 1 - Overlay; 32 Opacity
      2 - Reflect; 11 Opacity
      3 - Darken; 36 Opacity

    c4dflow2or7.png

    There ya have it. Now the tag is blended and well tinted.

    Text:

    Text is a very unique thing. Many people master it yet others don't. Here are some tips on text.


    • Never use black on black. Applys for all colors.
      Drop shadows are nice, but black or white only.. other colors are distracting imo.
      Blending is great. But don't overdue it.

    Here's a little text demonstration:

    I am taking the tag that I used earlier in the Color Blending section of this guide.

    c4dflowro5.png

    One thing to do is always look at the flow of your tag before placing your text. Here are our flows:

    textdq0.png

    text2mo2.png

    Stay away from corners. All this will do is distract the viewers eyes!

    text3dg3.png

    So let's choose our flow. For this tag, I'm going to choose the flow going up his arm, the first one. So I'm going to use a good font to suit the tag. (Just because this is a knight, doesn't mean the text has to be knight-ish!!) I chose Continuum Bold at 12px.

    I placed my text on his arm and ran two black Outline Objects at 2px and 255 softness.

    text4la1.png

    But this is rather.. un-blended [:P] so let us blend it! Basically, what I did is moved the layer down below the Gradients from the Color Blending section of the tutorial.

    And voila!

    text5ym2.png

    Text Designing

    Text may seem an easy thing to do, but it isn't. If not done correctly, the tag/signature could be ruined entirely. That is how important it is. I see many people who put it on just for the sake of it but now this part of the guide will prevent it from further happening! :D

    First of all, I'll be demonstrating a simple but effective text design. I'll be using this signature I've made recently:

    example1jh3.png

    As you can see, the text is simple. It has 2 different colours used and and an effective font, Arial, that overlaps eachother.

    Here's how to do it in 2 easy-long explained steps:

    1. Choosing the colours

    To choose the correct colours, you must use the colours that are used for the signature so that it can blend and match. In this case, the signature's colours are mainly purple and white. Choosing the colours from the "Color ToolBar" may not entirely match the signature; so this is where the "Color Picker" Tool comes in handy.

    Choose the tool in the "Tool Bar" that looks like the image below.

    example2jj5.png

    Then, simply click on a part of the signature where it has the colour which you want to use.

    example4kb6.png

    2. Adding the Text:

    Pretty much you know how to do this though I'll still have to explain since this IS a guide. *sigh* :lol:

    Select the tool where it shows an "A" from the tool bar.

    example3lp9.png

    And now the way to making the style.

    I added a new layer of course and selected the colour white. I used the font Arial; setting it on bold with a size of 15. Using Top Hat Slash's part of the guide, "Text", find an area where you want to place the text.

    I then again added a new layer and set the size and font to the same settings as before. Using my colour I chose from the "Color Picker", I typed in my text and dragged it slightly on top of my other white text.

    example5qq4.png

    That's all there is to it. Try experimenting text styles and test other designs too; using some of the essential tips from this part of the guide. (I will add more styles to this part of the guide once in a while)

    External Sites

    Here are some good sites for resources on tags.

    PlanetRenders.net

    GameRenders.com

    deviantART.com

    I hope you like this guide. Everyday it will be built upon so keep checking back for new techniques to make your tags, even better.

    Log

    • Tutorial Written - July 31st, 2008
      C4D Usage Added - August 1st, 2008
      Color Blending - August 2nd, 2008
      Text Demonstration
      Lighting - August 18th, 2008
      Text Design (By Yipppiyo) - August 24th, 2008

    -TopHATslash

    -Yipppiyo

    Image Umbrella: Signatures, Avatars, Logos & Text

    in The Pictorium

    Posted

    Well, I have been working on some new Tag Flow logo ideas, and this one is just a bit ready. There are some places that need cleaning up and reenforcing, such as the left hand side of the 'T', but what do you all think?

    Edit: By the way, there is a white outline around it because it was meant to be viewed on dark backgrounds. I recommend taking a look at it that way ;)

    IMG1-1217344881.png

    I wonder what site that's for..

    Hmm..

    Great hosting site too. :P

    Image Umbrella: Signatures, Avatars, Logos & Text

    in The Pictorium

    Posted

    That's just how he makes art. Isn't art a way to express yourself, and not prove how good you are?

    Hmmm.....I seem to remember you also made comments like Blooper did here.

    Remember what you've said here, or I will remind you. :wink:

    One should also remember: Everybody have their own style, No one style is better than the other.

    I really don't remember. Unless it's the Champjev incident. You don't have to remind me Ash, it's okay. :)

    Image Umbrella: Signatures, Avatars, Logos & Text

    in The Pictorium

    Posted

    Uhm... Well I don't want to be mean... First of all, here you have a sleek, beautiful car, that I'm not sure you would want to mix with grunge. Second, no offense, but you grabbed a stock, maybe edited it a little, and brushed over, then blurred...

    Everybody has their ups and downs.

    But if you would see the original stock you would say, Thank god, he used the Soften Portrait effect. The original looked so lame. You would've not believed it.

    Plus, there was absolutely no blur effect involved in the making of this sig.

    Just so you know, I like to work with stocks, much more than with renders.

    Amen. I love stocks too. ;)

×
×
  • Create New...