1. Guest - Remember that Thread Prefixes are a search tool! Click on a Thread Prefix and all threads with the same Prefix in that forum will be offered to you. To dismiss this notice click on X >>>
    Dismiss Notice
  2. Our gif only content threads have a rule where all thumbs must be posted as a static thumbnail that does not play. Currently imagebam made a change where they no longer produce static thumbs. Therefore, please do not use imagebam, or any host, that provides live playing gifs in those specific threads. If you see your gif playing once you post, try to use a smaller thumbnail and if that does not work use a different approved host.
    Dismiss Notice
  3. Can't Log-in?. If your password is no longer accepted but the email address registered in your profile is working, use the "Forgot Your Password?" routine. However, if your registered email address is unusable, create a new temporary phun account and contact S-type.
    Dismiss Notice
  4. ATTN: Imagehost picpie is infected with the "internet security warning" redirect that tries to take users hostage with an inescapable redirect. Avoid using picpie as an imagehost.
    Dismiss Notice
  5. Too many Alerts? Why not adjust your "Alert Preferences" in your Profile Page?
    Dismiss Notice

Signature tutorial - (Basic)

Discussion in 'Creative Backyard' started by Noodle Panda, Jan 16, 2011.

Tags:
  1. Noodle Panda

    Noodle Panda ★ ★ ★ ★ ☆ 15 Year Member

    Joined:
    Apr 22, 2007
    Messages:
    38,349
    Likes Received:
    77,324
    This is a basic tutorial on how to make a bordered signature from a single image. There are alot of different ways to work in photoshop but i tend to use the simplest options.
    More advanced tutorials will follow by myself or anyone else who wants to contribute.

    Before i start there are two tricks to remember when using photoshop. First off, use layers and learn to love them. When you put everything into layers the entire image can be edited, when you put everything into the same layer, you are fucked if you want to edit. Secondly, Undo. You can undo alot of actions of photoshop (16 I think). If you get stuck then hold down CTRL and ALT and press Z and it will undo up to 16 times. Similarly, holding down CTRL and SHIFT while pressing Z will redo your work.

    1. Pick your image well. This really is very, very important. You can say "i want a Kelly Brook sig" but if you just dash in and pick and old image it will more than likely be more difficult to end up with a well done signature.

    Remember the sig is a horizontal medium so always take a look at how your image is aligned. Is it a narrow image on a vertical line? Will there be enough background to fill out the sig or will you have to cut, copy or draw in a background?

    My first act is always to take a look at alot of images. When i pare down what i want to try out i open them in photoshop and then simply zoom out and drag the window to the same rough size as the signature i am going to make. This gives me a basic perspective if the image is going to work or not. If it doesn't look right, have the right plane then i ditch it, even if it is a great looking image.

    [​IMG]

    2. One you have decided one your image open a new template and drag your image across to it (or copy and paste). Deciding where to use the image on the sig is paramount. Too many people don't take heed of visual laws that help decide proportions. The rule of thirds is a great way to decide where things are going to be.

    It's important to make this initial decision to have your primary image in the most pleasing place possible for your work. Choose it well. When you have it, lean back and have another look. If it's a sig you really want to do well, minimize the image for a few seconds and then maximize it again. Your first instinct will tell you whether or not you like where it is placed.

    [​IMG]

    3. Deal with the background. Most times you aren't going to be lucky enough to be handed a huge image with plenty of background to work with. So the most basic way to sort it is to use the eyedropper tool and click it over the background area and paint in the rest of the image. If the background isn't a solid colour but a gradient or a pattern then you can use the clone stamp tool to fill in the remaining background. To use the clone stamp tool, select it and hold it over the area you want to clone, then press ALT and click on your mouse. You have no "sampled" that area and can repaint any area you want with that sample. It can be tricky to master but keep trying till you get it right if you need to.

    [​IMG]

    4. The image work. Now is the time to deal with the main image. In this case the image is slightly blurred and i used a sharpen filter followed by a denoise (a topaz filter) to clear and sharpen it without giving it a harsh look. The sig now looks cleaner and brighter.

    [​IMG]

    5. Text. Adding text is not mandatory but can absolutely be the difference between a really good sig and a stupendous one. Take a look at GBTG, Lukin, essy and Helium's text work to see just how much of a difference text can make in a signature.

    Deciding what you want in your text is totally up to you. It can be the name of the person/object, your name or whatever. You can add a phun.org tag if you want too. Have fun with it.

    Placing your text is important too. First off, your text is there to compliment the primary image, not get in it's way or detract from it.

    Below are some simple example of well placed text. These are pretty much the basics of where to put the text. Because there is only one image you can place it away from the focal point (in this case Nicole's face) and it won't detract from the image. The wide text across her face also doesn't detract although in general you should avoid placing text over your primary image.

    Make sure your text colour marries well with the rest of the image. If you are in pastelle tones then don't use a bright red and vice versa.

    Once you are done you can play with the fonts. Playing with fonts is something you should do after you have chosen your colour and placement or before. Never in between. It can alter the mood and look of your whole work so choose well. There are plenty of font sites around to load up on. Such as dafont. To install a font. Unzip it and drop it into your fonts folder. It will be active the next time you open photoshop.

    [​IMG]

    5. Borders. Borders can be a simple outline, a multi layered border with variant levels of opacity, patterned borders, twin bars, deliberate images or anything you can come up with. But they will set the tone for what you are working on.

    Here is a very simple border that you can practise different looks with.

    In your layers box, pick your primary layer. Now go to Layers and duplicate it like this.

    [​IMG]

    Now you can see that there are two identical layers in the layers box.

    [​IMG]

    Now go back into layers and pick layer style. Select STROKE and a new box will open.

    [​IMG]

    Alter the parameters to the ones i have set here. The SIZE is the size of the border. The POSITION is whether it is on the inside or outside of the image (seeing as the outside of the image cannot be seen you would choose inside. The OPACITY is the amount of layer you want to be seen. So if you select zero you will see nothing, 100% you will see everything. 50% gives it that transparent look.

    [​IMG]

    6. Finish and save. The signature is done. Time to save.

    Go to layers and flatten your image.

    [​IMG]

    Select save for web and devices.

    [​IMG]

    Choose your save quality. You can take a look at how big the filesize will be by changing the selection. If you want you can save multiple files and look at which one you prefer. I use very high as it is nearly the same as a normal file on a sig size (I can't remember who first pointed this out, i think it was TCF). This option was brought into phun because we were heavily responsible for many imagehosts going down and lowering filesizes really helped.

    [​IMG]

    Now you have saved your work display that mofo!

    This is a very basic signature tutorial for people who wanted to try their hand at it. I realise that most sig makers will already know all this but i thought it best to start with the very basics

    Let me know if you want anything in particular in the next tutorial. Of if you are creative crew and have different methods then feel free to share them and if you are going to do a tutorial then let me know so i don't do the exact same thing as yourself.

    Hope this made sense :)
     
  2. 2001pm

    2001pm 2+2 is on my mind...

    Joined:
    Jun 24, 2008
    Messages:
    124,373
    Likes Received:
    27,458
    Jamms, you are a saint for taking the time to share your techniques. Thank you!
     
  3. essential

    essential Evil wakes in vengeance,be careful what you choose ★ ★ ★ ★ ☆ 15 Year Member Movers & Shakers Power Poster

    Joined:
    Aug 28, 2005
    Messages:
    117,650
    Likes Received:
    57,060
    ossum tuto jamms :thumbs: great effort bro!
     
  4. Thanks Jamms, great stuff.

    When it comes to making sigs and using Photoshop I tend to use trial and error really, to discover how things work. I sometimes look at styles / techniques used here and try to copy them with varying degrees of success / failiure. As such I probably do things in a different (i.e. wrong) way compared to many of you, so a tutorial like this is fascinating. I find many tutorials too complicated or so full of techno-babble to follow so yours is really appreciated.

    As for some of the points you raised, re: layers, you say always use layers, I didn't realise there was any other way than this - but all layers come together in a single source anyway don't they? I once saw a sig posted here, can't recall who it was by, sorry, but it was a girl's face on a painted patterned background, and the artists said it contained 20+ layers.....for the life of me I couldn't work out how so many had been used. If I'd tried a similar sig I'd have done it in about five!

    The borders section was of most use to me, I'm going to try following that later and see what I can come up with. Up to now I've tended to just reduce the size of my main sig and center it in a new slightly bigger template to give a border. I know, primitive huh? :D

    Finally, I've never flattened anything I've done. What is the purpose of this? Also whenever I've finished a sig I save it as a Jpeg (or PSD if I think I may want to work on it further) rather than "save for web and devices", what advantage if any does that give you?

    Anyways, enough wittering on from me, thanks again for the great post mate, look forward to further installments.
     
  5. Noodle Panda

    Noodle Panda ★ ★ ★ ★ ☆ 15 Year Member

    Joined:
    Apr 22, 2007
    Messages:
    38,349
    Likes Received:
    77,324
    I flatten when i am sure the work is finished. It isn't essential, i just do it for tidyness and a sense of completion.

    As for saving for web and devices, the filesize is greatly reduced. This helps avoiding to cripple free imagehosts. The first file is saved as a jpeg, the second saved for web and devices and is a third of it's size with no noticeable change in quality.

    [​IMG]

    [​IMG]
     
    Nemesis likes this.
  6. mah0ne

    mah0ne momsenetic ★ ★ ★ ☆ ☆

    Joined:
    Nov 17, 2009
    Messages:
    14,398
    Likes Received:
    49,003
    Cheers for taking the time to do this. :tup:
     
  7. A.tab

    A.tab It was the best of times, ★ ★ ★ ★ ★ Ten Years of Phun Movers & Shakers Power Poster

    Joined:
    Jul 4, 2006
    Messages:
    82,665
    Likes Received:
    110,541
    Thanks Jamms..
    I am definately going to try and maybe then stop pestering masters like u for sigs..
     
  8. elturko78

    elturko78 Treu Anarchist ★ ★ ★ ★ ☆

    Joined:
    Jan 18, 2007
    Messages:
    24,256
    Likes Received:
    91,251
    Excellent tutorial Jammski, thanks a lot for taking the time to work on this. :cheers:
     
  9. Fallen69

    Fallen69 Consummatum Est

    Joined:
    Nov 13, 2008
    Messages:
    3,748
    Likes Received:
    13,890
    Thanks, Jamms! Gonna try this also.
     
  10. cyberninja187

    cyberninja187

    Joined:
    Nov 5, 2010
    Messages:
    9
    Likes Received:
    10
    How do you add the gif to the banner while the main part of the banner is still visible?
     
  11. Cold As Ice

    Cold As Ice Master of Solid Water Ten Years of Phun

    Joined:
    Sep 24, 2005
    Messages:
    143,078
    Likes Received:
    73,960
    That can be done with animation shop but also in photoshop
     
  12. cyberninja187

    cyberninja187

    Joined:
    Nov 5, 2010
    Messages:
    9
    Likes Received:
    10
    If you could post a guide I'd appreciate it.
     

Share This Page