Jump to content
General forum rules
Creative Media Rules

[Tutorial] How to Make a Simple-But-Effective Signature

Deejaye

By Deejaye
in Creative Media

Recommended Posts

Deejaye

Deejaye

Posted
Posted

QRpAxCK.png

 

With the growing amount of signature requests I used to get, I decided to set out to create a [hopefully] simple tutorial that will outline how to create simple but effective signatures. Essentially, this is a guide I've written up that'll describe methods I use in creating most of my signatures. Because I have to constantly purge reply to private messages that are all variations of "can you make me a signature?" or "how do you do ______?" 
 
I'll also try to link to other helpful tutorials that might aid you in some sort of area as well.
 
Alright so I'll start this off by quickly saying that in no way am I a uh, professional...? I have no training or whatever you wanna call it in design or graphics. This is all self-taught and involves me doing what I think looks aesthestically pleasing. So feel free to ask questions, but I might not be able to answer them accurately. tbh I still don't know Photoshop very well, there's lots I haven't explored about it
 
For all of these tutorials, I use Adobe Photoshop CS5. I don't know how compatible some of these techniques or tutorials will be with other versions of Photoshop.
 
To Do List:
  • Finish sig tutorial
  • Fix animation tutorial
  • Add pictures to animation tutorial
  • Comb through bookmarks for helpful links
  • Maybe add video form of tutorial [meh]
  • Make thread prettier
 
Updates:

[9/15] Added DaFonts to helpful links list

[10/25] Added HexNull's sig tutorial to helpful links list

[10/28] Added Color basics & colour lovers to helpful links list

KBMl17q.png
Link to comment
Deejaye

Deejaye

Posted
  • Author
Posted (edited)
Before we truly begin though, I'm going to use this post to store commonly used lingo I've noticed used in Creative Media, as well as some photoshop terms and shortcuts aaaand links to tutorials or just helpful things. These are things that are beneficiary to know or utilize because it'll either make your job a lot easier or make you look less silly if you ask about it.
 
 
Creative Media Forum Terms

  • Render: A term I've noticed used in Creative Media. This is essentially the "core" image of your signature. To use as example, in this signature I created for my team, the render is this riolu.

  • Text: Words you want on the signature. When I use this term, I'm sometimes referring to the font, size, etc of it as well.

 
Photoshop/My-general-art Terms

  • Canvas: this is the thing you are making the signature on

  • Layers: this is a piece of the image

  • Clipping Mask: This is a technique that essentially forces a layer to "color in the lines" of the layer below it. makes life 100% easier

  • Layer mode: Basic photoshop/art program thing. Your default is "Normal". Depending on what you pick changes how the layer effects the image. Multiply, for example, is essentially making the layer literally uh, layer ontop of the previous colors/image, if that makes sense? I could go into detail on which layer mode does but I won't. Essentially just experiment with layer modes and see what you like the most.

 
Shortcuts I commonly use (Photoshop CS5)

  • CTRL + C: copy

  • CTRL + X: cut

  • CTRL + Z: undo (once)

  • CTRL + SHIFT + Z: undo (for multiple undo's)

  • CTRL + ALT + G: clipping mask

 

Helpful Links

  • Akunja's [Tutorial] Make your own Signatures: Shows another aspect/method of sig making. He also has a link to his brush folder which is super amazing and I admit I stole and use regularly.

  • DaFont: Good site to get lots of different kinds of fonts. 

  • HexNull's [Tutorial] How to create a simple but good-looking signature: Another signature tutorial. Kinda hesitated in throwing in this in because unfortunately, it might uh, "miss a few steps" for beginners? I think this one would work well if you have knowledge in Photoshop already, I guess.

  • Basic Color Theory: Colors can help provoke a certain mood or feel. Also, some colors work well with each other versus others. This talks about that and is good for pointers.

  • Colour Lovers: Essentially a website where people submit different color palettes. Not sure how useful it is for others, but I know it's definitely fun to look at.

 
I'll add more as I go, probably. If you feel I missed something, just hollaaaaaa in the thread.
Edited by Deejaye
Link to comment
Deejaye

Deejaye

Posted
  • Author
Posted
Tutorial for *simple* babby animations
 
This is an old tutorial I made almost a year ago so I'm updating it/rewriting portions of it.
 
special thanks to HexNull (rip) for first teaching me how to do that whole text shine and being patient with all the dumb questions I had
 
1. Get your image ready.
 
2. Select what you want to, uh, "shine" if it's part of the image. Cut it [or copy] and paste it on a seperate layer. The lasso tool is very convenient for this. Alternatively, if you want the text to shine, then write on the image. The main key is that you want to isolate what you want to animate on a seperate layer.
 
3. Create a new overlay [though you can go with normal or whatever you think looks best] layer above the isolated layer. Take the brush tool and pick one of the soft brush options and make a line. Diagonal is usually best. Drag it to either side of the text, where you want the shine to start, so it's not on the text at all. Press CTRL + ALT + G. The white mark should be invisible to you now. That's ok though, it's still there.
 
4. Look up at the toolbar. Select Window > Animation. A little window at the bottom should have popped up. You'll see one frame.  Click on the arrow point down below the first frame. This changes the speed of the frame, A drop box should appear. Select "Other..." and set it to some reasonable time (somewhere in the range of 2.0-4.0 seconds.) What you've just done is set the amount of time before the shine will go across your text.
 
5.  Duplicate the frame. To do this, look at the Animation (frames) window. Towards the bottom of it, you'll see a square icon/duplicate icon to the left of the trashcan icon. Click it. Click the little arrow again that changes the frame speed, select "Other", and set it to "0.03"
 
6. Duplicate the second frame. This time, move the shine layer across the text so it's on the opposite side/where you want the animation/shine to end.
 
7. Select the middle/2nd frame again. To the left of the duplicate icon, you should see an icon called "Tween". It's like a bunch of little boxes that fade. Click it. Make sure it says "Tween With: Next Frame" and "Frames to Add: 30." Click OK. What you just did was added in all the "inbetween" frames between the two key frames (where the shine starts and where it ends.)
 
8. Back to the toolbar. Click File > Save for Webs and Devices. A huge menu box thing will come up. In the left hand corner of it, there should be a tab selected named "Optimized." laugh at photoshop for trying to make you save something in lower quality and select "Original" to the left instead. Then click "Save".
 
TO DO: Fix some of the wording so that tutorial is easier understood as well as simpler. Add images for each step. Maybe bug Plizard to help me make a video tutorial.
Link to comment
Deejaye

Deejaye

Posted
  • Author
Posted

YES YESSSS YESSSSSSSS! I GOT SHINY SIGNATURES NOW MWAHAHAHAHA

 

gt7.gif

I would have probably made the JWONG text a dark red or something and then made the shine a warm color (red, orange, yellow) or white. 'Cause the gray does look a little out of place.

But good job, nonetheless.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go to topic listing
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use and Privacy Policy.

  I accept