Page 1 of 3 123 LastLast
Results 1 to 15 of 31

Thread: // transparent signature tutorial -- photoshop 7 //

  1. #1
    // Never Defeated // born invincible's Avatar
    Join Date
    Mar 2003
    Location
    on the 2 dots
    Posts
    2,938
    Rep Power
    22

    Default // transparent signature tutorial -- photoshop 7 //


    // transparent signature tutorial -- photoshop 7 //


    ive been meaning to do this tutorial for awhile now because ive seen the technique being implemented by some graphics designers here and i believe this tutorial can be beneficial to them... and others alike that are interested in the technique but perhaps not profecient with it.

    the transparent signature is a sig that has a image within it that also extends outside its natural border. a good example of what im talking about is this:




    i will be using photoshop 7 for this tutorial... it should be almost the same for anything at 7 or higher.. i also have CS and as far as i know, all of the commands are the same.

    with that being said let begin...

    first off... open a new transparent document with a size of 500x500. i know that seems big, but we will fix that later.

    pull out your polygonal lasso tool. draw a border. if you hold down the Shift Key while drawing out your border you can get a perfect straight edge. try not to make it too long or too thick. mine will be approximately 400x130, give or take a little. heres what i came up with.



    now you want to create a new layer. name this layer "Border".
    make sure that the layer named "Border" is selected in your layers pallette:




    with that selected, go back to your document and right click inside the border. when the menu pops up, scroll down
    to where it says Stroke and click it. set the pixel at 1 and the color Black.

    -----------------------------------------------------------------------------------------------------------------

    ( i wanna throw this into my tutorial now.. its almost like a sub-tutorial. its a little trick to apply to your image before proceeding any further to help ensure the best results in the end. this trick i learned from a awesome graphics artist named Stinger over a the RKS forums. he gets credit for this technique!!! im just using it cause its relevant to my tutorial.)

    now this is a technique that is almost missed all the time... i see it alot. its simple and it can make your transparent sig turn out ALOT better. i promise.
    you should have your image out already... whatever image you decide to work with make sure that it is saved with NO BACKGROUND. you can do that by cutting out your image and placing it on a transparent document. then just save as a .png file.

    now go to File > Save for Web and this box should open:




    now go over to where it says "Matte" and click on it... it will open a box and allow you to choose a color. the color you choose here will act as a kind of background color that will outline your image. ever see a transparent sig thats image is all white and choppy around the edges? looks like crap... well this technique will help prevent that. here is an example:

    image without the "Matte" tecnique:






    image with the "Matte" technique:



    this technique will ensure that once you finish the signature... it wont be all choppy looking around the edges. this can be a major thing that can turn a awesome sig into something very n00bish!!!

    thats basically it for the sub-tutorial!

    -----------------------------------------------------------------------------------------------------------------


    now at this point your gonna need to open the image that you want to use. for this tut, i will be using this image:




    now for convenience sake... the image i chose is a image that has already been cut out. so if you use my image, just save it to your PC and open it in photoshop and you will see its just an image that is already cut out of its BG.

    for this particular image im using i will need to resize it before placing it on my 1 pixel border document. ( our main document we are using. ) just go to Image > Image Size > decrease to what you want.

    now your gonna wanna paste your image to your document with the 1 pixel black border. just press Ctrl A and Ctrl C on the image your using. this will select and copy it. now click on your 1 pixel black border document and press Ctrl V. this will paste the image. you will need to adjust the image around untill you get it how you want. heres what i got:





    to kinda make things easier go ahead now and double click Layer 2 in the layers pallette and rename it "Image" and do the
    same with Layer 1 and name it "Fill". your layers pallette should look like this:




    click and select the layer named "Border" in your layers pallette. press the D key on your keypad to reset your colors.
    now select your Magic Wand Tool. click anywhere inside the border. it should highlight the border now like this:




    now that your border is selected, go over to your layers pallette and select the layer named "Fill". select your
    Paint Bucket Tool and fill inside the border like this:




    next up you wanna move the layer named "Image" down one space right below the layer named "Border". the layer "Image" should be in the middle of "Border" and "Fill" now.

    now click on the layer in the layers pallette named "Border". go over and select the polygonal lasso tool. right click on your image and select stroke. set pixel at 1 and color to whatever you want. preferably one that stands out.

    now click on the layer in the layers pallette named "Fill". choose a foreground and background color that you want. i chose a goldish color and black.

    now go to Filter > Render > Clouds. then go to Filter > Render > Difference Clouds. hit Ctrl F a few times untill you get a cool looking cloud render. BE SURE THAT BEFORE RENDERING CLOUDS, THAT THE LAYER NAMED "FILL" IS HIGHLIGHTED
    IN YOUR LAYERS PALLETTE!!!

    heres what i got so far:





    now the reason behind the rendering clouds is simple. its going to create a quick generic BG really quick for this tutorial. you can get more fancy with it if you want by using brushes or filters inside your BG. just make sure that when you add those, that the layer named "Fill" is selected.

    at this point, your border will still be highlighted. click on the polygonal lasso tool. right click inside the image and click on Deselect.
    now click on the layer named "Border" in your layers pallette. once that is selected, click on the Zoom tool.
    zoom in on the image once or twice so it looks similar to this:




    at this point, your border will still be highlighted. click on the polygonal lasso tool. right click inside the image and click on Deselect.
    now click on the layer named "Border" in your layers pallette. once that is selected, click on the Zoom tool.
    zoom in on the image once or twice so it looks similar to this:
    time to erase some of the border thats covering parts of our image. with the layer "Border" selected in your layers pallette,
    pull out your eraser and start erasing carefully in the spots where the border is blocking the image. heres what i got:






    now your gonna need to erase any part of the image that goes out of your border that you dont want. if you made a simple border then it will be pretty easy. what i like to do is use the rectangular marquee tool to do the erasing. first select the layer named "Image" in your layers pallette.
    then go to your image and draw a square around the unwanted portion of the image like this:




    then simply press the Delete key on your keyboard and ta-da!! the unwanted image area is gone! and you can do this for rest of the area that remains or just use your eraser tool. the main reason i use this technique is so that i can get a clean erased line thats up against my sig border.
    almost done...

    now you want to get rid of all that excess transparent area surrounding your sig. use the Cropping Tool for this. crop the image like so:






    and now you should have a something along these lines:




    now at this point the tut is actually over. thats the basics on how to actually create the transparent sig.
    after youve finished and your ready to show it off, it has to be saved like this.
    go to File > Save As > then use the following setting:





    ensure that Transparency is checked and also for the part that says "Matte" you can apply the same procedure that i explained above in the sub-tutorial.





    and just click OK for the next pop-up window!!


    here is my final result:




    and with a little more time... you can add fonts too. heres my actual final results:





    that concludes my tutorial. this is the 2nd version of this tutorial that ive done. the first was missing a few things so i redid the whole thing and added some new things that were relevant. i hope the designers here find this helpfull.


    peace!




    __________________




  2. #2

    Default Re: // transparent signature tutorial -- photoshop 7 //

    Nice one Born, this should be handy for a few people.
    Good point well made about the 'matte' settings, 'nuff people have been confused over that in the past, but is there any benifit from saving images with a matte before they are added to the sig?, I always just chuck stuff in then do all the matte settings right at the end and it seems to work fine.
    props anyway for helping others elevate their skills some.
    Pz.

  3. #3
    JOKER FAM Sicka than aidZ's Avatar
    Join Date
    Dec 2004
    Location
    Westside connected (westcoast)
    Age
    37
    Posts
    15,145
    Rep Power
    45

    Default Re: // transparent signature tutorial -- photoshop 7 //

    thanks man, lookin good
    "BACK TO FUKIN WERK 1 OF YOUR THREADZ JUST GOT DUSTED"

  4. #4

    Default Re: // transparent signature tutorial -- photoshop 7 //

    thanks for da toturial!

    i'll try it later on

  5. #5

    Default Re: // transparent signature tutorial -- photoshop 7 //

    very good tutorial, props Born.

    That Wolverine sig is definitly listed in my all time top 3 illest signatures..

    Hertz's sig's Nr. 1 tho PEACE
    "The only way to a woman's heart is along the path
    of torment. I know none other as sure..."

  6. #6
    Veteran Member MantiZ's Avatar
    Join Date
    Jun 2005
    Location
    Latvia, United Streets of Adazhi (near Riga))
    Age
    30
    Posts
    1,022
    Rep Power
    13

    Default Re: // transparent signature tutorial -- photoshop 7 //

    damn! now everybody will start to make transparent sigs. gotta change my style
    cool tut anyway!
    peace!

    I wish all skinheads smelled like Mr.Clean..

    "G-Unit's full of bitches
    Banks is a bitch
    Young Buck is a Bitch
    Tony Yayo is a bitch
    Fifty is a bitch
    Olivia's a bitch...HOLD UP! Olivia's a man!" The Game

    i can't commit suicide. suicide committed me. so my suicide is dead.

  7. #7
    John W. Henry
    Join Date
    Jun 2005
    Location
    U.K.
    Age
    29
    Posts
    6,519
    Rep Power
    35

    Default Re: // transparent signature tutorial -- photoshop 7 //

    WOW!

    a billion props bron for this thanks!!!! first time i might print a thread!!

    peace!

  8. #8

    Default Re: // transparent signature tutorial -- photoshop 7 //



    that's my try at it, i don't know what's with da tail though, i'll try fixing it

    and i found myself a easier way in doing transparent sigs when i was in da middle of following yours

  9. #9

    Default Re: // transparent signature tutorial -- photoshop 7 //

    ^ thats ill man, props

    (especially for a first)

  10. #10
    // Never Defeated // born invincible's Avatar
    Join Date
    Mar 2003
    Location
    on the 2 dots
    Posts
    2,938
    Rep Power
    22

    Default Re: // transparent signature tutorial -- photoshop 7 //

    Quote Originally Posted by Sifu Dragon
    and i found myself a easier way in doing transparent sigs
    please share
    __________________




  11. #11

    Default Re: // transparent signature tutorial -- photoshop 7 //

    Kick ass sig Sifu!!! The tail's a lil' jagged tho
    "The only way to a woman's heart is along the path
    of torment. I know none other as sure..."

  12. #12

    Default Re: // transparent signature tutorial -- photoshop 7 //

    Quote Originally Posted by born invincible
    please share
    well first i made da bg then i opened da new document 500x500 and placed da bg on it then added da image and then i followed your technique but i didn't need to erase da border overlappin da image

    it's easier for me lol

  13. #13

    Default Re: // transparent signature tutorial -- photoshop 7 //

    Quote Originally Posted by born invincible
    please share
    well first i made da bg then i opened da new document 500x500 and placed da bg on it then added da image and then i followed your technique but i didn't need to erase da border overlappin da image

    it's easier for me lol

    thanks 09 and mk

  14. #14
    Veteran Member MantiZ's Avatar
    Join Date
    Jun 2005
    Location
    Latvia, United Streets of Adazhi (near Riga))
    Age
    30
    Posts
    1,022
    Rep Power
    13

    Default Re: // transparent signature tutorial -- photoshop 7 //

    This is the shyt!!!


    I wish all skinheads smelled like Mr.Clean..

    "G-Unit's full of bitches
    Banks is a bitch
    Young Buck is a Bitch
    Tony Yayo is a bitch
    Fifty is a bitch
    Olivia's a bitch...HOLD UP! Olivia's a man!" The Game

    i can't commit suicide. suicide committed me. so my suicide is dead.

  15. #15
    LadyRectah
    Guest

    Default Re: // transparent signature tutorial -- photoshop 7 //

    I tried and tried and got tired of trying maybe u should email me all the tutorial at my email

Similar Threads

  1. krazi m.i.c._
    By krazi m.i.c. in forum Intro
    Replies: 5
    Last Post: 09-15-2005, 07:00 AM
  2. Venomous Darts
    By Robert in forum Temple Of Darts
    Replies: 9
    Last Post: 09-02-2005, 01:51 AM
  3. new marketing and hip hop culture book blog
    By 1233221 in forum Hip-Hop Shop
    Replies: 0
    Last Post: 08-14-2005, 07:05 AM
  4. You think Method Mans album will sell
    By Dartz in forum Wu-Tang Chamber
    Replies: 30
    Last Post: 08-02-2005, 03:48 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •