0
 

home
news
wu-tang clan
bio's
media
store
blogs
forum
contact

Go Back   Wu-Tang Corp. - Official Site of the Wu-Tang Clan > Misc > Graphics Corner

Reply
 
Thread Tools Display Modes
Old 10-02-2005, 12:37 AM   #1
born invincible
// Never Defeated //
 
born invincible's Avatar
 
Join Date: Mar 2003
Location: on the 2 dots
Posts: 2,949
Blog Entries: 3
Rep Power: 19
born invincible prodigal sonborn invincible prodigal sonborn invincible prodigal sonborn invincible prodigal sonborn invincible prodigal sonborn invincible prodigal son
Send a message via AIM to born invincible Send a message via MSN to born invincible
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!




__________________
__________________



born invincible is offline   Reply With Quote
Old 10-02-2005, 12:55 AM   #2
Hz Deep
Deeper Designz
 
Hz Deep's Avatar
 
Join Date: Jun 2005
Age: 35
Posts: 617
Rep Power: 11
Hz Deep grasshopper
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.
__________________
Hz Deep is offline   Reply With Quote
Old 10-02-2005, 01:29 AM   #3
Sicka than aidZ
JOKER FAM
 
Sicka than aidZ's Avatar
 
Join Date: Dec 2004
Location: Westside connected (westcoast)
Age: 34
Posts: 15,263
Rep Power: 42
Sicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venomsSicka than aidZ five deadly venoms
Default Re: // transparent signature tutorial -- photoshop 7 //

thanks man, lookin good
__________________
"BACK TO FUKIN WERK 1 OF YOUR THREADZ JUST GOT DUSTED"
Sicka than aidZ is offline   Reply With Quote
Old 10-02-2005, 06:09 AM   #4
Sifu Dragon
Veteran Member
 
Join Date: Jun 2005
Posts: 1,324
Rep Power: 12
Sifu Dragon grasshopper
Default Re: // transparent signature tutorial -- photoshop 7 //

thanks for da toturial!

i'll try it later on
__________________
Sifu Dragon is offline   Reply With Quote
Old 10-02-2005, 06:22 AM   #5
Skellington
666
 
Skellington's Avatar
 
Join Date: Mar 2003
Location: Palatinos
Posts: 5,399
Rep Power: 21
Skellington shaolin monk
Send a message via MSN to Skellington
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..."
Skellington is offline   Reply With Quote
Old 10-02-2005, 07:23 AM   #6
MantiZ
Veteran Member
 
MantiZ's Avatar
 
Join Date: Jun 2005
Location: Latvia, United Streets of Adazhi (near Riga))
Age: 27
Posts: 1,046
Rep Power: 11
MantiZ grasshopper
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.
MantiZ is offline   Reply With Quote
Old 10-02-2005, 07:45 AM   #7
Tage
John W. Henry
 
Join Date: Jun 2005
Location: U.K.
Age: 26
Posts: 6,576
Rep Power: 33
Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)Tage Iron Lungs (Fists of Legend)
Default Re: // transparent signature tutorial -- photoshop 7 //

WOW!

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

peace!
__________________
Tage is offline   Reply With Quote
Old 10-02-2005, 12:05 PM   #8
Sifu Dragon
Veteran Member
 
Join Date: Jun 2005
Posts: 1,324
Rep Power: 12
Sifu Dragon grasshopper
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
__________________
Sifu Dragon is offline   Reply With Quote
Old 10-02-2005, 12:32 PM   #9
MK_Wu
Member
 
Join Date: Jul 2005
Age: 31
Posts: 174
Rep Power: 0
MK_Wu grasshopper
Default Re: // transparent signature tutorial -- photoshop 7 //

^ thats ill man, props

(especially for a first)
__________________
MK_Wu is offline   Reply With Quote
Old 10-02-2005, 05:16 PM   #10
born invincible
// Never Defeated //
 
born invincible's Avatar
 
Join Date: Mar 2003
Location: on the 2 dots
Posts: 2,949
Blog Entries: 3
Rep Power: 19
born invincible prodigal sonborn invincible prodigal sonborn invincible prodigal sonborn invincible prodigal sonborn invincible prodigal sonborn invincible prodigal son
Send a message via AIM to born invincible Send a message via MSN to born invincible
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
__________________
__________________



born invincible is offline   Reply With Quote
Old 10-02-2005, 05:58 PM   #11
Skellington
666
 
Skellington's Avatar
 
Join Date: Mar 2003
Location: Palatinos
Posts: 5,399
Rep Power: 21
Skellington shaolin monk
Send a message via MSN to Skellington
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..."
Skellington is offline   Reply With Quote
Old 10-03-2005, 12:05 PM   #12
Sifu Dragon
Veteran Member
 
Join Date: Jun 2005
Posts: 1,324
Rep Power: 12
Sifu Dragon grasshopper
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
__________________
Sifu Dragon is offline   Reply With Quote
Old 10-03-2005, 12:05 PM   #13
Sifu Dragon
Veteran Member
 
Join Date: Jun 2005
Posts: 1,324
Rep Power: 12
Sifu Dragon grasshopper
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
__________________
Sifu Dragon is offline   Reply With Quote
Old 10-03-2005, 12:46 PM   #14
MantiZ
Veteran Member
 
MantiZ's Avatar
 
Join Date: Jun 2005
Location: Latvia, United Streets of Adazhi (near Riga))
Age: 27
Posts: 1,046
Rep Power: 11
MantiZ grasshopper
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.
MantiZ is offline   Reply With Quote
Old 10-03-2005, 06:58 PM   #15
LadyRectah
Guest
 
Posts: n/a
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
  Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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


All times are GMT -5. The time now is 03:24 AM.


Copyright 2000 - 2013 The Wu-Tang Corp. & shift-one