Invisible Text Tutorial

[taikara]

You've probably seen sigs and banners that have a see-through text effect... well, it's actually pretty simple to create, if you know how.

So here we go:

Software used: Photoshop 7.0
Requirements: A variated-color background
A font that you like
Basic knowledge of how to use the Photoshop Text Tool

Step 1:

Pick out a background to use for the effect. There should be at least some variation in color throughout. You can use a one-color background, but there's no need for this tutorial if you do, as there's a much simpler way to get the effect with a flat background.

I'm using the background I made in my Taffy Pull Background Tutorial (http://www.abandonia.com/forum/index.php?showtopic=7762):

http://www.abandonia.com/~tomhenrik/Tutorials/Invisible/First.png

Step 2:

Select the Text icon and pick out a font you like. Apply text to the image (PS will automatically create a new text layer), play with it until you like the shape, and how it basically looks with the background. The color is unimportant.

My result:

http://www.abandonia.com/~tomhenrik/Tutorials/Invisible/Second.png

Step 3:

Press Ctrl + click on the text layer you just created in the Layers toolbar. It will do a Load Selection on the text.

To do this without hotkeys: while having your text layer highlighted in the Layers toolbar, go to Selection > Load Selection.

Step 4:

Select your background layer in the Layers toolbar. Press Ctrl+C, then Ctrl+V to copy and paste the new layer, which by itself, should look like this:

http://www.abandonia.com/~tomhenrik/Tutorials/Invisible/Third.gif

Make your original text layer invisible by clicking the little eye checkbox next to its name in the Layers toolbar.

Step 5:

While the new layer is selected, go to Layers > Layer Style > Outer Glow (or double click on the new layer in the Layers toolbar, and select Outer Glow).

Tweak your Outer Glow settings until you like the effect.

My settings were like so:

http://www.abandonia.com/~tomhenrik/Tutorials/Invisible/Fourth.png

Important Note About Using Outer Glow: The Blending Mode is very important to the Outer Glow effect. If you are using a light glow on a dark background, use the Screen Blending Mode. If you want to use a dark outer glow on a light background, use the Multiply Blending Mode.

When you're done, you should have the appearance of see-through text:

http://www.abandonia.com/~tomhenrik/Tutorials/Invisible/Fifth.png

Neat, huh?

[Blood-Pigggy]

Slow down, I'm still working on the "Taffy Pull" one.
:D

[taikara]

LOL... I prepared all the images I needed for both tutorials at the same time, since I did it all together. :D

[taikara]

Sorry for the double post, but I just thought I'd share another example of what you can do with this effect with some simple further tweaking:

http://sometimessulliedsoul.com/tutorials/invisi-text/sig-example3.jpg

Added:

Light blue inner glow to the effect layer.
Slight level tweaking on the effect layer.

That's it ^_^

[SwampThing]

Nice work taikara - tutorials are a good thing. :)

[Bobbin Threadbare]

I wish photoshop worked on my piece of crap. I'm assuming this'll be pinned, Tai?

I still think there should be a seperate forum in 'Art' for tutorials.

[Sean]

Hehe, that's a cool one and has given me some ideas. I'll share my image inspired by this if I actually get around to making it :)

[punch999]

Im guessing this wouldnt work on the gimp?

[Danny252]

I discovered this effect dosen't work well on dark backgrounds. So, I messed around, and invented...

THIS! I changed the 'size' on the glow to fill the whole image. Not perfect, but hey :P

[Sean]

LOL, thats pretty cool.. the N and 2 are a little hard to see but heh.. good job :)

[Tom Henrik]

Here's my attempt using my own Distressed Background, and playing around with the Outer Glow. The font is the same as I used for the Plastic effect ^_^

[Sean]

It's nice but once again some areas are a little hard to see because there so dark.

[taikara]

A good rule of thumb for the outer glow is to do the opposite of whatever value the majority of your background is...

if your BG is mostly dark, go for a light glow, and vice versa.

Also, with the second sig I posted, with the glowy BG, I tweaked the invisible text layer a bit with some brightness and contrast that allowed me to use the dark glow.

[Danny252]

Well at points mine was near white and at others near black ^^

[taikara]

I have a method of fixing that issue :)

I should post it... but I'm burnt out on writing tutorials at the moment.

[moogle]

Ahh!!
Nice..
I was just fooling around with text and the invis thing, can't believe I didn't think of the glow part!! :wall:

[Havell]

I just got Photoshop CS2. I did the taffy pull and the invisible text to get this.

I had Danny's problem of the light part of the background covering up the text, so I did two layers, one with multiply shading and one with screen, they lie on top of each other and make it visible regardless of background.

[Sean]

Originally posted by Havell@Jan 26 2006, 07:35 PM
I just got Photoshop CS2. I did the taffy pull and the invisible text to get this.

I had Danny's problem of the light part of the background covering up the text, so I did two layers, one with multiply shading and one with screen, they lie on top of each other and make it visible regardless of background.
Oo, Sexy.

No border though?

[Grinder]

Damn, all the images are gone. In almost all of the tutorials. Someone help me pleeeease :crybaby:

[chainsoar]

I can do invisible text, it's easy. Look -

- see?

Sorry.