PDA

View Full Version : // transparent signature tutorial -- photoshop 7 //


born invincible
10-02-2005, 12:37 AM
// 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:

http://img.photobucket.com/albums/v233/borninvincible/rine01.gif


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.

http://img186.imageshack.us/img186/3707/017cy.jpg

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:

http://img.photobucket.com/albums/v233/borninvincible/tuts/borderlayerselected.jpg


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:

http://img143.imageshack.us/img143/7629/12copy4vu.jpg

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:

http://www.photoshopcafe.com/tutorials/transparent/tran-white-matte.gif



image with the "Matte" technique:
http://www.photoshopcafe.com/tutorials/transparent/tran-no-matte.gif

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:

http://img377.imageshack.us/img377/2285/render8018ac.th.png (http://img377.imageshack.us/my.php?image=render8018ac.png)


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:


http://img136.imageshack.us/img136/6555/022uw.jpg


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:

http://img.photobucket.com/albums/v233/borninvincible/tuts/renamedlayerspallette.jpg


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:

http://img45.imageshack.us/img45/5370/035az.jpg


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:

http://img296.imageshack.us/img296/4204/043hv.jpg


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:

http://img359.imageshack.us/img359/7807/056uq.jpg



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:

http://img203.imageshack.us/img203/5465/062tq.jpg


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:

http://img228.imageshack.us/img228/9765/075le.jpg




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:

http://img291.imageshack.us/img291/2598/085lr.jpg


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:


http://img389.imageshack.us/img389/5623/094dv.jpg



and now you should have a something along these lines:

http://img394.imageshack.us/img394/8189/100wn.jpg


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:

http://img239.imageshack.us/img239/1603/117cf.jpg



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.


http://img.photobucket.com/albums/v233/borninvincible/tuts/saveas02.jpg


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


here is my final result:

http://img77.imageshack.us/img77/3124/dococ5bl.gif


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

http://i23.photobucket.com/albums/b397/bornknowledge/Forum%20Sigs/dococ014fn.gif



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!

Hz Deep
10-02-2005, 12:55 AM
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.

Sicka than aidZ
10-02-2005, 01:29 AM
thanks man, lookin good

Sifu Dragon
10-02-2005, 06:09 AM
thanks for da toturial!

i'll try it later on

Skellington
10-02-2005, 06:22 AM
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

MantiZ
10-02-2005, 07:23 AM
damn! now everybody will start to make transparent sigs. gotta change my style :D
cool tut anyway! :D
peace!

Tage
10-02-2005, 07:45 AM
WOW!

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

peace!

Sifu Dragon
10-02-2005, 12:05 PM
http://img.photobucket.com/albums/v616/Rebirth/nightcrawlerbanner23.gif

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

MK_Wu
10-02-2005, 12:32 PM
^ thats ill man, props

(especially for a first)

born invincible
10-02-2005, 05:16 PM
and i found myself a easier way in doing transparent sigs
please share

Skellington
10-02-2005, 05:58 PM
Kick ass sig Sifu!!! The tail's a lil' jagged tho ;)

Sifu Dragon
10-03-2005, 12:05 PM
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
10-03-2005, 12:05 PM
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

MantiZ
10-03-2005, 12:46 PM
This is the shyt!!!

http://i3.photobucket.com/albums/y59/RZArectah/MFDOOM_SIG2copy.png

LadyRectah
10-03-2005, 06:58 PM
I tried and tried and got tired of trying maybe u should email me all the tutorial at my email

born invincible
10-03-2005, 09:09 PM
I tried and tried and got tired of trying maybe u should email me all the tutorial at my email


whats happened?

LadyRectah
10-06-2005, 10:09 PM
I want to do one.. but I dont know maybe I lost patience.. if I give u a pic can u do me a banner?

born invincible
10-06-2005, 10:46 PM
I want to do one.. but I dont know maybe I lost patience.. if I give u a pic can u do me a banner?

no doubt... just drop the pick here or PM me with it... make sure to include details such as size, colors, theme, words, etc....

Rak12
10-09-2005, 06:36 AM
Here's what i got...kinda ripped off your idea tho LOL

http://img377.imageshack.us/img377/651/fsaafs3ux.gif

Rak12
10-09-2005, 06:38 AM
Yo btw born, what blending options did you use when you wrote "Invincible"?

born invincible
10-09-2005, 12:40 PM
Yo btw born, what blending options did you use when you wrote "Invincible"?

if im not mistaken it was soft light or overlay... usually get good results from those blend modes!

Origin™
11-06-2005, 11:27 AM
test

Origin™
11-06-2005, 11:30 AM
http://img305.imageshack.us/img305/4134/fishmonkeygifcopy4qh.gif

born invincible
11-06-2005, 04:43 PM
WTF???

num2son
11-07-2005, 11:26 AM
Thanks born.

Razorsharp
11-07-2005, 02:01 PM
d0pe////peace

LORD ZERO
11-14-2005, 08:41 PM
Ill Tutorial Yo, Id Hate To Switch Programs Tho Since Im Using Ulead Photoimpact 10 Lol *proceeds To Dig Even Deeper In Tha Program To Find Something Similar To That*

born invincible
11-14-2005, 10:38 PM
Ill Tutorial Yo, Id Hate To Switch Programs Tho Since Im Using Ulead Photoimpact 10 Lol *proceeds To Dig Even Deeper In Tha Program To Find Something Similar To That*

yo i never heard of that prog? did you use it to make the sigs you are rockin now?

Potent1
11-16-2005, 12:02 PM
:learning:

RZArekta
02-23-2006, 03:27 AM
ty man, great post.. will try some of dat now .

GENERAL WISE
03-25-2006, 02:41 PM
way too complicated for me. I got Photoshop 9 CS2 (for FREE!) though, no clue on how to use it.