Nothing Special   »   [go: up one dir, main page]

How To Use Photoshop Effects 10

Download as pdf or txt
Download as pdf or txt
You are on page 1of 173

Photoshop Text Effects: Worn And Torn Text

Learn Photoshop with Free Photoshop Text Effects at Photoshop


Essentials.com
Written By Steve Patterson

In this Photoshop text effects tutorial, we're going to learn how to create a "worn and torn" effect with our
text.

Here's the effect we're going for:

Let's get started.

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Step 1: Open A New Photoshop Document

I'm going to start by going up to the File Menu at the top of screen and choosing New... to create a new
Photoshop document. I'll choose a preset size of 640x480, and then I'll click OK to have Photoshop create
my new document for me:
Adobe Photoshop Text Effects: Create a new Photoshop document using the preset size of 640x480. You
can use whichever size you like.

Step 2: Fill The Background Layer With Black

Press D on your keyboard to quickly set black as your foreground color. Then use the keyboard shortcut
Alt+Backspace (Win) / Option+Delete (Mac) to fill the Background layer with black:

Adobe Photoshop Text Effects: Press "Alt+Backspace" (Win) / "Option+Delete" (Mac) to fill the
background with black.
Step 3: Set Your Foreground Color To White And Add Your Text

Press X on your keyboard this time to swap your Foreground and Background colors, so white becomes
your Foreground color. Then grab your Type tool from the Tools palette or by pressing T on your keyboard:

Adobe Photoshop Text Effects: Select the Type tool from the Tools palette or by pressing "T" on your
keyboard.

Then with the Type tool selected, choose your font up in the Options Bar at the top of the screen and add
your text. I'm going to use "Impact" for my font, and I'll type the word "FEAR". Then I'll press Ctrl+T
(Win) / Command+T (Mac) to bring up Photoshop's Free Transform box and handles around my text and
while holding down Shift+Alt (Win) / Shift+Option (Mac), I'll drag out a corner handle to resize my text
and make it larger. Holding Shift constrains the proportions of the text as I drag, and holding Alt/Option
forces the text to resize from the center. Here's my text after resizing it:

Adobe Photoshop Text Effects: Add your text, then resize it if needed with the Free Transform command.

Step 4: Rasterize The Text

We need to convert the text into pixels at this point, so once you're happy with your text, go up to the Layer
menu at the top of the screen, choose Rasterize, and then choose Type. Your text won't look any different
in the Document Window, but if you look at your Type layer in the Layers palette, you'll see that it has now
become a normal layer:
Adobe Photoshop Text Effects: After rasterizing the text, it becomes a normal layer in the Layers palette.

Step 5: Make A Jagged Selection Through The First Letter, Then Select The Rest Of
The Word

Grab your Polygonal Lasso tool from the Tools palette. It's hiding behind the Lasso tool, so just click and
hold your mouse down on the Lasso tool icon and then select the Polygonal Lasso tool from the fly-out
menu that appears:

Adobe Photoshop Text Effects: Select the Polygonal Lasso tool from the Tools palette.

Then, with the Polygonal Lasso tool selected, make a jagged selection through the first letter from top to
bottom. Notice I didn't say drag a selection, and that's because you don't drag with the Polygonal Lasso tool.
All you do is click inside the document once with your mouse, then release the mouse button and move your
mouse to create a line. Click again, move the mouse again. Click, move, click, move, and so on. Make sure
you create a jagged line through the letter, not a straight line, since this is going to be our first tear point.

Once you have your jagged line through the letter, finish your selection by clicking and moving your mouse
around the rest of the word to the right of your selection line, so you end up with the entire word selected
except for the left part of the first letter, as I have here:
Adobe Photoshop Text Effects: Make a jagged selection through the first letter from top to bottom, then
include the rest of the word that's to the right of your jagged line in the selection.

Step 6: Cut The Selection Onto A New Layer

When you're happy with your selection, press Ctrl+Shift+J (Win) / Command+Shift+J (Mac) to cut the
selection onto a new layer. You won't see much happen yet in your Document Window, but in your Layers
palette, you'll see that your selection is now on a new layer, and the only part of the word remaining on the
original text layer below it is the left part of the first letter which wasn't selected:

Adobe Photoshop Text Effects: Press "Ctrl+Shift+J" (Win) / "Command+Shift+J" (Mac) to cut the selection
onto a new layer.

Step 7: Rotate The Letters Using The Free Transform Command

We're going to create our first tear in the text. With the new layer selected in the Layers palette, press
Ctrl+T (Win) / Command+T (Mac) to bring up the Free Transform box and handles around the letters
(minus the left half of the first letter, which is on the layer below). Look in the center of the Free Transform
box and you'll see a small target icon:
Adobe Photoshop Text Effects: The target icon in the center of the Free Transform box.

We're going to rotate the text a little to create the tear, and this target icon represents the spot where
everything is going to rotate around. We don't want the letters to rotate around the center. We want them to
rotate from the top left corner, so to fix that, simply click on the target icon with your mouse and drag it up
to the top left corner. It will snap into place as you approach the corner:

Adobe Photoshop Text Effects: Click and drag the target icon into the top left corner of the Free Transform
box.

Once you've dragged the target icon to its new location, simply move your mouse anywhere outside of the
Free Transform box, then click and drag your mouse up or to the left to rotate the letters counterclockwise,
creating a tear through the first letter as I'm doing here:
Adobe Photoshop Text Effects: Rotate the letters by clicking and dragging your mouse outside of the Free
Transform box.

Press Enter or Return when you're happy with the tear you've created to accept the transformation. Here's
my text so far with a nice big tear through the letter "F":

Adobe Photoshop Text Effects: The letter "F" now has a large tear through it.

We're going to do the same thing with the rest of the letters next.

Step 8: Make A Jagged Selection Through The Second Letter, Then Select The Rest
Of The Word

With the Polygonal Lasso tool still selected, make another jagged selection, this time through the second
letter, then include the rest of the word to the right of the jagged line in your selection:
Adobe Photoshop Text Effects: Make a jagged selection through the second letter, then include the rest of
the word to the right of the jagged line in the selection.

Step 9: Cut The Selection Onto A New Layer

With your selection created, press Ctrl+Shift+J (Win) / Command+Shift+J (Mac) to cut the selection onto
a new layer:

Adobe Photoshop Text Effects: Press "Ctrl+Shift+J" (Win) / "Command+Shift+J" (Mac) to once again cut
the selection onto a new layer.

Step 10: Rotate The Letters Using The Free Transform Command

We're going to rotate the contents on the new layer once again, so press Ctrl+T (Win) / Command+T
(Mac) to bring up the Free Transform box and handles. This time, drag the center target icon down into the
bottom left corner so we can rotate the letters from the bottom left:
Adobe Photoshop Text Effects: Click and drag the target icon into the bottom left corner.

Then move your mouse anywhere outside of the Free Transform box and click and drag either down or to
the right to rotate the letters clockwise, creating a tear through the second letter:

Adobe Photoshop Text Effects: Rotate the letters clockwise this time to create a tear through the second
letter.

Press Enter (Win) / Return (Mac) to accept the transformation. Here's my text after tearing the second
letter:
Adobe Photoshop Text Effects: The text now has tears through the first and second letters.

Step 11: Repeat The Process For The Rest Of The Letters

Repeat the same steps for the remaining letters. First make a jagged selection through the letter with the
Polygonal Lasso tool, then include the rest of the word to the right of the jagged line in the selection. Press
Ctrl+Shift+J (Win) / Command+Shift+J (Mac) to cut the selection onto a new layer. Then press Ctrl+T
(Win) / Command+T (Mac) to bring up the Free Transform box and handles. Drag the center target icon
into either the top left or bottom left corner to rotate from that spot, then click and drag anywhere outside of
the Free Transform box to rotate the layer contents.

Here's my word "FEAR" after creating my tears through the remaining two letters. I rotated the "A" from the
top left and the "R" from the bottom left:

Adobe Photoshop Text Effects: The text after creating tears in all four letters.

Step 12: Merge All Text Layers Into One

Select all of your text layers in the Layers palette, first by clicking on the top layer to select it and then
Shift-clicking on the original text layer directly above the Background layer. This will select all your text
layers at once:
Adobe Photoshop Text Effects: Click on the top layer, then Shift-click on the original text layer above the
Background layer to select all text layers at once.

With all of your text layers selected, press Ctrl+E (Win) / Command+E (Mac) to merge them all onto one
layer. You should now have only two layers in the Layers palette:

Adobe Photoshop Text Effects: Press "Ctrl+E" (Win) / "Command+E" (Mac) to merge all text layers onto a
single layer.

Step 13: Add A Layer Mask To The New Merged Layer

We're going to add a layer mask to the new merged layer, but before we do, hold down your Ctrl (Win) /
Command key and click directly on the merged layer's thumbnail in the Layers palette to quickly select the
text in the Document Window:
Adobe Photoshop Text Effects: Select all of your text by holding down "Ctrl" (Win) / "Command" (Mac)
and clicking on the merged layer's thumbnail in the Layers palette.

You'll see a selection appear around your text. With your text now selected, click on the Add A Layer
Mask icon at the bottom of the Layers palette:

Adobe Photoshop Text Effects: With the text selected, click the "Add A Layer Mask" icon to add a layer
mask to the merged text layer.

You'll see the layer mask appear to the right of the merged text layer's thumbnail in the Layers palette, with
your text appearing in white and all of the empty area around it appearing in black:
Adobe Photoshop Text Effects: The layer mask appears to the right of the merged layer's thumbnail.

Step 14: Apply The "Spatter" Filter To The Layer Mask

We're going to give our text a nice worn look to it at this point using the "Spatter" filter. To do that, with the
layer mask selected, go up to the Filter menu at the top of the screen, choose Brush Strokes, and then
choose Spatter, which brings up Photoshop's massive Filter Gallery set to the Spatter options (circled in red
on the right):

Adobe Photoshop Text Effects: Go to Filter > Brush Strokes > Spatter to bring up the Filter Gallery set to
the Spatter options.

There's only two options for the Spatter filter, Spray Radius and Smoothness. Feel free to play around with
both sliders to see which settings work best for your text, which you can view in the large preview window
on the left of the Filter Gallery. I've just gone and dragged both slider bars all the way to the right to set both
options to their maximum values of 25 for the Spatter Radius and 15 for the Smoothness, which gives me
the effect I'm looking for:
Adobe Photoshop Text Effects: The text after applying the "Spatter" filter.

Step 15: Apply A Stroke To The Text To Complete The Effect

To finish things off, I'm going to add a stroke to my text. With my text layer selected, I'm going to click on
the Layer Styles icon at the bottom of the Layers palette:

Adobe Photoshop Text Effects: Click the Layer Styles icon at the bottom of the Layers palette.

Then I'll select Stroke from the list that appears:

Adobe Photoshop Text Effects: Select "Stroke" from the list of Layer Styles.

This brings up the Layer Style dialog box set to the Stroke options in the middle column. By default,
Photoshop uses a solid color for the stroke, but I'm going to use a gradient instead. To change it, click on the
down-pointing arrow to the right of the Fill Type option, then select Gradient from the list:
Adobe Photoshop Text Effects: Change the stroke's "Fill Type" from "Color" to "Gradient".

The Fill Type options will then change to options for the gradient. Click on the gradient preview area to
bring up Photoshop's Gradient Editor to choose new colors for the gradient:

Adobe Photoshop Text Effects: Click on the gradient preview area to bring up the Gradient Editor.

When the Gradient Editor appears, double-click on the black color marker on the bottom left of the
gradient preview bar in the middle of the Gradient Editor, which will bring up the Color Picker, and choose
a bright red color. Click OK to exit out of the Color Picker, then double-click on the white color marker on
the bottom right of the gradient preview bar. The Color Picker will re-appear. Choose a dark red color this
time, then click OK to once again exit out of the Color Picker. Here's my colors below:

Adobe Photoshop Text Effects: Choose a bright red for the color on the left of the gradient and and a dark
red for the color on the right.
Click OK to exit out of the Gradient Editor, then click OK to exit out of the Layer Style dialog box to apply
the stroke to the text (no need to make any other changes to the Stroke options), and you're done!

Here, with my gradient stroke applied, is my final "worn and torn" text effect:

Adobe Photoshop Text Effects: The final text effect result.

And there we have it!

Create A Fragmented Tiles Text Effect In


Photoshop
Free Adobe Photoshop Text Effects Tutorials At Photoshop
Essentials.com
Written By Steve Patterson

In this Photoshop text effects tutorial, we're going to learn how to create a "fragmented tiles" effect using
Photoshop's Tiles filter.

Here's the effect we're going for:


Let's get started.

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Looking for more Photoshop Text Effects tutorials? View our complete list here.

Step 1: Open A New Photoshop Document

Open a new Photoshop document by going up to the File menu at the top of the screen and choosing New...,
which brings up the New Document dialog box. Choose any size you wish for your document. I'll use the
preset 640x480 size:

Photoshop Tutorials: Create a new Photoshop document. I'm using the 640x480 preset size.

Step 2: Fill The Background Layer With Black

Press D on your keyboard to quickly reset Photoshop's foreground and background colors, which sets black
as your foreground color. Then use the keyboard shortcut Alt+Backspace (Win) / Option+Delete (Mac) to
fill the Background layer with black:
Photoshop Tutorials: The Photoshop document is now filled with black.

Step 3: Set Your Foreground Color To A Dark Color And Add Your Text

Click on the Foreground color swatch in the Tools palette:

Photoshop Tutorials: Click on the Foreground color swatch to change its color.

This will bring up Photoshop's Color Picker. We're going to choose a color for the text. You can choose
whichever color you like for your text, but whatever color that is, choose a dark shade of it to start with. I
want to use green for my color, so I'll choose a dark shade of green:
Photoshop Tutorials: Use Photoshop's Color Picker to select a dark shade of the color you want to use for
the text.

Once you've chosen your color, click OK to exit out of the Color Picker.

Select your Type tool from the Tools palette, or press the letter T on your keyboard to quickly select it:

Photoshop Tutorials: Select the Type tool from the Tools palette or press "T" on your keyboard.

Then, with the Type tool selected, go up to the Options Bar at the top of the screen and choose your font
and font size. This effect will work best with a large, thick font, so I'll use "Impact" for the tutorial. Then
click inside your document and enter your text. I'm going to type the word "digital" since I think this effect
has a bit of a digital-ish look to it:

Photoshop Tutorials: Click inside the document and enter your type.
Use the Move tool to center your text in the document, and resize the text if needed by using the keyboard
shortcut Ctrl+T (Win) / Command+T (Mac) to bring up Photoshop's Free Transform handles around your
text, then hold down Shift+Alt (Win) / Shift+Option (Mac) and drag any of the corner points. Holding Shift
constrains the text proportions, and holding Alt/Option causes the text to resize from the center. Press Enter
(Win) / Return (Mac) when you're done to accept the transformation.

Step 4: Rasterize The Text Layer

We're going to be applying one of Photoshop's filters to the text, but we can't do that without first converting
the text into pixels, which is known as "rasterizing" it. To do that, with the text layer selected in the Layers
palette, go up to the Layer menu at the top of the screen, choose Rasterize, and then choose Type. Nothing
will seem to have happened in the document, but if you look in your Layers palette, you'll see that the text
layer is now a normal layer:

Photoshop Tutorials: After rasterizing the type, the text layer is now a normal layer in the Layers palette.

Step 5: Duplicate The Text Layer

We need to create a duplicate of the layer with our text on it, so to do that, with the text layer selected, use
the keyboard shortcut Ctrl+J (Win) / Command+J (Mac). You'll now have a duplicate of the text layer in
the Layers palette:

Photoshop Tutorials: Press "Ctrl+J" (Win) / "Command+J" (Mac) to duplicate the text layer.
Step 6: Hide The Original Text Layer

With the copy of our text layer created, we're going to hide the original text layer from view by clicking on
its Layer Visibility icon (the "eyeball" icon) on the far left of the layer in the Layers palette:

Photoshop Tutorials: Hide the original text layer by clicking on its "Layer Visibility" (eyeball) icon.

You won't see any change in the document since the copy of the text layer is blocking the original text layer
from view, but if you look back in the Layers palette, you'll see that the eyeball icon has disappeared,
indicating that the layer is now hidden.

Step 7: Apply Photoshop's "Tiles" Filter Twice To The Text Copy Layer

With the text copy layer selected in the Layers palette, go up to the Filter menu at the top of the screen,
choose Stylize, and then choose Tiles. This brings up Photoshop's Tiles filter dialog box:

Photoshop Tutorials: Go to Filter > Stylize > Tiles to bring up the Tiles filter dialog box.

No need to change any of the options. Simply click OK to exit out of the dialog box and apply the filter to
the text. Then use the keyboard shortcut Ctrl+F (Win) / Command+F (Mac) to apply the same filter a
second time. Your text will now look something like this:
Photoshop Tutorials: The text after applying the Tiles filter.

Step 8: Select And Delete The White Areas In The Text

Grab the Magic Wand tool from the Tools palette, or press the letter W to quickly select it:

Photoshop Tutorials: Select the Magic Wand tool from the Tools palette, or press "W" on your keyboard.

Up in the Options Bar, make sure Contiguous is not checked, otherwise we'd have to select each white area
separately. Then click with the Magic Wand on any white area in the text and Photoshop will select all of
the white areas at once:

Photoshop Tutorials: Click on any white area with the Magic Wand to select all white areas inside the text.

With all the white selected, press Delete on your keyboard to delete those areas. Press Ctrl+D (Win) /
Command+D (Mac) to deselect your selection. Your text will now look something like this:
Photoshop Tutorials: The text after deleting the white areas.

Step 9: Duplicate The Original Text Layer And Move It To The Top Of The Layers
Palette

Click back on the original text layer to select it, then duplicate it using the keyboard shortcut Ctrl+J (Win) /
Command+J (Mac). Then click on the duplicate layer you just created and drag it to the top of the Layers
palette. You'll see a highlight bar appear along the top as you approach it. When you see that highlight bar,
release your mouse button and the layer will drop into place:

Photoshop Tutorials: Duplicate the original text layer and drag it to the top of the Layers palette.

Step 10: Click The Layer's Visibility Icon So It Appears In The Document

Since the original text layer is hidden from view, this new copy of it we've made is also hidden from view.
We need it to be showing in the document, so click on it's Visibility icon, which will cause the eyeball to re-
appear and the layer will now be visible:
Photoshop Tutorials: Click the layer's visibility icon to reveal the layer in the document.

Step 11: Make The Text A Lighter Shade Of The Color

Click back on the Foreground color swatch in the Tools palette to bring the Color Picker back up, then
choose a slightly lighter shade of your text color:

Photoshop Tutorials: Click on the Foreground color swatch once again and choose a slightly lighter shade of
your text color in the Color Picker.

Click OK to exit out of the Color Picker, then use the keyboard shortcut Shift+Alt+Backspace (Win) /
Shift+Option+Delete (Mac) to apply the color to the text:
Photoshop Tutorials: Press "Shift+Alt+Backspace" (Win) / "Shift+Option+Delete" (Mac) to apply the new
color to the text.

Step 12: Rotate The Canvas 90° CW

Go up to the Image menu at the top of the screen, choose Rotate Canvas, then choose 90° CW to rotate the
canvas 90° to the right:

Photoshop Tutorials: Rotate the canvas 90° clockwise.

Step 13: Apply The Tiles Filter Three Times To The Text

We're going to apply the Tiles filter again, this time to the new text layer. Since Tiles was the last filter we
applied, there's no need to select it again from the Filter menu. We can use the same keyboard shortcut
Ctrl+F (Win) / Command+F (Mac) to apply it, then press the keyboard shortcut two more times to apply
the filter a total of three times. Your text will now look something like this:
Photoshop Tutorials: The text after applying the Tiles filter twice.

Step 14: Select And Delete The White Areas

Use the Magic Wand once again to quickly select all the white areas in the text by clicking on any of the
white areas. Then press Delete to delete them, just as we did before. Press Ctrl+D (Win) / Command+D
(Mac) to deselect your selection. Your text will now look like this:
Photoshop Tutorials: The text after deleting the white areas once again.

Step 15: Duplicate The Original Text Layer Again And Move It To The Top Of The
Layers Palette

Click back on the original text layer again in the Layers palette and press Ctrl+J (Win) / Command+J
(Mac) to duplicate it. Then drag it to the top of the Layers palette:
Photoshop Tutorials: Duplicate the original text layer again and drag it to the top of the Layers palette.

Step 16: Click The Layer's Visibility Icon So It Appears In The Document

Our duplicate text layer is again hidden from view, so click on its Layer Visibility icon to make it appear in
the document:

Photoshop Tutorials: Click the layer's visibility icon to reveal the layer in the document.

Step 17: Choose A Lighter Shade Of Your Text Color Once Again

Again click on the Foreground color swatch in the Tools palette to bring up the Color Picker and choose a
lighter shade of your text color. Here I'm choosing an even lighter shade of green:
Photoshop Tutorials: Click once again on the Foreground color swatch and choose a lighter shade of your
text color.

Click OK to exit out of the Color Picker, then use the keyboard shortcut Shift+Alt+Backspace (Win) /
Shift+Option+Delete (Mac) again to apply the color to the text:

Photoshop Tutorials: Press "Shift+Alt+Backspace" (Win) / "Shift+Option+Delete" (Mac) to again apply the
new shade of green to the text.

Step 18: Rotate The Canvas 90° CW

Go back up to the Image menu, choose Rotate Canvas, then choose 90° CW to again rotate the canvas 90°
clockwise:
Photoshop Tutorials: Rotate the canvas 90° clockwise again.

Step 19: Apply The Tiles Filter Four Times To The Text

Apply the Tiles filter again, and this time apply it four times by using the keyboard shortcut Ctrl+F (Win) /
Command+F (Mac) four times. Your text will now look something like this:

Photoshop Tutorials: Apply the Tiles filter four times to the text.

Step 20: Select And Delete The White Areas

Once again, grab the Magic Wand and click on any of the white areas in the text, then press Delete to delete
the white areas. Press Ctrl+D (Win) / Command+D (Mac) to deselect your selection. Here's the text at this
point:
Photoshop Tutorials: The text after deleting the white areas once again.

Step 21: Duplicate The Original Text Layer Again And Move It To The Top Of The
Layers Palette

We're going to do the same steps all over again, so first click on the original text layer in the Layers palette
and press Ctrl+J (Win) / Command+J (Mac) to duplicate it, then drag it to the top of the Layers palette.
Click on its Layer Visibility icon so the layer is visible in the document:

Photoshop Tutorials: Duplicate the original text layer again, drag it to the top of the Layers palette and click
on its Layer Visibility icon so it appears in the document.

Step 22: Choose A Lighter Shade Of Your Text Color Once Again

Click back on the Foreground color swatch in the Tools palette and choose an even lighter shade of your text
color. Click OK to exit out of the Color Picker, then press Shift+Alt+Backspace (Win) /
Shift+Option+Delete (Mac) again to apply the color to the text:
Photoshop Tutorials: Choose an even lighter shade of your text color in the Color Picker and apply it to the
text.

Step 23: Again Rotate The Canvas 90° CW

Go back up to the Image menu, back to Rotate Canvas, then once again choose 90° CW to rotate the
canvas 90° clockwise:

Photoshop Tutorials: Rotate the canvas 90° clockwise once again.

Step 24: Apply The Tiles Filter Five Times To The Text

This time press the keyboard shortcut Ctrl+F (Win) / Command+F (Mac) five times to apply the Tiles
filter five times to the text:
Photoshop Tutorials: Apply the Tiles filter to the text five times.

Step 25: Select And Delete The White Areas

Click on any of the white areas again with the Magic Wand to select them, then delete them. Press Ctrl+D
(Win) / Command+D (Mac) to deselect your selection. Your text should look something like this:
Photoshop Tutorials: The text after deleting the white areas once again.

Step 26: Duplicate The Original Text Layer Again And Move It To The Top Of The
Layers Palette

Last time, I promise. Click on the original text layer and duplicate it once again with Ctrl+J (Win) /
Command+J (Mac). Then drag it to the top of the Layers palette and click on its Layer Visibility icon so it's
showing in the document:
Photoshop Tutorials: Duplicate the original text layer again, drag it to the top of the Layers palette and click
on its Layer Visibility icon so it appears in the document.

Step 27: Choose A Lighter Shade Of Your Text Color And Apply It To The Text

Again click on the Foreground color swatch in the Tools palette and choose an even lighter shade of the
color. Click OK to exit out of the Color Picker, then press Shift+Alt+Backspace (Win) /
Shift+Option+Delete (Mac) again to apply the color to the text:

Photoshop Tutorials: Choose an even lighter shade of the color and apply it to the text.

Step 28: Again Rotate The Canvas 90° CW To Bring It Full Circle

Go back up to the Image menu, back to Rotate Canvas, then once again choose 90° CW to rotate the
canvas 90° clockwise, finally bringing it full circle:
Photoshop Tutorials: Rotate the canvas 90° clockwise once again, bringing it full circle.

Step 29: Apply The Tiles Filter Six Times To The Text

This time press the keyboard shortcut Ctrl+F (Win) / Command+F (Mac) six times to apply the Tiles filter
six times to the text:

Photoshop Tutorials: Apply the Tiles filter to the text a total of six times.

Step 30: Select And Delete The White Areas

Click on any of the white areas again with the Magic Wand to select them, then delete them. Press Ctrl+D
(Win) / Command+D (Mac) to deselect your selection. Your text should look something like this:
Photoshop Tutorials: The text after deleting the white areas once again. Almost done.

Step 31: Add A Thin Black Stroke To The Top Text Layer

At this point, the basic effect is complete. I'm just going to finish it off by applying a thin black stroke
around the different tile fragments on the top text layer to help set them apart from the rest of the effect. To
do that, with the top text layer selected, click on the Layer Styles icon at the bottom of the Layers palette:

Photoshop Tutorials: With the top text layer selected, click on the "Layer Styles" icon at the bottom of the
Layers palette.

Choose Stroke from the list:


Photoshop Tutorials: Click on "Stroke" to select it from the list of Layer Styles.

This brings up the Layer Style dialog box set to the Stroke options in the middle column:

Photoshop Tutorials: Change the Stroke options circled in red.

Make the changes that I've circled in red above. First, change the Color of the stroke to black by clicking on
the color swatch and selecting black in the Color Picker. Lower the Size of the stroke to 1 pixel. Change the
Position of the stroke to Inside, and finally, lower the Opacity down to around 20%. We just want a faint
stroke, nothing heavy.

Click OK to exit out of the Layer Style dialog box, and you're done!

Here's the final "Fragmented Tiles" text effect:


Photoshop Tutorials: The final effect.

Create A Fun, Easy Gel Text Effect With Layer


Styles
Free Adobe Photoshop Text Effects Tutorials At Photoshop
Essentials.com
Written By Steve Patterson

In this Photoshop text effects tutorial, we're going to learn how to use Layer Styles to easily create a gel text
effect. The great thing is that you can have lots of fun playing around with the Layer Style settings to create
your own custom gel text effect, or if you prefer, you can use the settings I'm using in the tutorial. When
we're done creating the effect, we're going to save it as a preset style which we can then apply to other text
instantly, and at the end, we'll see how to change the color of the effect, which may not be quite as
straightforward as you think.

Here's the gel text effect we're going for:


Let's get started!

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Looking for more Photoshop Text Effects tutorials? View our complete list here.

Step 1: Open A New Photoshop Document

Go up to the File menu at the top of the screen and choose New... to bring up Photoshop's New Document
dialog box and enter a width and height for your document. I'm going to use a preset size of 640x480 pixels.
Click OK to create your new document:

Photoshop Tutorials: Create a new document in Photoshop.

Step 2: Choose A Color For Your Text

Select the Type tool from the Tools palette:


Photoshop Tutorials: Choose the Type tool from the Tools palette.

You can also press T on your keyboard to quickly select it. Then, with the Type tool selected, go up to the
Options Bar at the top of the screen and click on the text color swatch:

Photoshop Tutorials: With the Type tool selected, click on the text color swatch in the Options Bar.

This will bring up Photoshop's Color Picker. Choose a color for the text. I'm going to choose a light blue
for mine:

Photoshop Tutorials: Choose a color for your text with Photoshop's Color Picker.

Click OK once you've chosen a color to exit out of the Color Picker.

Step 3: Enter Your Text

Choose a font from the Options Bar. I'm using "Bauhaus 93". Then click inside your Document Window and
enter your text. I'm going to type the word "photo":
Photoshop Tutorials: Enter your text into the document.

Step 4: Use "Free Transform" To Resize The Text If Needed

I'm going to enlarge my text a little using Photoshop's Free Transform command. With my text layer
selected in the Layers palette, I'm going to use the keyboard shortcut Ctrl+T (Win) / Command+T (Mac) to
bring up the Free Transform box and handles around my text. Then I'm going to hold down Shift+Alt (Win)
/ Shift+Option (Mac) and drag out one of the corner handles to enlarge my text. Holding Shift constrains
the text proportions, and holding Alt/Option forces the text to resize from the center:

Photoshop Tutorials: Use Free Transform to enlarge the text if needed.


Step 5: Select The "Drop Shadow" Layer Style

We're going to head into the wacky world of Layer Styles at this point, and the first Layer Style we're going
to add to the text is a drop shadow.

Before we continue, I just want to say again that you should feel free to experiment with the different
settings we're using for this effect. You don't have to use the specific settings I'll be using. There's lots of
wiggle room to play around with in creating this gel text effect.

Now let's add our drop shadow. Click on the Layer Style icon at the bottom of the Layers palette:

Photoshop Tutorials: With the text layer selected, click on the "Layer Styles" icon at the bottom of the
Layers palette.

Select Drop Shadow from the list:

Photoshop Tutorials: Select "Drop Shadow" from the list of Layer Styles.

This brings up Photoshop's Layer Style dialog box set to the Drop Shadow options in the middle column:
Photoshop Tutorials: The Layer Style dialog box set to the Drop Shadow options in the middle column.

Step 6: Choose A Color For The Drop Shadow And Apply It

Click on the Drop Shadow color swatch:

Photoshop Tutorials: Click on the Drop Shadow's color swatch to choose a color.

This will bring up the Color Picker. Rather than choosing a color in the Color Picker, hover your mouse over
the text, which will turn your mouse cursor into the Eyedropper, and click on the text to sample its color:
Photoshop Tutorials: Click anywhere on the text to sample the color.

Then go to the Color Picker and select a darker shade of that color to use for the drop shadow:

Photoshop Tutorials: Select a different shade of the sampled color in the Color Picker to use for the drop
shadow.

Click OK to exit out of the Color Picker, and your drop shadow will appear in the color you selected:
Photoshop Tutorials: The drop shadow applied to the text using the color chosen in the Color Picker.

Don't click OK in the Layer Style dialog box yet. We've only just begun.

Step 7: Apply An "Inner Shadow" Layer Style

Click directly on the words Inner Shadow in the Layer Style menu on the left of the Layer Style dialog box,
directly below "Drop Shadow":

Photoshop Tutorials: Click directly on the words "Inner Shadow" below "Drop Shadow" in the menu on the
left of the Layer Style dialog box.

The first thing we're going to do here is select a color to use for the Inner Shadow, just as we did for the
Drop Shadow. Click on the Inner Shadow color swatch:

Photoshop Tutorials: Click on the Inner Style color swatch to choose a color.

This will bring up Photoshop's Color Picker. Just as we did with the Drop Shadow, rather than selecting a
color directly in the Color Picker, move your mouse over the text and click on it to sample the text color:
Photoshop Tutorials: Click anywhere on the text once again to sample the color.

Then select a darker shade of the color in the Color Picker to use for the Inner Shadow:

Photoshop Tutorials: Select a different shade of the sampled color in the Color Picker to use for the inner
shadow.

Click OK to exit out of the Color Picker once again. The inner shadow will appear in the color you selected:

Photoshop Tutorials: The Inner Shadow is now applied to the text using the color selected.
I'm going to increase the size of my Inner Shadow effect by clicking on the Size slider and dragging it to the
right. I'll increase mine to about 16 pixels:

Photoshop Tutorials: Increase the size of the Inner Shadow effect by dragging the "Size" slider to the right.

Here's the result after increasing the Inner Shadow size:

Photoshop Tutorials: The effect so far after increasing the Inner Shadow size to 16 pixels.

Want a better way to learn? Download this tutorial as

Step 8: Apply An "Outer Glow" Layer Style

Click directly on the words Outer Glow in the Layer Style menu on the left of the Layer Style dialog box,
directly below "Inner Shadow":
Photoshop Tutorials: Click directly on the words "Outer Glow" in the menu on the left of the Layer Style
dialog box.

Once again, the first thing we're going to do is select a color for our Outer Glow, the same way we've done it
for the Drop Shadow and Inner Glow. First, click on the Outer Glow color swatch:

Photoshop Tutorials: Click on the Outer Glow color swatch to choose a color.

This brings up the Color Picker. Click directly on the text once again to sample the color. Then go back to
the Color Picker, but this time, rather than choosing a darker shade of the color, choose a lighter shade:
Photoshop Tutorials: Choose a lighter shade of the text color this time to use for the Outer Glow effect.

Click OK to exit out of the Color Picker.

With my color applied, I'm going to change a few of the other Outer Glow options. Again, feel free to
experiment here on your own, but if you want to follow along, here's the settings I'm using. First, lower the
Opacity value at the top to around 60%. Then, in the "Elements" section in the middle, increase the Spread
to around 15% and the Size to about 10 pixels:

Photoshop Tutorials: Make the changes circled in red above to the Outer Glow options.

Here's my result after making the changes:


Photoshop Tutorials: The effect so far after applying the "Outer Glow" layer style.

Step 9: Apply An "Inner Glow" Layer Style

Click directly on the words Inner Glow in the Layer Style menu on the left of the Layer Style dialog box,
directly below "Outer Glow":

Photoshop Tutorials: Click directly on the words "Inner Glow" in the menu on the left of the Layer Style
dialog box.

What are we going to do first? Yep, we're going to pick a color to use for the Inner Glow. Go ahead and
click on the Inner Glow color swatch:

Photoshop Tutorials: Click on the Inner Glow color swatch to choose a color.

This brings up the Color Picker. This time, rather than clicking on the text color itself and then selecting a
darker shade in the Color Picker, just click on one of the darker areas in the text. We'll use that color for the
Inner Glow:
Photoshop Tutorials: Click on a darker color in the text to sample it and use it for the Inner Glow effect.

Click OK in the Color Picker to exit out of it once you've sampled your color.

We have our darker color selected, but by default, the blend mode for the Inner Shadow is set to "Screen",
which means we're not going to see our darker color. Basically, we need to change the effect from an inner
"glow" to an inner "shadow", and for that, all we need to do is change the blend mode from "Screen" to
Multiply:

Photoshop Tutorials: Click on the down-pointing arrow and change the blend mode for the Inner Glow
effect to "Multiply".

I'm going to change a few other options here as well for the Inner Glow. First, I'm going to lower the
Opacity value to around 50%. Then, in the "Elements" section in the middle, I'm going to raise the Choke
value to about 10% and the Size value to 13 pixels:
Photoshop Tutorials: Change the options circled in red above for the Inner Glow.

Again, feel free to experiment with those values on your own.

Here's my effect so far with the Inner Glow applied:

Photoshop Tutorials: The effect after applying the Inner Glow layer style.

Step 10: Apply The "Bevel and Emboss" Layer Style

We're going to add the Bevel and Emboss style next, so click directly on the words Inner Glow in the Layer
Style menu on the left of the Layer Style dialog box, directly below "Inner Glow":

Photoshop Tutorials: Click directly on the words "Bevel and Emboss" in the menu on the left of the Layer
Style dialog box.

This time there's no colors to choose. Instead, there's a few options that need to be changed. I know I've
already said it a few times, but you don't need to use these specific settings for your effect. In fact, you'll
probably need to play around with them a little if you're using a different font type or size. However, having
said that, here's the settings I've used in the Bevel and Emboss options:
Photoshop Tutorials: Change the options circled in red above.

First, I increased the Size to about 16 pixels. Then, in the "Shading" section, I unchecked Use Global Light,
set the Angle to 90° and set the Altitude to 75°. Then, at the very bottom, I dragged the slider bar for the
Shadow Mode option all the way to the left to set its value to 0%, since we already have more than enough
shadows in the effect.

We're going to add the "Contour" effect in here as well, so click directly on the word Contour in the menu
on the left. It's below "Bevel and Emboss":

Photoshop Tutorials: Click directly on the word "Contour" in the left menu.

In the Contour options, click on the down-pointing arrow to the right of the Contour preview thumbnail,
then click on the Half Round option to select it (it's the first one on the left, bottom row):
Photoshop Tutorials: Click the down-pointing arrow and select the "Half Round" contour, bottom row, far
left.

Here's my text after applying the Bevel and Emboss filter:

Photoshop Tutorials: The effect after applying the "Bevel and Emboss" style.

Step 11: Apply The "Satin" Layer Style

One more layer style to apply, and it's the "Satin" style, so click directly on the word Satin in the Layer
Style menu on the left of the Layer Style dialog box, directly below "Texture":

Photoshop Tutorials: Click directly on the word "Satin" in the menu on the left of the Layer Style dialog
box.

We're back to choosing a color once again, this time for the Satin effect, so click on the Satin color swatch:
Photoshop Tutorials: Click the color swatch to choose a color for the Satin layer style.

Then click in the text to sample a darker shade of the text color. If the colors in your text turned strange
when you clicked on the word "Satin" in the menu on the left, don't worry. Just click once anywhere on the
text and the colors will revert back to the way they should be. Then click on any darker area to sample that
color:

Photoshop Tutorials: Click in a darker area of the text to sample that color to use with the Satin layer style.

As soon as you click your mouse to sample a color, you'll see the Satin effect apply itself using that color. If
you want, you can keep clicking around inside the text to choose a different color, and the Satin effect will
be updated each time you click, so you can keep clicking until you find a dark shade you're happy with. It's
basically a live preview of the effect.

Once you have your color selected, click OK in the Color Picker to exit out of it, then make the changes I've
circled below:
Photoshop Tutorials: Change the Satin options circled in red above.

In the case of the Satin effect, you're really going to want to experiment with these settings yourself, but for
the sake of following along, first I changed the Angle to 75°. Then I increased the Distance to 43 pixels and
the Size to 54 pixels. Finally, I clicked on the down-pointing arrow to the right of the Contour preview
thumbnail and chose the Ring contour, which is the second one from the left, bottom row.

Here's my text after applying the Satin filter:

Photoshop Tutorials: The effect after applying the "Satin" style.

Step 12: Save The Layer Style

We're done adding layer styles at this point, but before you close out of the Layer Style dialog box, click the
New Style button on the right:
Photoshop Tutorials: Click the "New Style" button on the right.

We're going to save this gel effect style so that we can re-use it whenever we want. When you click the
button, Photoshop pops up the New Style dialog box. I'm going to name my new style "Gel effect":

Photoshop Tutorials: Photoshop's "New Style" dialog box. Name the new style "Gel effect".

Then I'll click OK and I now have my style saved in Photoshop. Let's see how we can instantly apply it to
something else.

Since I already have the word "photo" entered into my document window, I'm going to grab my Type tool
once again from the Tools palette and this time, I'll enter the word "shop" below it. I'm also going to use the
Free Transform command to resize it so it's the same size as the word "photo", and I'm going to rotate it as
well. Here's what it looks like at the moment:

Photoshop Tutorials: Click in a darker area of the text to sample that color to use with the Satin layer style.
Right now, the word "shop" is using nothing more than the original text color, but I want it to have the same
"gel effect" I created with the word "photo". I could go through all the steps again and re-create the layer
style, but thankfully, I don't have to because I was smart enough to save the effect as a new style. Where can
I find the style? It's in Photoshop's Styles palette, located at the very bottom:

Photoshop Tutorials: Photoshop's "Styles" palette with my saved "Gel effect" style at the bottom of the list
of available preset styles.

To apply it to my text, all I have to do is make sure I have the "shop" text layer selected in the Layers
palette, and then click on the "Gel effect" style in the Styles palette. The effect is instantly added to the text:

Photoshop Tutorials: The "Gel effect" style is instantly applied to the new text.

What if I wanted the word "shop" to be a different color though? It's easy to change the color, but there's a
bit of a trick to it, as we'll see next.

Step 13: Changing The Color Of The Gel Text Effect

We're done creating the "gel" effect using layer styles, we've saved it as a new style named "Gel effect", and
we've instantly applied it to the word "shop". But what if I want the word "shop" to be a different color?
You're probably thinking "Easy, just use a Hue/Saturation adjustment layer". So let's try that and see if it
works.

I'll use Hue/Saturation to change the color of the word "shop" from blue to pink. Here's the result:
Photoshop Tutorials: The word "shop" is now pink after applying "Hue/Saturation".

The word itself has turned pink, but do you see the problem? The layer styles are still blue. The
Hue/Saturation adjustment had no effect on them. If we want to change both the text color and the layer
styles color, we need to use a bit of a trick.

With the "shop" layer still selected in the Layers palette, use the keyboard shortcut Ctrl+G (Win) /
Command+G (Mac) to place the "shop" layer into a Layer Group, which Photoshop names "Group 1":

Photoshop Tutorials: Press "Ctrl+G" (Win) / "Command+G" (Mac) to place the "shop" layer into a Layer
Group.

We can see in the Layers palette above that the "shop" layer is now inside the Layer Group. Next, we need
to change the blend mode for the Layer Group from its default of "Pass Through" to Normal:
Photoshop Tutorials: With the Layer Group selected, change its blend mode from "Pass Through" to
"Normal".

Now click on the "shop" layer to select it and then click on the New Adjustment Layer icon at the bottom
of the Layers palette:

Photoshop Tutorials: With the "shop" layer selected, click on the "New Adjustment Layer" icon at the
bottom of the Layers palette.

Select Hue/Saturation from the list:


Photoshop Tutorials: Select "Hue/Saturation" from the list of Adjustment Layers.

When the Hue/Saturation dialog box appears, drag the Hue slider to change the color of the text:

Photoshop Tutorials: Change the color of the text by dragging the "Hue" slider.

Keep an eye on your text in the Document Window as you're dragging the slider. When you're happy with
the new color, click OK to exit out of the Hue/Saturation dialog box, and this time, because the "shop" layer
was placed inside a Layer Group, the layer styles are now colored along with the text itself:
Photoshop Tutorials: The final result.

And there we have it!

Photoshop Text Effects: Gold Plated Text


Learn Photoshop with Free Photoshop Text Effects Tutorials at
Photoshop Essentials.com
Written By Steve Patterson

In this Photoshop text effects tutorial, we're going to learn how to turn text into gold using Photoshop's
Layer Styles. We'll even throw in some sparkles at the end to make our gold letters really shine.

Here's the effect we're going for:

Let's get started.


Need A Printable Version Of This Tutorial? Get Unlimited Access To Our Print-Ready PDF eBooks!

Step 1: Open A New Photoshop Document

Open a new document in Photoshop by going up to the File menu and choosing New..., or by using the
keyboard shortcut, Ctrl+N (Win) / Command+N (Mac). I'm just going to use the 640x480 preset size. You
can use whichever size you like for your width and height, and then click OK to create your new Photoshop
document:

Adobe Photoshop Text Effects: Create a new document in Photoshop. I'm using the 640x480 preset size.

Step 2: Fill The Background Layer With Black

Press D on your keyboard to quickly reset Photoshop's foreground and background colors, which sets black
as your foreground color. Then use the keyboard shortcut Alt+Backspace (Win) / Option+Delete (Mac) to
fill the Background layer with black:
Adobe Photoshop Text Effects: The Background layer now filled with black.

Step 3: Set Your Foreground Color To White And Add Your Text

Press X on your keyboard to swap your foreground and background colors so white becomes your
foreground color. Select your Type tool from the Tools palette or by pressing T on your keyboard. Choose a
font from the Options Bar at the top of the screen, then click inside the Document Window and enter your
text. I'm using "Times New Roman Bold" here to keep things simple if you want to follow along. I'll enter
the word "GOLD":
Adobe Photoshop Text Effects: Set your foreground color to white and enter your text.

Step 4: Resize Your Text With The Free Transform Command

The text is too small at this point, so with the text layer selected in the Layers palette, use the keyboard
shortcut Ctrl+T (Win) / Command+T (Mac) to bring up Photoshop's Free Transform box and handles
around the text. Hold down Shift+Alt (Win) / Shift+Option (Mac) to have Photoshop constrain the text
proportions and resize the text from the center as you drag out any of the corner handles to enlarge the text:

Adobe Photoshop Text Effects: Resize the text with Free Transform.

Press Enter (Win) / Return (Mac) when you're done to accept the transformation.

Step 5: Duplicate The Text Layer

Use the keyboard shortcut Ctrl+J (Win) / Command+J (Mac) to quickly duplicate the text layer. You
should now have three layers in your Layers palette:
Adobe Photoshop Text Effects: Photoshop's Layers palette now showing three layers.

We're going to be working on the text copy layer throughout the next few steps.

Step 6: Add A Gradient Overlay To The Text

With the text copy layer selected, click on the Layer Styles icon at the bottom of the Layers palette:

Adobe Photoshop Text Effects: Click the Layer Styles icon at the bottom of the Layers palette.

Select Gradient Overlay from the list:


Adobe Photoshop Text Effects: Select the Gradient Overlay layer style from the list.

This brings up the Layer Style dialog box set to the Gradient Overlay options:

Adobe Photoshop Text Effects: Photoshop's Layer Style dialog box set to the "Gradient Overlay" options.

We're going to set the colors for our gradient, so click directly on the gradient preview area (circled in red
above) to bring up the Gradient Editor.

Step 7: Select A Lighter And Darker Gold Color For The Gradient

When the Gradient Editor appears, click on the left color marker to select it, and then click on the Color
swatch to choose a color for the left side of the gradient:
Adobe Photoshop Text Effects: Click on the left color marker in the Gradient Editor, then click the Color
swatch.

This brings up Photoshop's Color Picker. You can use whichever gold colors you prefer, but if you want to
follow along, I've entered a color of R:247, G:238, B:173 which gives us a light gold color (I cheated and
sampled the color from a photo of a gold coin):

Adobe Photoshop Text Effects: Enter R:247, G:238, B:173 for the left gradient color.

Click OK to accept the color and exit out of the Color Picker. Then, back in the Gradient Editor, click on the
right color marker to select it, and then click back on the Color swatch:
Adobe Photoshop Text Effects: Click on the right color marker, then click back on the Color swatch.

When the Color Picker comes back up, enter R:193, G:172, B:81 to give us a darker gold color (also
sampled from the gold coin):

Adobe Photoshop Text Effects: Enter R:193, G:172, B:81 for the right gradient color.

Click OK to exit out of the Color Picker once again, and click OK to exit out of the Gradient Editor as well.

Your text should now look like this:


Adobe Photoshop Text Effects: The gradient colors applied to the text.

Don't exit out of the Layer Style dialog box yet. We have more to do.

Step 8: Change The Gradient "Style" To "Reflected"

Back in the Gradient Overlay options in the Layer Style dialog box, click on the down-pointing arrow to the
right of the word "Linear" and change the Style of the gradient to Reflected:

Adobe Photoshop Text Effects: Change the gradient style from "Linear" to "Reflected".

This will add the darker gold color to both the top and bottom of the text, leaving the lighter color in the
middle:
Adobe Photoshop Text Effects: The text after changing the gradient style.

Step 9: Select The "Bevel and Emboss" Options

Click directly on the words "Bevel and Emboss" in the layer styles menu along the left of the Layer Style
dialog box to switch to the Bevel and Emboss options. Make sure you click directly on the words
themselves, not just in the little box beside them, otherwise the options won't appear:

Adobe Photoshop Text Effects: Click directly on the words "Bevel and Emboss" in the menu on the left.

Step 10: Change The "Technique" To "Chisel Hard"

In the Bevel and Emboss Structure options in the middle of the Layer Style dialog box, click on the down-
pointing arrow to the right of the word "Smooth" and change the Technique to Chisel Hard:
Adobe Photoshop Text Effects: Change the "Technique" from "Smooth" to "Chisel Hard".

Step 11: Change The "Gloss Contour" To "Ring Double"

In the Shading options below the Structure options, click on the down-pointing arrow to the right of the
word "Gloss Contour" and select Ring - Double, which is on the bottom row, third from the left:

Adobe Photoshop Text Effects: Change the "Gloss Contour" to "Ring Double".

Select the Anti-Aliased option as well to prevent our text from getting the "jaggies".

Here's the text at this point:

Adobe Photoshop Text Effects: The effect so far.


Step 12: Increase The Structure "Size" To Close Up The Open Space Inside The
Letters

Go back up to the Structure options at the top of the Layers styles dialog box and drag the Size slider bar to
the right until you've closed up the open spaces inside the letters. Here I've dragged mine to a value of 16
pixels:

Adobe Photoshop Text Effects: Drag the "Size" slider to the right until you've closed up the open spaces
inside the letters.

The open spaces are now gone:

Adobe Photoshop Text Effects: After dragging the "Size" slider to the right, the open spaces inside the
letters have been removed.

Step 13: Increase The Structure "Depth" To Enhance The Lighting Effect

Next, drag the Depth slider to the right to enhance the lighting effect on the letters. I've dragged mine to a
value of 171%:

Adobe Photoshop Text Effects: Drag the "Depth" slider to the right to enhance the lighting effect on the
letters.
Now things are starting to look good:

Adobe Photoshop Text Effects: The effect after increasing the "Depth".

Step 14: Turn On The "Contour" In The Layer Style Menu

Next, click inside the checkbox to the left of the word Contour on the left of the Layer Style dialog box,
directly below the "Bevel and Emboss" option. This will enhance our gold effect even further. There's no
need to change any options for it, so just click inside the checkbox to enable it:

Adobe Photoshop Text Effects: Click inside the "Contour" checkbox to enable it without viewing its
options.

Here's the text with "Contour" enabled:


Adobe Photoshop Text Effects: The effect with the "Contour" option enabled.

Step 15: Add An Inner Glow

One last thing to do here before we exit out of the Layer Style dialog box and switch to the original text
layer. We're going to add an Inner Glow effect to enhance our gold colors. To do that, click directly on the
words Inner Glow on the left of the Layer Style dialog box to enable it and bring up its options:

Adobe Photoshop Text Effects: Select the "Inner Glow" layer style. Click directly on its name to bring up
the options for it.

Change the options that I've circled here:

Adobe Photoshop Text Effects: The "Inner Glow" options.

First, change the Blend Mode to Multiply. Then lower the Opacity to 50%. Click on the color swatch
directly below the word "Noise", which brings up the Color Picker. Enter R:232, G:128, B:31 to give us an
orange color (this one was sampled from a photo of a gold brick) and click OK to exit out of the Color
Picker. Finally, increase the glow Size to 15 pixels.

When you're done, you can click OK to exit out of the Layer Style dialog box. Your text should now look
something like this:

Adobe Photoshop Text Effects: The text after applying the "Inner Glow" layer style.

Step 16: Add A Stroke To The Original Text Layer

We're done with the text copy layer at this point. Now we're going to work on the original text layer, so click
on it in the Layers palette to select it. We're going to head back to the Layer Style dialog box once again, so
click on the Layer Styles icon at the bottom of the Layers palette:

Adobe Photoshop Text Effects: With the original text layer selected, click on the "Layer Styles" icon at the
bottom of the Layers palette.

This time, select Stroke at the bottom of the list:


Adobe Photoshop Text Effects: Select the "Stroke" layer style from the list.

This will bring the Layer Style dialog box back up, set to the Stroke options. Change the options that I've
circled below:

Adobe Photoshop Text Effects: The "Stroke" layer style options.

First, increase the stroke Size to 5 pixels. Then change the Fill Type from "Color" to Gradient. We're going
to be using the same gradient colors for the stroke that we used on the text. Before we go setting gradient
colors though, change the gradient Style to Reflected.

Step 17: Set The Stroke Gradient To The Same Colors As The Text

Click directly on the gradient preview area in the Stroke options:


Adobe Photoshop Text Effects: Click on the gradient preview area.

This will once again bring up the Gradient Editor. Set the colors for the gradient to the same colors we
used on the text. For the left color, use R:247, G:238, B:173, and for the color on the right, use R:193,
G:172, B:81. Click OK to exit out of the Gradient Editor once you've set the colors, and your text should
look like this:

Adobe Photoshop Text Effects: The gradient stroke applied to the text.

Step 18: Apply The "Bevel and Emboss" Style To The Stroke

Click directly on the words Bevel and Emboss in the menu on the left of the Layer Style dialog box to once
again enable it and bring up its options. This time, rather than adding a bevel and emboss style to the text,
we're going to add it to the stroke. Change the options that I've circled below:
Adobe Photoshop Text Effects: The "Bevel and Emboss" options to apply to the stroke.

First, in order to apply these settings to the stroke, we need to change the top option, Style to Stroke
Emboss. Now all of these settings will be applied to our stroke. Change the Technique to Chisel Hard once
again. Set the Size to 5 pixels. In the "Shading" section, click on the down-pointing arrow to the right of the
words Gloss Contour and once again select that Ring - Double option, which is the third one from the left
on the bottom row. Finally, over on the left in the menu area, once again click inside the Contour checkbox
to enable it.

After applying the Bevel and Emboss style to the stroke, your text should now look like this:

Adobe Photoshop Text Effects: The effect after applying the "Bevel and Emboss" style to the stroke around
the text.

Step 19: Apply The "Outer Glow" Style

One last thing to do here in the Layer Styles dialog box. We're going to add a bit of a glow to the text, as if
some light was reflecting off the gold. Click directly on the words Outer Glow in the menu on the left to
turn on the Outer Glow style and bring up its options, then change the options I've circled below:
Adobe Photoshop Text Effects: The options for the Outer Glow layer style.

First, lower the Opacity value to 50%. Then click on the color swatch directly below the word "Noise",
which brings up Photoshop's Color Picker. Enter in R:183, G:145, G:79 for the color (another gold brick
photo sample) and click OK to exit out of the Color Picker. Finally, set the Size to around 29 pixels, and
then click OK to exit out of the Layer Styles dialog box.

The text now has a faint glow around it:

Adobe Photoshop Text Effects: The text now with a faint glow around it.

One thing left to do...

Step 20: Add A New Blank Layer Above The Text Copy Layer

Click on the text copy layer in the Layers palette to select it, then press the keyboard shortcut Ctrl+Shift+N
(Win) / Command+Shift+N (Mac) to bring up the New Layer dialog box. Name the new layer "sparkles",
and click OK:
Adobe Photoshop Text Effects: Photoshop's "New Layer" dialog box. Name the new layer "sparkles" and
click OK.

We now have our new blank layer in the Layers palette:

Adobe Photoshop Text Effects: Photoshop's Layers palette now showing our new "sparkles" layer at the top.

Step 21: Load The "Assorted Brushes"

We're going to add some sparkles to our gold text to really make it shine, and we're going to use a brush for
that. But first, we need to load in some new brushes. Grab the Brush tool from the Tools palette or press B
on your keyboard to quickly select it. Then right-click (Win) / Control-click (Mac) anywhere inside the
Document Window to bring up the Brush options menu, and click on the small right-pointing arrow in the
top right corner:
Adobe Photoshop Text Effects: Click the small arrow in the top right corner of the Brush menu.

Click on the Assorted Brushes in the long list that appears to select them:

Adobe Photoshop Text Effects: Click on "Assorted Brushes" in the list that appears.

Photoshop will ask you if you want to replace the current brushes with these new brushes or simply append
them to the existing ones. Click Append:

Adobe Photoshop Text Effects: Click "Append" to add the new brushes to the existing ones.

Step 22 Sample A Light Gold Color From The Text With The Eyedropper Tool

Grab the Eyedropper tool from the Tools palette or press I to quickly select it, and then click on one of the
lightest areas in the text to sample that color. We're going to use that color for our sparkles:
Adobe Photoshop Text Effects: Sample a light gold color from the text with the Eyedropper tool.

Step 23: Select One Of The "Crosshatch" Brushes To Use As A Sparkle

With your light gold color sampled, switch back to your Brush tool again, and then once again right-click
(Win) / Control-click (Mac) anywhere inside the Document Window to bring up the Brush options menu.
Scroll down the list of available brushes until you come across one that looks like a fancy "X". If you have
Tool Tips turned on in your Photoshop Preferences, you'll see that the brush is named "Crosshatch", as we
can see here:

Adobe Photoshop Text Effects: Choose one of the "Crosshatch" brushes (which looks like an "X") to use for
the sparkles.

Step 24: Paint A Few Randomly Placed Sparkles Around The Text

With your brush selected and your sampled color ready to go, click in a few random locations around the
text to add some sparkles. Change the brush size after each click to add even more randomness by using the
right and left bracket keys to increase or decrease the brush size on the fly. Adding sparkles is fun, but too
many is too many, so only add a few. A couple of larger ones and a couple of smaller ones should do it.

If you find your sparkles look too intense, lower the opacity of the "sparkles" layer. Here I've lowered mine
down to 50%:
Adobe Photoshop Text Effects: Lower the opacity of the "sparkles" layer to reduce their intensity.

Once you've added your sparkles and lowered the opacity to your liking, you've completed the gold lettering
effect!

Here's my final "Gold-Plated Text" effect result:

Adobe Photoshop Text Effects: The final effect.

Photoshop Tutorials: Colorful Light Burst Text


Learn Adobe Photoshop with Photoshop Tutorials at Photoshop
Essentials.com
Written By Steve Patterson
In this Adobe Photoshop tutorial, we're going to see how to engulf text in an explosion of light and color.

There's quite a few steps involved in this text effect, and we'll be using a couple of filters that are not used
very often in everyday Photoshop work, but creating the text effect is quite simple and the end result is
definitely worth the effort.

Here's the text effect we're going for:

Let's get started.

Need A Printable Version Of This Tutorial? Get Unlimited Access To Our Print-Ready PDF eBooks!

Step 1: Open A New Photoshop Document

Open a new document in Photoshop by going up to the File menu and choosing New..., or by using the
keyboard shortcut, Ctrl+N (Win) / Command+N (Mac). You can choose your own width and height for your
document, but if you want to follow along, I chose the 640x480 size from the list of available presets to keep
things simple. I've also left my Resolution value set to its default of 72 pixels/inch. Since I'm creating this
text effect for the web, it makes no difference what I set the resolution value to, so the default value is fine:
Photoshop Tutorials: Create a new document in Photoshop. To follow along, use the "640x480" preset size.

Step 2: Add Your Text

With your new blank document open, grab the Type tool from the Tools palette or by pressing T on your
keyboard. Make sure black is selected as your foreground color. If it isn't, just press D on your keyboard to
reset it to black. Choose your font in the Options Bar at the top of the screen. Thick, heavy fonts work best
for this effect. Then, go ahead and enter your text. I'm going to use "Impact", and I'll type the words
"LIGHT BURST":

Photoshop Tutorials: Choose a thick, heavy font, and with black as your foreground color, enter your text.
Step 3: Resize Your Text With Free Transform

With your text layer selected in the Layers palette, use the keyboard shortcut Ctrl+T (Win) / Command+T
(Mac) to bring up the Free Transform box and handles around your text. Hold down Shift+Alt (Win) /
Shift+Option (Mac) and drag out any of the corner handles to make your text larger and fill up more of the
document area. Holding Shift constrains the text proportions, and holding Alt/Option resizes the text from
the center:

Photoshop Tutorials: Resize the text with Photoshop's "Free Transform" command.

Make sure to still leave plenty of room around the text for our light burst effect. Press Enter (Win) / Return
(Mac) when you're done to accept the transformation.

Step 4: Rasterize Your Text

We're going to be applying several filters to our text, but Photoshop doesn't allow us to do that without first
rasterizing it, which simply means to convert it into pixels. So again with the text layer selected, go up to the
Layer menu at the top of the screen, choose Rasterize, and then choose Type. This will convert our text
into pixels. It will still look the same in the document window, but in the Layers palette, the Type layer will
now be a regular layer:
Photoshop Tutorials: After rasterizing the text, the Type layer in the Layers palette becomes a normal layer.

Step 5: Add A Selection Around Your Text And Save It

Ctrl-click (Win) / Command-click (Mac) directly on the thumbnail preview area of the text layer in the
Layers palette to quickly load a selection around your text:

Photoshop Tutorials: "Ctrl-click" (Win) / "Command-click" (Mac) directly on the text thumbnail in the
Layers palette.

Your text will now have a selection around it:


Photoshop Tutorials: The text is now selected.

With the text selected, go up to the Select menu at the top of the screen and choose Save Selection. When
the Save Selection dialog box appears, just click OK. There's no need to name it or make any changes to the
options.

Once you've saved your selection, press Ctrl+D (Win) / Command+D (Mac) to deselect your text.

Switch over to your Channels palette for a moment (it's grouped in beside the Layers palette) and you'll see
your selection saved as a new channel named "Alpha 1" at the very bottom. We'll be coming back here a bit
later to load our selection again:
Photoshop Tutorials: The selection is now saved as a new channel, "Alpha 1", in Photoshop's Channels
palette.

Step 6: Use "Fill" To Fill Your Text Layer With White And Set The Blend Mode To
"Multiply"

Switch back to your Layers palette once again, and with the text layer selected, go up to the Edit menu at
the top of the screen and choose Fill, or press Shift+F5 on your keyboard to quickly bring up Photoshop's
Fill dialog box. When the dialog box appears, set the Contents to White and change the Blending Mode to
Multiply:

Photoshop Tutorials: Photoshop's "Fill" dialog box".

Click OK when you're done. Nothing will seem to have happened in your document window, but if you look
at your text layer's thumbnail in the Layers palette, you'll see that all of the empty space around the text has
now been filled with white, while leaving the text black thanks to that "Multiply" mode.
Step 7: Apply The Gaussian Blur Filter To The Text

Go up to the Filter menu at the top of the screen, choose Blur, and then choose Gaussian Blur. When the
Gaussian Blur dialog box appears, enter a Radius value of about 4 pixels and click OK to apply a slight
blurring to the text:

Photoshop Tutorials: Apply the Gaussian Blur filter to the text.

Here's the text after applying Gaussian Blur:

Photoshop Tutorials: The text is now blurred slightly.


Step 8: Apply The "Solarize" Filter To The Text

With the text layer still selected, go back up to the Filter menu and this time choose Stylize, and then
choose Solarize. This will turn the document black, and your text will appear as a white stroke:

Photoshop Tutorials: The image after applying the Solarize filter.

Step 9: Lighten The Text With Levels

The text is looking a little dark, so let's lighten it. Use the keyboard shortcut Ctrl+L (Win) / Command+L
(Mac) to bring up Photoshop's Levels command, and drag the white point slider on the right in towards the
left until you reach the right edge of the histogram:
Photoshop Tutorials: With the Levels dialog box open, grab the white point slider on the right and drag it to
the right edge of the histogram to brighten the text.

Click OK. The text will now appear much brighter:

Photoshop Tutorials: The text is now much brighter after applying Levels.

Step 10: Make A Copy Of The Text Layer

We need to make a copy of the text layer at this point, so to do that, with the text layer selected, use the
keyboard shortcut Ctrl+J (Win) / Command+J (Mac), which will add a copy of the layer above it in the
Layers palette:

Photoshop Tutorials: The Layers palette now showing both the text layer and the copy above it.
Make sure the copy of the text layer is selected because all of these next steps are to be done on the copy.
We won't be touching the original again until near the end.

Step 11: Apply The "Polar Coordinates" Filter To The Text

Go back up to the Filter menu, and this time choose Distort, and then Polar Coordinates. We're going to
send our text to the North Pole. Alright, no we're not. What we are going to do is make it look very strange.
When the Polar Coordinates dialog box appears, select the Polar To Rectangular option at the very bottom
and then click OK:

Photoshop Tutorials: Photoshop's "Polar Coordinates" dialog box.

Your text will now look very strange indeed:


Photoshop Tutorials: The text after applying the "Polar Coordinates" filter.

Step 12: Rotate The Canvas 90 Degrees Clockwise

Go up to the Image menu at the top of the screen, select Rotate Canvas, and then choose 90° CW to rotate
the canvas 90 degrees clockwise:

Photoshop Tutorials: Rotate the canvas 90 degrees clockwise.

Step 13: Invert The Image

Use the keyboard shortcut Ctrl+I (Win) / Command+I (Mac) to invert the image, so black becomes white
and white becomes black:
Photoshop Tutorials: Invert the image with "Ctrl+I" (Win) / "Command+I" (Mac).

Step 14: Apply The "Wind" Filter Three Times

Go back up to the Filter menu once again, choose Stylize, and then choose Wind. When the Wind filter's
dialog box appears, make sure Method is set to Wind and Direction is set to From the Right:

Photoshop Tutorials: Photoshop's "Wind" filter.


Click OK to apply the Wind filter once. Then press the keyboard shortcut Ctrl+F (Win) / Command+F
(Mac) twice to apply the same filter two more times.

Step 15: Invert The Image Again

Press Ctrl+I (Win) / Command+I (Mac) to invert the image once again:

Photoshop Tutorials: Invert the image once again using "Ctrl+I" (Win) / "Command+I" (Mac).

Step 16: Apply The "Wind" Filter Three More Times

With the image inverted, press the keyboard shortcut Ctrl+F (Win) / Command+F (Mac) three more times
to apply the filter to the image three more times:
Photoshop Tutorials: Apply the "Wind" filter to the image three more times.

Step 17: Brighten The Image Again With Levels

We need to brighten the image again using Levels, but this time, we'll let Photoshop do the work for us by
using Auto Levels. To do that, press Shift+Ctrl+L (Win) / Shift+Command+L (Mac) to apply the Auto
Levels command to the image, which will brighten it up:

Photoshop Tutorials: Apply the "Auto Levels" command to brighten the image.
Step 18: Rotate The Canvas 90 Degrees Counterclockwise

Go back up to the Image menu at this point, choose Rotate Canvas once again, and this time choose 90°
CCW to rotate the canvas back to the way it was originally:

Photoshop Tutorials: Rotate the canvas 90° CCW.

Step 19: Apply The "Polar Coordinates" Filter Again

Go back up to the Filter menu again, choose Distort, and then choose Polar Coordinates. This time
choose the Rectangular to Polar option and click OK:

Photoshop Tutorials: Apply "Polar Coordinates" again, this time choosing "Rectangular to Polar".

Your image should now look something like this:


Photoshop Tutorials: The image after applying the "Polar Coordinates" filter a second time.

Step 20: Set The Layer Blend Mode To "Screen"

Go up to the blend mode options in the top left of the Layers palette and change the blend mode of the text
copy layer from "Normal" to Screen by clicking on the down-pointing arrow and selecting "Screen" from
the list:

Photoshop Tutorials: Change the blend mode of the text copy layer to Screen.

This reveals the original text layer beneath it:


Photoshop Tutorials: The original text layer is now visible as well.

Step 21: Apply A Gradient Fill Layer To Add Color

Click on the New Fill Or Adjustment Layer icon at the bottom of the Layers palette:

Photoshop Tutorials: Click the "New Fill Or Adjustment Layer icon.

And select "Gradient" from the list:


Photoshop Tutorials: Select a Gradient fill layer.

When the Gradient Fill dialog box pops up, click inside the gradient preview area at the top:

Photoshop Tutorials: Click inside the gradient preview area.

This will bring up the Gradient Editor dialog box. Click on the gradient swatch in the top left, the black to
white gradient first, and this will make sure that both colors on either side of the gradient have their opacity
set to 100%:

Photoshop Tutorials: Select the black to white gradient swatch in the top left to make sure both colors are set
to 100% opacity first.

Then set your gradient colors to whatever you like. I've set the color on the left to a reddish-orange, and the
color on the right to a yellowish-orange:
Photoshop Tutorials: Set your gradient colors.

Exit out of the gradient dialog boxes once you've chosen your colors.

Step 22: Change The Blend Mode Of The Gradient Fill Layer To "Color"

With the Gradient fill layer selected, go back to the blend mode options in the top left of the Layers palette
and change the layer's blend mode to Color:

Photoshop Tutorials: Change the blend mode of the Gradient fill layer to "Color".

The image is now colorized with the colors from the gradient:
Photoshop Tutorials: The gradient colors are now applied to the image.

Step 23: Apply A Radial Blur To The Original Text Layer

We're done with the text copy layer at this point. We're going to finish off the last few steps by working on
the original text layer, so click on it in the Layers palette to select it. Then go up to the Filter menu, choose
Blur, and then choose Radial Blur:

Photoshop Tutorials: Photoshop's "Radial Blur" dialog box.

Set the Amount to about 65 pixels, the Blur Method to Zoom, and the Quality to Best, as circled above,
and then click OK to apply the filter to the original text:
Photoshop Tutorials: The Radial Blur applied to the image.

Step 24: Load The Saved Text Selection

Only a couple of things left to do. First, switch over to your Channels palette again like we did earlier.
We're going to reload that selection we saved. To do that, simply right-click (Win) / Control-click (Mac)
anywhere on the Alpha 1 channel at the very bottom, which will load the selection back into the document
window:
Photoshop Tutorials: Right-click (Win) / Control-click (Mac) anywhere on the "Alpha 1" channel to load the
saved text selection.

Switch back to the Layers palette when you're done. The selection is now loaded in the image:

Photoshop Tutorials: The selection now loaded into the image.

One thing left to do...

Step 25: Fill The Selection With Black

With the original text layer selected in the Layers palette and black still as your foreground color, press
Alt+Backspace (Win) / Option-Delete (Mac) to fill the selection with black and finish the effect.

Press Ctrl+D (Win) / Command+D (Mac) to remove the selection, and you're done!

After all that, here's the final "light burst" text effect:
Photoshop Tutorials: The final "Light Burst" effect.

And there we have it!

Using Text As A Container For More Text In


Photoshop
Learn Photoshop with Text Effects Tutorials at Photoshop
Essentials.com
Written By Steve Patterson

In this Photoshop Text Effects tutorial, we're going to learn how to use text as a container for more text!
Specifically, we'll fill a single letter with an entire paragraph of text so that the text appears in the shape of
the letter. Here's the effect we're going for:
Photoshop Text Effects: The final "text inside text" effect.

Let's get started!

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Step 1: Create A New Document

First, we need a document, so go up to the File menu at the top of the screen and choose New..., or use the
keyboard shortcut Ctrl+N (Win) / Command+N (Mac) to quickly bring up Photoshop's New Document
dialog box. Choose the size you want for your document. I'll set mine to a 6 x 4 inch document, but you can
use whichever size you need. Since I want this to look good when I print it, I'll set my Resolution to 300
pixels/inch. Make sure the Background Contents option is set to White, then click OK when you're done
to create your new document:

Photoshop Text Effects: Choose a size, resolution and background color for your new Photoshop document.
Step 2: Select The Type Tool

Next, in order to add our text, we need to Type Tool. Grab it from the Tools palette or press the letter T on
your keyboard to select it with the shortcut:

Photoshop Text Effects: Select Photoshop's Type Tool.

Step 3: Select Your Font From The Options Bar

With the Type Tool selected, go up to the Options Bar at the top of the screen and choose your font. Since
we're going to be using a letter as a container for more text, try to choose a font with thick letters. I'll use
Arial Black. Don't worry about the size for now. We'll resize the text as needed in a moment:

Photoshop Text Effects: Choose a font from the Options Bar, preferably one with thick letters.

Step 4: Type A Letter Into The Document

Click anywhere inside your Photoshop document and type a letter to use as a container for the rest of your
text. I'll type "T" since it's a nice, simple shape.

Step 5: Use Free Transform To Resize The Letter As Needed

If you need to resize your letter, press Ctrl+T (Win) / Command+T (Mac) to bring up Photoshop's Free
Transform box and handles around the letter, then drag any of the handles (the little squares) to resize it. To
avoid accidentally distorting to look of the letter as you resize it, hold down your Shift key as you drag the
handles. If you want to resize the letter from its center, hold down the Alt (Win) / Option (Mac) key as well:
Photoshop Text Effects: Resize the letter as needed with Photoshop's Free Transform command.

Press Enter (Win) / Return (Mac) when you're done to accept the transformation and exit out of the Free
Transform command.

Step 6: Create A Path From The Type

With the Type Tool still selected, right-click (Win) / Option-click (Mac) anywhere inside the document to
bring up a sub menu of options for the text. We need to convert our letter into a path which we can use as a
container for the rest of our text, so select Create Work Path from the sub menu:

Photoshop Text Effects: Create a work path from the letter.

Depending on the color you're using for your text, you may or may not notice an outline around the letter
once you've created the path. The outline is the path, and if you can't see it right now, you'll definitely see it
in a moment.
Step 7: Hide The Type Layer

If you didn't notice the path around your letter after you selected "Create Work Path", you'll notice it after
this step because we're going to hide the text layer from view since we no longer need to see it. On the far
left of the text layer in the Layers palette is an eyeball icon. This is the Layer Visibility icon, but most
people just refer to it as the "eyeball". When the eyeball is showing, the layer is visible in the document, and
when it's not showing, the layer is hidden. Currently, the eyeball is showing, which is why we can see the
letter in the document. Click on the eyeball icon with your mouse, which will not only hide the eyeball, it
will hide the text in the document as well:

Photoshop Text Effects: Hide the letter from view in the document by clicking on its visibility icon in the
Layers palette.

You can click back inside the empty box where the eyeball icon was displayed to make the layer visible
again.

With the text hidden, only the path we created a moment ago is now visible:

Photoshop Text Effects: The text is now hidden, revealing the path we created from the text.

Step 8: Click Inside The Path, But Don't Type Just Yet

Our path is now visible, and we're going to use it as a container for our text. We just need to add the text!
With the Type Tool still selected, move your mouse cursor anywhere inside the path. You'll see the shape of
your cursor change from an I-beam with a dotted square around it to an I-beam with a dotted elliptical shape
around it, indicating that if you click the mouse and start typing, you'll be typing inside the path, which is
exactly what we want. Go ahead and click anywhere inside the path, but don't start typing just yet.
Step 9: Change Your Font And/Or Font Size If Necessary

You're probably going to want to reduce the size of your font before you start typing, so before you actually
type anything, go up to the Options Bar and set your font size to something more appropriate. I'll set mine to
36 pt. You may want to change the font as well. I'll change mine to Arial, rather than Arial Black which is
what I used for the letter itself:

Photoshop Text Effects: Change your font and font size in the Options Bar.

Step 10: Select "Justify All" From The Paragraph Palette

There's one more thing we're going to want to do before we start typing. We want to set the text justification
to Justify All so that the text will fill up our shape from left to right. We can access the justification options
from the Paragraph palette. If you don't already have the Paragraph palette open on your screen, with the
Type Tool still selected, go up to the Options Bar and click on the Character and Paragraph palette
toggle button:

Photoshop Text Effects: Click on the Character and Paragraph palette toggle button in the Options Bar to
access Photoshop's Character and Paragraph palettes.

By default, Photoshop groups the Character and Paragraph palettes together in the same palette group, both
because they work as a team and to save screen space. If the Character palette is the one showing, simply
click on the Paragraph palette's name tab at the top of the palette group to bring it to the forefront and send
the Character palette to the background. With the Paragraph palette selected, click the Justify All option in
the upper right of the palette. This will make sure that our text fills as much of the letter as possible:

Photoshop Text Effects: Click the "Justify All" option in the Paragraph palette.

Step 11: Type Your Text Inside The Path

All that's left to do now is add our text inside the letter. Go ahead and start typing, and as you do, you'll see
your text filling the inside of the letter:
Photoshop Text Effects: Begin typing inside the letter. As you type, the text conforms to the shape of the
original letter.

Continue typing until your letter is filled with text.

Photoshop Text Effects: My letter "T" is now filled with text.

Step 12: Click On The Checkmark To Accept The Text

When you're done adding your text, click on the checkmark in the Options Bar to accept it:

Photoshop Text Effects: Accept your text by clicking on the checkmark in the Options Bar.
Step 13: Hide The Path

With the text added, all that's left to do now is hide the path, and we can do that easily with the keyboard
shortcut Ctrl+H (Win) / Command+H (Mac). And with that, we're done! Here's the final result, with the
text in the shape of a letter T:

Photoshop Text Effects: The final result. The shape of the original letter is still visible thanks to the text
inside of it.

And that's how easy it is to convert a letter into a path and use it as a container for more text in Photoshop!

Apply Multiple Strokes To Text In Photoshop


Learn Photoshop with Photoshop Text Effects at Photoshop
Essentials.com!
In this Photoshop text effects tutorial, we're going to have some fun with strokes. We'll learn how easy it is
to add as many strokes to our text as we want, rather than settling for just one, which is normally all
Photoshop allows us to add. Here's an example of the sort of result we'll be working towards. In this case,
three separate strokes have been added around the letters, but you can use the steps in this tutorial to add as
many strokes as you like:

Let's get started!

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!
Step 1: Create A New Document

Start by creating a new blank Photoshop document. Go up to the File menu at the top of the screen and
choose New, or simply press the keyboard shortcut Ctrl+N (Win) / Command+N (Mac). Either way brings
up Photoshop's New Document dialog box. Choose whatever size you need for your document. I'll set my
document to a Width of 6 inches, a Height of 4 inches, and a Resolution of 300 pixels/inch. Click OK
when you're done to exit out of the dialog box and your new blank document will appear on the screen.

Step 2: Select The Type Tool

To add type to our document, we'll need Photoshop's Type Tool. Select it from the Tools palette, or press
the letter T on your keyboard to select it with the shortcut:

Photoshop Text Effects: Select the Type Tool from the Tools palette, or press "T" for the keyboard shortcut.

Step 3: Choose A Font From The Options Bar

With the Type Tool selected, go up to the Options Bar at the top of the screen and choose the font and font
size you want to use for the effect. I'll use Arial Black for my text, and I'll choose a font size of 60 pt. You
may need to select a different size depending on the size and resolution of the document you're working
with. Of course, you can also use a different font from the one I'm using:

Photoshop Text Effects: Select your font and font size from the Options Bar at the top of the screen.

Step 4: Add Your Text

Click inside your document window and add your text. I'll type the word "STROKES". Once you've added
your text, click on the checkmark in the Options Bar to accept it and exit out of text editing mode:

Photoshop Text Effects: Click inside the document, add your text, then click on the checkmark in the
Options Bar to exit out of accept the text.

Step 5: Add A "Stroke" Layer Style

With your text now added, click on the Layer Styles icon at the bottom of the Layers palette and select
Stroke from the bottom of the list of layer styles that appears:
Photoshop Text Effects: Select "Stroke" from the list of layer styles.

As soon as you select Stroke from the list, two things will happen. Photoshop will pop open the large Layer
Style dialog box set to the Stroke options in the middle column, and a red stroke (red is the default color for
the stroke) will appear around your text in the document window:

Photoshop Text Effects: A red stroke appears around the text.

Step 6: Adjust The Size And Position Of The Stroke

The default size for the stroke is 3 px, which means the stroke has a thickness of 3 pixels, and the default
position is "Outside", which means the entire thickness of the stroke will appear outside of the letters rather
than inside of them. I'm going to increase the size of my stroke to 6 px by dragging the Size slider bar at the
top of the dialog box towards the right, and I'm going to set the Position for this first stroke to Inside, which
will place the entire thickness of the stroke inside the letters:

Photoshop Text Effects: Changing the Size and Position of the stroke in the Layer Style dialog box.

Click OK when you're done to exit out of the Layer Style dialog box. Here's what my text looks after
making the changes to the default stroke settings:

Photoshop Text Effects: The stroke after changing its size and position.
Step 7: Set The 'Fill' Of The Text To 0%

Now that I have my first stroke outline around my text, I don't want to see my actual text anymore. All I
want to see is the stroke outlining it. Since the background color for my document is white, I could just
change the color of my text to white, but what if I change the background color later? I'd have to change the
text color as well to match the new background. A better solution is to simply hide the text from view while
still keeping the layer styles visible. Photoshop makes it very easy to do just that.

With the text layer selected, go up to the top of the Layers palette. You'll see two options, "Opacity" and
"Fill". You can hide the text by lowering the Opacity value to 0%, but the Opacity option affects everything
on the layer, including layer styles, which means we'd be hiding the stroke as well. "Fill", on the other hand,
has no effect on layer styles. It will hide all the contents of a layer except any layer styles we've applied to it,
which means that if we set the Fill value to 0%, we'll be hiding the text without hiding the stroke! Let's do
that. Again, make sure the text layer is selected (selected layers are highlighted in blue) and lower the Fill
value to 0%:

Photoshop Text Effects: Hide the text by lowering the Fill to 0%.

Here's what you should see. The text is now hidden from view, yet the stroke around it remains visible:

Photoshop Text Effects: Lowering the Fill value hides the text but keeps the layer styles visible.

Step 8: Duplicate The Text Layer

So far, so good. We've added a single stroke around the text. Here's where we start adding multiple strokes
to the text. Normally, Photoshop doesn't allow us to add more than one stroke to a text layer (or any type of
layer), but nothing says we can't make copies of our text layer and add a different stroke to each copy! To
make each stroke visible, we'll simply change the position and/or size of each stroke!

With the text layer selected in the Layers palette, press Ctrl+J (Win) / Command+J (Mac) to quickly
duplicate the layer. The duplicate will appear directly above the original text layer. Once you've duplicated
the layer, click back on the original text layer to select it. We're going to change the stroke options for the
original text layer:
Photoshop Text Effects: Duplicate the text layer, then click on the original text layer in the Layers palette to
select it.

Step 9: Change The Stroke Color And Position Of The Original Text Layer

See the "fx" icon on the far right of the text layer in the Layers palette (earlier versions of Photoshop show a
round icon with an "f" inside of it)? When that icon is visible, it's telling us that one or more layer styles are
currently attached to the layer. Double-click on the icon to bring back the Layer Style dialog box, then
select Stroke from the bottom of the list of layer styles on the left of the dialog box. You'll see the options
for the Stroke appear in the middle column.

First, change the color of the stroke by clicking on the color swatch in the middle of the dialog box, which
will bring up Photoshop's Color Picker. Choose a different color from the Color Picker. I'll choose an
orange color. Click OK when you're done to exit out of the Color Picker. You'll see the color swatch change
to the color you've chosen:

Photoshop Text Effects: Click on the color swatch and choose a new color for the stroke from the Color
Picker.

Once you've chosen a new color for your stroke, change the Position of the stroke to Outside to move the
stroke outside of the letters. You can leave the size of the stroke the same.
Photoshop Text Effects: Change the Position of the stroke to Outside.

Click OK when you're done to exit out of the Layer Style dialog box, and you'll see that you now have two
strokes around your letters. The original stroke (the red one) is on the inside of the letters, and the new one
(the orange one) that we just added is on the outside. By changing the position of the two strokes, we've
prevented them from overlapping each other, allowing us to see both of them at once:

Photoshop Text Effects: Two strokes now outline the text, one inside the letters and the other outside of
them.

There's no need to stop with just two strokes, especially since adding more of them is just as easy!

Step 10: Duplicate The Original Text Layer Once Again

With the original text layer still selected in the Layers palette, press Ctrl+J (Win) / Command+J (Mac) to
once again duplicate the layer, placing a new copy of it directly above the original. When you're done, click
back on the original text layer to select it. We're going to again change the color of the stroke, and this time
we're also going to increase the size of it.

You should now have three text layers in the Layers palette (the original plus two copies above it), and the
original text layer should be selected. Double-click on the layer effects icon on the right of the original text
layer in the Layers palette to bring back the Layer Style dialog box, just as we did a moment ago, and select
Stroke from the bottom of the list on the left to access the Stroke options:
Photoshop Text Effects: Double-click on the Layer Effects icon to bring back the Layer Style dialog box,
then select "Stroke" from the list on the left.

Step 11: Choose Another New Color For The Stroke And Increase The Stroke Size

When the Layer Style dialog box appears, change the color of the stroke by once again clicking on the color
swatch and selecting a new color from the Color Picker. I'm going to select red again, the same color that
was used for my original stroke. Click OK to exit out of the Color Picker when you're done. The color
swatch will change to the color you've chosen:

Photoshop Text Effects: The color swatch shows the current stroke color.

Once you've chosen a new color, go up to the top of the Stroke options and increase the Size of the stroke.
My stroke is currently set to a size of 6 px, which is the same thickness as the previous stroke. The position
of the stroke is set to Outside, also the same as the previous stroke. And since the previous stroke is sitting
on a layer above the layer I'm currently working on, this means that the previous stroke is completely
blocking my new stroke from view in the document. To make my new stroke visible, I'll need to increase it's
size. I'm going to increase it to 16 px:
Photoshop Text Effects: Increase the size of the third stroke so it appears around the outside of the previous
stroke.

The new stroke now appears as a thick red stroke around the outside of the previous two strokes:

Photoshop Text Effects: Our text is now outlined by three separate strokes.

We now have not one, not two, but three separate strokes around our text, and we can keep adding more if
we want by continuing to duplicate the original text layer, selecting it again in the Layers palette, going back
to the Stroke options, choosing a new color for the stroke, then increasing the size of the stroke until it's
visible around the outside of the previous strokes.

The nice thing about this effect is that you can always go back and change the look of it any time you want
simply by clicking on the layer effects icon on the right of the layer in the Layers palette to bring back the
Layer Style dialog box, selecting Stroke from the list on the left of the dialog box, then changing the stroke
options. Select new colors, sizes and/or positions for the strokes for different results! Here, I've made a
simple black and white stroke pattern by changing the red strokes to black and the orange one in the middle
to white:

Photoshop Text Effects: The same effect after changing the stroke colors to black and white.

And there we have it!

Using Text To Shadow Itself In Photoshop


Learn Photoshop with Photoshop Text Effects at Photoshop
Essentials.com!
In this Photoshop text effects tutorial, we're going to see how easy it is to add some visual interest to text in
Photoshop by using a copy of the exact same text to shadow itself.

Let's get started!

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Step 1: Create A New Blank Document

First, let's create a new blank Photoshop document. Go up to the File menu at the top of the screen and
choose New, or simply use the keyboard shortcut Ctrl+N (Win) / Command+N (Mac). Either method will
bring up Photoshop's New Document dialog box. Enter in whatever size you need for your document. I'm
going to enter a Width of 6 inches, a Height of 4 inches, and a Resolution of 300 pixels/inch, but again,
you can enter whatever size you need. I'm also going to set my Background Contents to White so that
white appears as my background color in the document. Click OK when you're done to exit out of the dialog
box. Your new blank document will appear on your screen.

Photoshop Text Effects: Create a new blank Photoshop document.

Step 2: Select The Type Tool

Next, select the Type Tool from the Tools palette, or press the letter T to select with the keyboard shortcut:
Photoshop Text Effects: Select the Type Tool.

Step 3: Select A Font, Size And Color For Your Text

With the Type Tool selected, go up to the Options Bar at the top of the screen and choose whichever font
you'd like to use. I'll use Tahoma Bold at a size of 60 pt. You, of course, can use whichever font you prefer,
and the size you choose may be different depending on the font you choose, as well as on the size of the
document you're working with:

Photoshop Text Effects: Select a font and font size in the Options Bar.

Then, to select a color for the text, click on the color swatch in the Options Bar.

Photoshop Text Effects: Click on the color swatch in the Options Bar to change the text color.

This will bring up Photoshop's Color Picker. Select a nice, bright color for your text. I'll choose a bright red
color. Once you've chosen your color, click OK in the top right corner of the dialog box to exit out of it:

Photoshop Text Effects: Choose a color for the text from the Color Picker, then click OK to exit out of it.
Step 4: Add Your Text

With the font and text color chosen, click inside the document and add your text. I'll type the word
"SHADOW". When you're done, click on the checkmark in the Options Bar to accept the text and edit out
of text editing mode:

Photoshop Text Effects: Add your text to the document, then click the checkmark in the Options Bar to
accept it.

Once you've added your text, your Layers palette will show the text on its own layer directly above the
Background layer.

Photoshop Text Effects: The text appears on its own layer above the Background layer.

Step 5: Duplicate The Text Layer

We're going to use the exact same text to shadow itself, and to do that, we'll need a copy of the text, which
means we need to duplicate our text layer. Make sure you have the text layer selected in the Layers palette
(selected layers are highlighted in blue), then press Ctrl+J (Win) / Command+J (Mac) to duplicate the
layer. A copy of the text layer will appear above the original:

Photoshop Text Effects: The Layers palette showing a copy of the text layer above the original.
Step 6: Select The Original Text Layer

Since our original text layer is below the copy, we'll use the original text layer for our shadow effect. Click
on the original text layer in the Layers palette to select it:

Photoshop Text Effects: Click on the original text layer in the Layers palette.

Step 7: Choose A Darker Version Of The Text Color To Use As The Shadow

With the original text layer selected in the Layers palette and the Type Tool still selected, click again on the
color swatch in the Options Bar at the top of screen and select a different color from the Color Picker.
We're going to use this color as a shadow effect for the text, so choose a darker version of your original
color. Here, I'm choosing a darker red:

Photoshop Text Effects: Choose a darker version of the original text color with the Color Picker.

When you're done. click OK to exit out of the Color Picker. It won't look like much has happened in your
document window just yet because the copied text layer is over top of the original text layer and hiding it
from view, but we're going to fix that in the next step.
Step 8: Select The Move Tool

In order to create our shadow effect, we need to move the original text slightly so we can see it below the
copy of the text that's sitting above it. Let's move the original text down and to the right. Not too much, just
enough to create a shadow effect. To move the text, we'll need Photoshop's Move Tool, so select it from the
top of the Tools palette or press the letter V on your keyboard to select it with the shortcut:

Photoshop Text Effects: Select the Move Tool.

Step 9: Nudge The Original Text Layer Down And To The Right

We needed to select the Move Tool, but we don't actually need to use it to move our text. You could click
inside the document and drag the text down and to the right with your mouse, but in this case, an easier way
might simply be to use the arrow keys on your keyboard to nudge the text. Press the Down arrow key a
few times to nudge the original text downward, then click the Right arrow key the same number of times to
nudge it to the right. I'm going to press my Down arrow key 10 times, then the Right arrow key 10 times, to
nudge my text and create my shadow effect:

Photoshop Text Effects: Use the arrow keys to nudge the original text down and to the right to create the
shadow effect.

Remember, you still need to select the Move Tool first even if you're going to use the arrow keys to move an
object.

If you want, you can create a second shadow simply by following the same steps. Duplicate the original text
layer by pressing Ctrl+J (Win) / Command+J (Mac), then click on the original text layer in the Layers
palette to reselect it. Switch back to the Type Tool (since the Move tool is currently selected), click on the
color swatch in the Options Bar and select an even darker shade of the color from the Color Picker. Select
the Move Tool, then use the arrow keys on the keyboard to nudge the text down and to the right.

Here's my text after following the steps to add a second shadow effect:

Photoshop Text Effects: The effect after adding a second, darker shadow.

And there we have it!


Photoshop Text Effects Tutorial: Stroke Text With
A Brush
How To Easily Stroke Any Text With Any Brush Inside Photoshop
In this Photoshop text tutorial, we're going to see how to stroke (outline) our text using any brush we have
available to us in Photoshop.

Step 1: Create A New Document

As usual, the first thing we need to do is create a new document, and the easiest way to do that is by using
the keyboard shortcut, "Ctrl+N" (Win) or "Command+N" (Mac), which brings up the New Document dialog
box. Choose whichever size you like for your document. I'll use 500x500 pixels for this tutorial.

Step 2: Add Your Text

Press the letter "T" on your keyboard to quickly select the Horizontal Type Tool. Then, select the font you
want to use from the Options Bar. I'll use Helvetica Black, but feel free to use any font you like.

With your font selected, click inside your document window and add your text. Since this is a tutorial on
stroking text with a brush, I'll type the word "BRUSH".

Adobe Photoshop Text Effects: Select the Horizontal Type Tool, choose a font, and type your text into the
document.

Step 3: Create A Path From The Text

With the Type Tool still selected, right-click (Win) or Option-click (Mac) anywhere inside the document to
bring up a sub menu of options for your text. We're going to need a path for our brush to follow, and we
want the path to exactly follow the shapes of the letters, so we're going to create a path from our text. To do
that, choose the "Create Work Path" option from the sub menu.
Adobe Photoshop Text Effects: Right-click (Win) or Option-click (Mac) anywhere inside the document to
bring up a sub menu of options for the text, and select "Create Work Path" from the list to create a path from
the text for our brush to follow.

Once you've selected "Create Work Path", you'll see an outline around the letters in your text. This is the
path our brush is going to follow.

Step 4: Add A New Layer Above The Text Layer

We have our text and our path, but Photoshop won't allow us to use a brush directly on a text layer, so we'll
need to create a new layer above the text layer. With the text layer selected in the Layers palette, click on the
"New Layer" icon at the bottom of the Layers palette to create a new layer above the text layer.

Adobe Photoshop Text Effects: With the text layer selected in the Layers palette, click on the "New Layer"
icon to create a new layer above the text layer, on which we can add our brush stroke.
Step 5: Hide The Text Layer

Now that we have our path in the shape of our letters, we don't really need to see the text layer itself
anymore, so click on the eyeball icon on the far left of the text layer in the Layers palette to hide the layer
from view.

Adobe Photoshop Text Effects: Click on the text layer's eyeball icon to hide the layer from view, since we
don't need to see the text layer anymore.

This will leave us with just the path we created showing in the document, not the text itself.

Adobe Photoshop Text Effects: Hiding the text layer reveals only the path outline we created.

Step 6: Select A Brush

Next, we need a brush. Press "B" on the keyboard to quickly select the Brush tool, or select it from the Tools
palette.

Adobe Photoshop Text Effects: Select the Brush tool from the Tools palette, or press "B" on your keyboard
to quickly select it.

To quickly select a brush to use, with the Brush tool selected, move your mouse anywhere inside the
document window and right-click (Win) or Option-click (Mac) to bring up the Brush Preset Picker. You can
also access it from the Options Bar, but this way is a bit faster.
Adobe Photoshop Text Effects: Right-click (Win) or Option-click (Mac) inside the document to quickly
bring up the Brush Preset Picker.

Use the scroll bar to scroll through the available brushes and click on the one you want to use. I'll select the
Chalk brush, but you can choose any brush you like. The purpose of this tutorial is to explain the technique
so that you can stroke any text with any brush, not to achieve a specific effect.

Use the Master Diameter slider at the top of the Brush Preset Picker to change the size of the brush as
needed. A quick way to tell if your brush is too large or too small is to hover your brush over the path of one
of the letters to judge its size. If it look like it's probably too large or too small, change the brush size, hover
the brush over the path again, and continue this process until you think you have the brush at a good size.
The nice thing is, you don't have to get it right on the first attempt. Once you've stroked the path with the
brush as we'll do in a moment, if you don't like the effect and need to change the size of the brush, or if
you'd prefer to try a different brush, all you need to do is undo the stroke, make any necessary changes to the
brush, and then try again until you're happy with the results.

Step 7: Switch To The Paths Palette

We have our path, we have our brush, and we have our new layer to add our brush stroke to. Now we need
to switch from the Layers palette to the Paths palette, but before we do, make sure the new layer (the layer
we're going to add the brush stroke to) is selected in the Layers palette. If it's not selected, click on it to
select it. We won't be able to stroke the path unless this layer is selected.

With the new layer selected, switch to the Paths palette. You'll find it in the same layer group as the Layers
palette (by default, anyway). Click on its name tab at the top of the layer group to bring the Paths palette to
the front of the group and send the Layers palette to the back.

Adobe Photoshop Text Effects: The Paths palette showing the path we created.

You'll notice in the Paths palette that it's showing the path we created, which Photoshop named "Work
Path". "Work Path" simply means that the path is currently temporary, and if we were to create another path,
this current work path would be replaced by the new path. We have the option of saving paths we create, but
for the sake of what we're doing here, we don't need to worry about that. Leaving the path as a temporary
work path is fine.

Step 8: Stroke The Path With The Brush

On the bottom of the Paths palette is a row of icons, similar to the row of icons found at the bottom of the
Layers palette. The icon second from the left, which looks like an outlined circle, is the "Stroke Path With
Brush" icon. That's the one we want. All we have to do is click on this icon, and Photoshop will take the
brush we've selected and use it to stroke the path, giving us our effect!
Adobe Photoshop Text Effects: Click the "Stroke Path With Brush" icon at the bottom of the Paths palette to
have Photoshop stroke the path we created with the brush.

I chose the Chalk brush, and here's the effect I get after stroking my path with the brush:

Adobe Photoshop Text Effects: The text after stroking it with the Chalk brush.

The path outline is still visible, which is good because I'm going to stroke the path once again, but this time
making my brush a little smaller first. I want to try and emphasize the shapes of the letters a bit more.

To do that, I'm just going to move my mouse cursor back into the document window and right-click (Win)
or Option-click (Mac) once again to bring back the Brush Preset Picker, and I'm going to drag the slider bar
for the Master Diameter a little to the left to reduce the size of my brush a bit.

Adobe Photoshop Text Effects: Reducing the size of the brush once again using the Master Diameter slider
in the Brush Preset Picker.

Now, with my slightly smaller brush, I'm going to click on the "Stroke Path With Brush" icon at the bottom
of the Paths palette once again. In fact, I think I'll click on it twice, or even three times, to really give me a
strong, solid brush stroke right along the path itself. Here's my result:

Adobe Photoshop Text Effects: The text effect after re-stroking it three times with a smaller brush.

Step 9: Hide The Path

All we have to do now is hide the path from view, since we don't need to see it anymore. To do that, use the
keyboard shortcut "Ctrl+H" (Win) or "Command+H" (Mac), and the path is no longer visible.

Here's the final result:


Adobe Photoshop Text Effects: The final result.

Again, keep in mind that the purpose of this tutorial was to show you how to use this technique to stroke any
text with any brush you like, not to create this specific effect. Feel free to experiment with your own text and
your own brush choices to see what sort of effects you can come up with!

And that's our look at how to stroke text with a brush inside Adobe Photoshop.

Place An Image In Text In Photoshop


Learn Photoshop With Text Effects Tutorials At Photoshop
Essentials.com
Written By Steve Patterson

In this Adobe Photoshop tutorial, we're going to learn how to place an image in text, a very popular thing
to do in Photoshop, and also a very easy thing to do as we'll see.

Here's the effect we're going for:

Photoshop Image In Text: The final "image in text" effect.

Let's get started!

Step 1: Open A Photo To Place Inside Your Text

First, we need the image that we're going to place inside of our text. I'll use this panoramic photo of Hawaii:
Photoshop Image In Text: An ocean view from Hawaii.

Step 2: Duplicate The Background Layer

If we look in the Layers palette, we can see that we currently have one layer, named Background. This layer
contains our image. We need to duplicate this layer, and the easiest way to do that is by using the keyboard
shortcut Ctrl+J (Win) / Command+J (Mac). If we look once again in the Layers palette, we see that we
now have two layers. The original Background layer is on the bottom, and a copy of the Background layer,
which Photoshop automatically named "Layer 1", is sitting above it:

Photoshop Image In Text: Photoshop's Layers palette.

Step 3: Add A New Blank Layer Between The Two Layers

Next, we need to add a new blank layer between the Background layer and "Layer 1". Currently, "Layer 1"
is the layer that's selected in the Layers palette. We can tell which layer is selected because the selected layer
is always highlighted in blue. Normally, when we add a new layer, Photoshop places the new layer directly
above whichever layer is currently selected, which means that Photoshop would place the layer above
"Layer 1". That's not what we want. We want the new layer to be placed below "Layer 1". Here's a useful
trick. To add a new layer below the currently selected layer, hold down your Ctrl (Win) / Command (Mac)
key and click on the New Layer icon at the bottom of the Layers palette. Holding down Ctrl (Win) /
Command (Mac) is the trick to placing the layer below the currently selected layer:
Photoshop Image In Text: Hold down "Ctrl" (Win) / "Command" (Mac) and click on the New Layer icon in
the Layers palette.

We now have a new blank layer named "Layer 2" sitting directly between the Background layer and "Layer
1":

Photoshop Image In Text: The Layers palette showing the new blank layer between the Background layer
and "Layer 1".

Step 4: Fill The New Layer With White

At the moment, our new layer is completely blank. Let's fill it with white so it will appear as a white
background after we've placed our image inside the text. Go up to the Edit menu at the top of the screen and
choose Fill. This will bring up Photoshop's Fill dialog box. Select White for the Contents option at the top
of the dialog box, then click OK to exit out of the dialog box:

Photoshop Image In Text: Select White for the Contents option at the top of the Fill command's dialog box.
Nothing will appear to have happened in the document window, since the image on "Layer 1" is blocking
"Layer 2" from view, but if we look at the layer preview thumbnail for "Layer 2" in the Layers palette, we
can see that sure enough, the layer is now filled with solid white:

Photoshop Image In Text: The preview thumbnail for "Layer 2" shows that the layer is now filled with
white.

Step 5: Select "Layer 1" In The Layers Palette

It's time to add our text, but in order to see the text when we add it, we'll need to have the text appear above
"Layer 1", otherwise the image on "Layer 1" will block the text from view. To make sure we can see our
text, click on "Layer 1" in the Layers palette to select it. This way, as soon as we begin typing, Photoshop
will create a new type layer for us and place the type layer directly above "Layer 1":

Photoshop Image In Text: Click on "Layer 1" in the Layers palette to select it.

Step 6: Select The Type Tool

To add the text, we'll need Photoshop's Type Tool, so select the Type Tool from the Tools palette. You can
also quickly select the Type Tool by pressing the letter T on your keyboard:

Photoshop Image In Text: Select the Type Tool.


Step 7: Choose A Font In The Options Bar

With the Type Tool selected, go up to the Options Bar at the top of the screen and choose whichever font
you want to use for the effect. Generally, fonts with thick letters work best. I'm going to choose Arial Black.
Don't worry about the font size for now:

Photoshop Image In Text: Select a font in the Options Bar.

Step 8: Set White As Your Foreground Color

This step isn't absolutely necessary, but to help me see my text, I'm going to use white for my text color.
The color you choose for your text doesn't really matter since we'll be filling the text with an image in a
moment, but it still helps to be able to see the text when we're adding it. To set the text color to white, all we
need to do is set Photoshop's Foreground color to white. First, press the letter D on your keyboard, which
will reset the Foreground and Background colors to their defaults. Black is the default color for the
Foreground color and white is the default color for the Background color. To swap them so white becomes
the Foreground color, press the letter X on your keyboard. If you look at the Foreground and Background
color swatches near the bottom of the Tools palette, you'll see that white is now the Foreground color (the
left swatch):

Photoshop Image In Text: Setting the Foreground color to white sets the text color to white as well.

Step 9: Add Your Text

With the Type Tool selected, your font chosen and white as your Foreground color, click inside your
document window and add your text. Since I'm using a photo of an ocean scene in Hawaii, I'm going to type
the word "HAWAII":
Photoshop Image In Text: Click inside the document and add your text.

When you're done, click on the checkmark up in the Options Bar to accept the text.

Photoshop Image In Text: Click on the checkmark in the Options Bar to accept the text.

Step 10: Resize and Reposition The Text With The Free Transform Command

You'll probably need to resize and reposition your text at this point, and we can do both of those things using
Photoshop's Free Transform command. Press Ctrl+T (Win) / Command+T (Mac) on your keyboard to
bring up the Free Transform box and handles around your text, then drag any of the handles to resize the
text. If you want to resize the text without distorting the look of it, hold down your Shift key and drag any of
the four corner handles. You can also resize the text from its center by holding down the Alt (Win) / Option
(Mac) key as you drag. Finally, to move the text, click anywhere inside the Free Transform box and drag
your mouse to move the text around inside the document window:

Photoshop Image In Text: Use Photoshop's Free Transform command to resize and move the text.
Press Enter (Win) / Return (Mac) when you're done to accept the transformation and exit out of the Free
Transform command.

Step 11: Drag The Text Layer Below "Layer 1"

Now that we have our text the way we want it, we need to move the type layer below the text in the Layers
palette. Click on the text layer, then simply drag it down below "Layer 1". You'll see a thick black line
appear between "Layer 1" and "Layer 2":

Photoshop Image In Text: Drag the type layer below "Layer 1".

Release your mouse button when the black line appears to drop the type layer into place between "Layer 1"
and "Layer 2":

Photoshop Image In Text: The type layer now appears between "Layer 1" and "Layer 2".

Step 12: Select "Layer 1" Again

Click once again on "Layer 1" in the Layers palette to select it:
Photoshop Image In Text: The type layer now appears between "Layer 1" and "Layer 2".

The text will temporarily disappear inside the document window now that the image on "Layer 1" is
blocking it from view.

Step 13: Create A Clipping Mask

To create the illusion that the photo is inside the text, we need to use a clipping mask. This will "clip" the
photo on "Layer 1" to the text on the layer directly below it. Any areas of the photo that appear directly
above the letters will remain visible in the document. The rest of the photo will disappear from view.

With "Layer 1" selected in the Layers palette, go up to the Layer menu at the top of the screen and choose
Create Clipping Mask:

Photoshop Image In Text: Go to Layer > Create Clipping Mask.

If we look in the document window, we can see that the photo now appears to be inside the text:
Photoshop Image In Text: The photo now appears inside the letters.

Step 14: Add A Drop Shadow (Optional)

To complete my effect, I'm going to add a drop shadow to the letters. If you want to follow along, first select
the type layer in the Layers palette, then click on the Layer Styles icon at the bottom of the Layers palette:

Photoshop Image In Text: Select the type layer, then click on the Layer Styles icon.

Select Drop Shadow from the list of layer styles that appears:

Photoshop Image In Text: Select the Drop Shadow layer style.


This brings up Photoshop's Layer Style dialog box set to the Drop Shadow options in the middle column.
I'm going to leave most of the options alone, but I'll lower the Opacity of the drop shadow down to about
60% so it's not quite so intense, and I'll set the Angle of the drop shadow to 120°:

Photoshop Image In Text: The Layer Style dialog box displaying the options for the Drop Shadow.

Click OK when you're done to apply the drop shadow an exit out of the Layer Style dialog box. Here is my
final "image in text" effect:

Photoshop Image In Text: The final "image in text" effect.

And there we have it!

Knock Out Text Effect In Photoshop


Learn Photoshop with Text Effects Tutorials at Photoshop
Essentials.com!
In this Photoshop text effects tutorial, we're going to create some knock out text. By that, I mean we're
going to look at how to use one of Photoshop's more interesting shape options to knock out sections of
letters that overlap each other! Of course, you can't use shape options unless you're working with shapes, so
along the way, we'll see how to convert text to a shape, which opens up a lot more possibilities for us when
it comes to creating cool text effects. Here's an example of the result we're going for:
Photoshop Text Effects: The final "knock out" text effect.

Let's get started!

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Step 1: Create A New Blank Document

First, create a new Photoshop document, either by going up to the File menu at the top of the screen and
choosing New or by pressing the keyboard shortcut Ctrl+N (Win) / Command+N (Mac). Either way brings
up Photoshop's New Document dialog box. Enter the dimensions you need for your document. For this
tutorial, if you want to follow along, I'll enter 4 inches for my Width, 2 inches for my Height, and a
Resolution value of 300 pixels/inch. I'll also set my Background Contents to White which will fill the
background of my new document with white. When you're done, click OK in the top right corner of the
dialog box to exit out of it. Your new document will appear on your screen:

Photoshop Text Effects: Create a new Photoshop document using the New Document dialog box.

Step 2: Select The Type Tool

With our new document created, we can begin working on our effect. Since this is a text effect, we'll need
some text, and for that, we'll need Photoshop Type Tool. Grab it from the Tools palette, or simply press the
letter T on your keyboard to select it with the shortcut:
Photoshop Text Effects: Select the Type Tool.

Step 3: Select A Font

With the Type Tool selected, the Options Bar at the top of the screen changes to show options specifically
for the Type Tool. Over on the left of the Options Bar is where we can choose a font. Select the font you
want to use for your effect. Your choice of fonts will depend on which fonts you currently have installed on
your computer. This effect works best with fonts that have big, thick letters, so I'm going to choose Cooper
Std. Don't worry about the size of the font for now:

Photoshop Text Effects: Select a font from the Options Bar.

Step 4: Select A Color For The Text

Next, we need to select a color for our text. If you move further to the right in the Options Bar, you'll find a
color swatch. This color swatch shows you the currently selected text color. To change the color of your
text, simply click directly on the color swatch:

Photoshop Text Effects: The color swatch shows the current text color. Click on the color swatch to change
the color.

This brings up Photoshop's Color Picker. Choose a color for your text. I'm going to choose a medium shade
of blue. When you're done, click OK to exit out of the Color Picker, and you'll see that the color swatch in
the Options Bar has changed the show the color you've chosen:
Photoshop Text Effects: Choose a color for your text from the Color Picker.

Step 5: Add Your Text

With the Type Tool, a font and a color for the text all selected, click inside your document and add your text.
I'm going to type the word "PHOTOSHOP", all in capital letters:

Photoshop Text Effects: Add your text to the document.

Once you've added your text, click on the checkmark in the Options Bar to accept it and exit out of text
editing mode.

Photoshop Text Effects: Click on the checkmark in the Options Bar to accept the text.
Step 6: Resize The Text If Needed With Free Transform

If you need to resize or move your text, or both, go up to the Edit menu at the top of the screen and choose
Free Transform, or for a faster way to access the Free Transform command, press Ctrl+T (Win) /
Command+T (Mac):

Photoshop Text Effects: Go to Edit > Free Transform.

You'll see the Free Transform box and handles appear around your text in the document. To resize the text,
hold down your Shift key, which will constrain the aspect ratio of the text as you resize it, then click on any
of the corner handles (the little squares) and drag the handle inward or outward depending on whether you
need to make the text larger or smaller. To move the text, click anywhere inside the Free Transform box and
drag the text to a new location. I'm going to make my text a little bigger by dragging the handle in the
bottom right corner outward:

Photoshop Text Effects: Resize and move the text if needed with Free Transform.

Press Enter (Win) / Return (Mac) when you're done to accept the transformation and exit out of the Free
Transform command.

Step 7: Convert The Text To A Shape

Make sure you have everything spelled correctly because at this point, we need to convert our text into a
shape. Once it's converted to a shape, the text will no longer be editable, so double check to make sure you
haven't made any mistakes. To convert the text to a shape, go up to the Layer menu at the top of the screen,
choose Type, and then choose Convert to Shape:
Photoshop Text Effects: Go to Layer > Type > Convert to Shape.

If we look in the Layers palette now, we can see that our text layer has become a shape layer. Even though
the text still looks like, well, text in the document, the letters are now individual shapes, which means we
can now work with them the same way we could work with any other shape in Photoshop:

Photoshop Text Effects: The text now appears as a Shape layer in the Layers palette.

Step 8: Select The Path Selection Tool

We need to select all of our letters (shapes) at once. You may think we could use the Rectangular Marquee
Tool, but since we're working with shapes, we'll actually need a different selection tool - the Path Selection
Tool. Grab it from the Tools palette or press the letter A on your keyboard to select it with the shortcut:

Photoshop Text Effects: Select the Path Selection Tool.

Step 9: Drag A Selection Around The Entire Word

To select all the letters at once, simply click and drag out a selection box around the entire word, just like
you would if you were using the Rectangular Marquee Tool. You'll see a thin dotted outline appearing as
you drag:
Photoshop Text Effects: Drag a selection around the entire word with the Path Selection Tool.

Once you have the entire word surrounded by the selection, release your mouse button. The rectangular
selection outline will disappear, and you'll see that each individual letter now has an outline around it, with
little squares (called anchor points) sitting at different spots around the letters:

Photoshop Text Effects: All of the letters (shapes) are now selected.

If you want to learn more about working with paths and anchor points in Photoshop, I cover them in detail in
our popular Making Selections With The Pen Tool tutorial which you'll find in the Photoshop Basics
section of the website.

Step 10: Select The "Exclude Overlapping Shape Areas" Option

With all of our letter shapes now selected, go up to the Options Bar at the top of the screen. On the left,
you'll see a series of four icons, each one showing a different combination of squares. These icons represent
different options for how our shapes can interact with each other. The one we want for this effect is the one
on the far right - the Exclude overlapping shape areas option. Click on the icon to select it. If you have
Tool Tips enabled in Photoshop's Preferences, you'll see the name of the option appear when you hover over
the icon:

Photoshop Text Effects: Select the "Exclude overlapping shape areas" option in the Options Bar.

Step 11: Deselect The Letters

In a moment, we're going to drag the individual letters over top of each other so that the shapes will overlap.
The option we just selected in the Options Bar will cause the overlapping areas to disappear. Before we can
do that though, we first need to deselect the letters, otherwise if we try to drag any one of them, we'll end up
dragging all of them at the same time. To deselect the letters, simply click on any blank area in the
document. You'll see all the anchor points disappear from around the letters, telling us that the shapes are no
longer selected. You may still see an outline around the letters, but don't worry about it for now. We'll
remove it when we're done:

Photoshop Text Effects: Click on any blank area of the document to deselect the letter shapes.

Step 12: Drag The Letters Together So They're Overlapping

This is the fun part. With the Path Selection Tool still selected, click on the second letter in the word and
drag it towards the left until part of the letter is overlapping the first letter in the word. Like magic, the area
that overlaps disappears from view:

Photoshop Text Effects: The area that overlaps between the two letter shapes disappears.

Continue dragging each letter towards the left until part of it overlaps the previous letter. For added variety,
try rotating some of the letters with the Free Transform command. Simply click on the letter with the Path
Selection Tool to select, then press Ctrl+T (Win) / Command+T (Mac) to quickly bring up the Free
Transform box and handles around the letter. Move your cursor anywhere outside of the Free Transform
box, then click and drag to rotate the letter. Here, I'm rotating the letter T towards the left.

Photoshop Text Effects: The area that overlaps between the two letter shapes disappears.

When you're done rotating the letter, press Enter (Win) / Return (Mac) to accept the transformation.
Continue overlapping each letter until you reach the end of the word. Your final result should look
something like this:
Photoshop Text Effects: All of the letters in the word are now overlapping each other.

Step 13: Deselect The Vector Mask To Remove The Outline From Around The Text

The outline that's appearing around the text is making things look rather harsh, so let's get rid of it and clean
things up. The reason the outline is visible is because we currently have the vector mask selected on the
shape layer. If we look at the shape layer in the Layers palette, we can see that it contains a couple of
thumbnails. The thumbnail on the right is the vector mask thumbnail, which, as you can see by looking at it,
contains the shapes of our letters. If you look closely, you'll see a white highlight border around the
thumbnail. This means that we currently have the vector mask selected. Click directly on the thumbnail to
deselect it:

Photoshop Text Effects: Click on the vector mask thumbnail to deselect the vector mask and remove the
outline from around the text.

The highlight border will disappear from around the thumbnail in the Layers palette, and the outline will
disappear from around our text, allowing us to see what our final effect really looks like:

Photoshop Text Effects: The final "knock out" text effect.

To add even more interest to the effect, experiment with layer styles. For example, here's the result I came
up with by applying the same layer styles that I used in the Fun, Easy Gel Text Effect tutorial, which you'll
find listed with the rest of our Text Effects tutorials:
Photoshop Text Effects: The same effect after experimenting with layer styles.

And there we have it!

Create Simple 3D Text In Photoshop


Learn Photoshop with Photoshop Text Effects at Photoshop
Essentials.com!
In this Photoshop text effects tutorial, we'll learn how to create simple 3D text:

Photoshop Text Effects: The final 3D text effect.

Let's get started!

Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Step 1: Create a New Document

To begin, let's create a brand new Photoshop document. Go up to the File menu at the top of the screen and
choose New, or for a quicker way, press the keyboard shortcut Ctrl+N (Win) / Command+N (Mac).
Whichever way you choose, Photoshop pops up the New Document dialog box. Enter the size you need for
your document. For this tutorial, I'm going to enter a Width of 6 inches, a Height of 4 inches, and a
Resolution of 300 pixels/inch, which is a standard resolution for professional quality printing. I'm also
going to set my Background Contents to White, which will set the background color of my new document
to white. When you're done, click OK in the top right corner of the dialog box to exit out of it. Your new
Photoshop document will appear on the screen.
Photoshop Text Effects: Create a new Photoshop document using the New Document dialog box.

Step 2: Select The Type Tool From Photoshop's Tools Palette

To add text to the document, we'll need to use Photoshop's Type Tool. Select it from the Tools palette, or
press the letter T on your keyboard to select it with the shortcut:

Photoshop Text Effects: Select the Type Tool.

Step 3: Choose A Font From The Options Bar

Next, we need to choose a font. With the Type Tool selected, you'll notice that the Options Bar at the top of
the screen has changed to show the options for the Type Tool. Choose whichever font you'd like to use from
the list of fonts that you currently have available on your computer. This 3D effect works best with fonts that
have big, thick letters. I'm going to choose Impact. You can also choose a size for your text if you like, but
it's not really necessary at this point since we can easily change the size of the text later, as we'll see. For
now, all we need is the font:

Photoshop Text Effects: Choose a font from the Options Bar.

Step 4: Choose A Color For Your Text

Next, we need to choose a color for our text. If you look further to the right in the Options Bar, you'll see a
color swatch. The color swatch shows the current text color. To change the color, simply click on the color
swatch:
Photoshop Text Effects: Change the color of the text by clicking on the color swatch in the Options Bar.

This will bring up Photoshop's Color Picker. Choose whichever color you'd like to use for your text. I'm
going to select a bright shade of red. When you're done, click OK in the top right corner of the Color Picker
to exit out of it:

Photoshop Text Effects: Choose a new color for the text from the Color Picker, then click OK to exit out of
it.

The color swatch in the Options Bar will change to show the color you've selected.

Step 5: Add Your Text To The Document

With our font and text color selected, click inside the document and add your text. I'm going to type
"PHOTOSHOP", all in capital letters to enhance the effect. Don't worry if the text appears too large or too
small for now. We can fix that in a moment:
Photoshop Text Effects: Click inside the document and add your text.

When you're done typing, click on the checkmark in the Options Bar to accept the text and exit out of text
editing mode:

Photoshop Text Effects: Exit out of text editing mode by clicking on the checkmark in the Options Bar.

If we look at our Layers palette, we can see that Photoshop has conveniently placed our text on its own layer
above the Background layer. This is what will allow us to work with the text independently from the white
background behind it:

Photoshop Text Effects: The text appears on its own layer in the Layers palette.
Step 6: Resize The Type If Needed

If your find that your text is too small (or too large), we can easily fix that using Photoshop's Free
Transform command. First, make sure your text layer is selected in the Layers palette (selected layers are
highlighted in blue). Then go up to the Edit menu at the top of the screen and choose Free Transform. You
can also select the Free Transform command with the keyboard shortcut Ctrl+T (Win) / Command+T
(Mac):

Photoshop Text Effects: Select "Free Transform" from the Edit menu.

You'll see the Free Transform box and handles appear around your text in the document. To resize the text,
hold down your Shift key, then click any of the corner handles (the little squares) and drag the corner
inward to make the text smaller or outward to make it larger. Holding the Shift key down as you drag
constrains the aspect ratio so you don't accidentally distort the shape of the text as you're resizing it. I'm
going to make my text just a little bit bigger by dragging the handle in the bottom right corner outward. You
can also move the text if you need to by clicking anywhere inside of the Free Transform box and dragging
the text to a new location inside the document:

Photoshop Text Effects: Resize and move the text as needed with Free Transform.
When you're done, press Enter (Win) / Return (Mac) to accept the change and exit out of the Free
Transform command.

Step 7: Convert The Text To A Shape

To create our 3D effect, we need to alter the perspective of our text. There's only one problem though.
Photoshop doesn't allow us to alter the perspective of text (see how that can be a problem?). To show you
what I mean, make sure you still have the text layer selected, then go up to the Edit menu at the top of the
screen and select Transform from the list. A secondary menu will appear showing all the various ways we
can transform the contents of the layer we currently have selected. Notice how the Distort and Perspective
options are grayed out? That means they're currently unavailable to us, and that's because Photoshop can't
perform either of these two types of transformations on text.

The solution is to convert our text layer into what's called a shape layer. By converting the text to a shape,
we'll be able to change the perspective of it and create our effect. The only downside to converting text to a
shape is that the type will no longer be editable. In this case though, since we have no need to edit our text,
we don't need to worry about it.

With the text layer still selected, go up to the Layer menu at the top of the screen, choose Type, and then
choose Convert to Shape:

Photoshop Text Effects: Go to Layer > Type > Convert to Shape.

If we look in the Layers palette, we can see that the text layer now looks completely different, and that's
because it's no longer a text layer. Photoshop has converted it to a shape layer, which means we're now free
to apply a Perspective transformation to it and create our 3D text effect:

Photoshop Text Effects: The text layer has been converted to a shape layer.

Step 8: Change The Perspective

Go back up to the Edit menu. You'll see that the Transform option we looked at a moment ago has been
replaced with a new option named Transform Path. Again, that's because we're dealing now with a shape.
Choose Transform Path from the list. When the secondary menu appears, you'll see that both the Distort and
Perspective options are now available. Choose Perspective from the list:
Photoshop Text Effects: Go to Edit > Transform Path > Perspective.

The same box and handles that we saw earlier when we selected the Free Transform command will appear
around the text (shape). The difference is, we're now working in Perspective mode. To change the
perspective of the text and give it a three dimensional look, simply click on the handle in the bottom right
corner and drag it straight down. As you drag, the height of the right side of the text will increase from its
center, while the left side will remain unchanged:

Photoshop Text Effects: Click on the bottom right corner handle and drag downward.

When you're happy with the perspective shift, press Enter (Win) / Return (Mac) to accept the
transformation. Your text should now look something like this:

Photoshop Text Effects: The text now appears with a 3D perspective.


Step 9: Create Multiple Copies Of The Shape Layer, Each One Moved Slightly
Further To The Right

This next step is the fun part. We're going to very quickly create multiple copies of our shape layer, each one
moved one pixel further to the right from the previous one. This will give our letters some depth. First, select
the Move Tool from the Tools palette, or just press the letter V on your keyboard to select it with the
shortcut. This trick only works with the Move Tool selected:

Photoshop Text Effects: Select the Move Tool.

With the Move Tool selected and the shape layer selected in the Layers palette, hold down your Alt (Win) /
Option (Mac) key and press the right arrow key on your keyboard. Then press it again. Then again. And
again. Notice what's happening? Each time you press the right arrow key with the Alt / Option key held
down, you're creating a new copy of the shape layer and you're moving the new copy one pixel over to the
right. Holding down Alt / Option tells Photoshop to create a new copy of the shape each time rather than
simply moving the existing shape. The more times you press the right arrow key, the more copies of the
layer you'll create, and the more depth we give to our letters.

Keep pressing the right arrow key until you're happy with the results. In my case, I pressed the arrow key a
total of 68 times, creating 68 copies of my shape, each one moved one pixel further to the right. The number
of times you press the arrow key will depend on the resolution of the document you're working with. When
you're done, your text should look something like this:

Photoshop Text Effects: Hold down Alt (Win) / Option (Mac), then press the Right arrow key multiple times
to give the letters depth.

Step 10: Move The Original Shape Layer To The Top Of The Layer Stack In The
Layers Palette

Each time we created a new copy of our shape, we created a new shape layer in the Layers palette, and
Photoshop placed each new layer directly above the previous layer. In my case, my Layers palette now
contains 68 copies of my original shape layer. The original shape layer is sitting above the Background
layer, with all the copies piled on top of it. You can tell it's the original because it's the only shape layer that
doesn't contain the word "copy" in its name.
We need to move that original layer to the very top of the pile, and there's an easy way to do it. First, click
on the original layer in the Layers palette to select it. Then, press Ctrl+Shift+] (Win) / Command+Shift+]
(Mac). That's the right bracket key ("]") in case you're wondering. This convenient shortcut will instantly
move the currently selected layer directly to the top of the layer stack:

Photoshop Text Effects: The original shape layer now appears above the other layers in the Layers palette.

Step 11: Merge All The Copies Together

With our original layer now at the very top of the layer stack, we need to merge all of those copies of the
shape layer down to one layer. Click on the layer directly below the original layer in the Layers palette (in
other words, the second layer from the top). Then use the scroll bar on the right of the Layers palette to
scroll down to the layer directly above the Background layer. Don't just click on it though to select it
because that will deselect the layer you just selected at the top. Instead, hold down the Shift key on the
keyboard and then click on the layer to select it. This will select both layers at the same time, along with
every layer in between them. All of these layers will appear highlighted in blue in the Layers palette.

With all of our copied layers now selected, go up to the Layer menu at the top of the screen and choose
Merge Layers down near the bottom of the list. Or for a faster way, press the keyboard shortcut Ctrl+E
(Win) / Command+E (Mac):

Photoshop Text Effects: Go to Layer > Merge Layers.

Photoshop will merge all of the selected layers into a single layer. If we look in our Layers palette, we can
see that we now have only three layers. The Background layer is on the bottom, the original shape layer is
on the top, and in between them is our newly merged layer:
Photoshop Text Effects: All of the shape layer copies have been merged into a single layer.

Step 12: Add A Black-To-White Gradient To The Merged Layer

To give our letters a truly 3D appearance, let's complete things by adding a simple lighting effect. Or at
least, something that looks like a lighting effect. Click on the merged layer in the Layers palette to select it if
it's not selected already. Then click on the Layer Styles icon at the bottom of the Layers palette. A list of all
the available layer styles will appear. Click on Gradient Overlay to select it:

Photoshop Text Effects: Select a Gradient Overlay layer style from the bottom of the Layers palette.

This will bring up Photoshop's Layer Style dialog box set to the Gradient Overlay options in the middle
column. We want to use a black to white gradient for our fake lighting effect. If you already have the black
to white gradient selected, you can skip this next step. If you have some other gradient selected, click on the
gradient preview area in the middle of the options:
Photoshop Text Effects: Click on the gradient preview area in the Layer Style dialog box to choose a new
gradient.

This brings up the Gradient Picker, showing us all the available gradients we can choose from. The one we
want is the Black, White gradient, third from the left, top row. If you have Tool Tips enabled in Photoshop's
Preferences, you'll see the name of the gradient appear when you hover over the thumbnail. Click on it to
select it, then click OK in the top right corner to accept it:

Photoshop Text Effects: Choose the Black, White gradient.

Back in the main Gradient Overlay options, you'll see the gradient preview area now showing the black to
white gradient (if it wasn't already). Below it are a couple of important options. Make sure the Style option
is set to Linear and the gradient Angle is set to 90°:

Photoshop Text Effects: Make sure the Style option is set to Linear and that the Angle is set to 90°.
Click OK when you're done to exit out of the Layer Style dialog box, and we're done! Photoshop applies the
black to white gradient to the merged layer, creating a shadow effect on the letters and completing our
simple 3D text effect:

Photoshop Text Effects: The final 3D text effect.

And there we have it!

Text Reflection Effect in Photoshop


Learn Photoshop with Photoshop Text Effects at Photoshop
Essentials.com
In this Photoshop text effects tutorial, we're going to create a simple text reflection effect. This effect has
been used everywhere in advertising, and as we'll see, it's very easy to do.

Photoshop Text Effects: The final text reflection effect.

Let's get started!


Want a better way to learn? Download this tutorial as an easy to read, ready to print PDF eBook!

Step 1: Create A New Photoshop Document

Create a new blank Photoshop document by going up to the File menu at the top of screen and choosing
New. You can also create a new document with the keyboard shortcut Ctrl+N (Win) / Command+N (Mac).
Either way brings up Photoshop's New Document dialog box. Enter the dimensions you need for your
document. For this tutorial, I'm going to enter 6 inches for my document's Width, 3 inches for the Height,
and a Resolution of 300 pixels/inch. Click OK when you're done to exit out of the dialog box. Your new
blank document will appear on your screen:

Photoshop Text Effects: Create a new blank Photoshop document.

Step 2: Fill The New Document With Black

This step is optional, but I'm going to use black as the background color for my document rather than the
default white. If you'd prefer to stick with white, you can skip this step. To fill the document with black, go
up to the Edit menu at the top of the screen and choose Fill to bring up Photoshop's Fill command:

Photoshop Text Effects: Go to Edit > Fill.

You can also select the Fill command with the keyboard shortcut Shift+F5. Either way brings up the Fill
dialog box. At the top of the dialog box is the Contents section, with one option simply named Use. Select
Black from the list to the right of the word Use:
Photoshop Text Effects: Select Black in the Contents section at the top of the Fill dialog box.

Click OK when you're done to exit out of the dialog box, and Photoshop fills the document with black:

Photoshop Text Effects: The background of the document is now filled with black.

Step 3: Select The Type Tool

To add text to the document, we need Photoshop's Type Tool. You can either click on it in the Tools palette
to select it, or for a faster way, press the letter T on your keyboard to select it with the shortcut:

Photoshop Text Effects: Select the Type Tool.

Step 4: Select A Font

With the Type Tool selected, go up to the Options Bar at the top of the screen and choose the font you'd
like to use for the effect. Your choice of fonts will depend on which fonts you currently have installed on
your computer. I'll stick with something simple and choose Gill Sans Light for my effect. Don't worry about
the size of the font for now:

Photoshop Text Effects: Choose a font from the Options Bar.

Step 5: Select A Color For The Text

Next, we need to choose a color for our text. There's a few different ways to choose a text color in
Photoshop. For this tutorial, I'm going to use a very simple and quick way, which is to select a ready-made
color from the Swatches palette. Switch over to your Swatches palette, which by default is grouped in
between the Color and Styles palettes. The Swatches palette contains a collection of color swatches that are
installed by default with Photoshop. To choose one of the colors, simply move your mouse cursor over its
color swatch. You'll see the cursor change into an eyedropper. Click on the swatch with the eyedropper to
select the color. I'm going to choose the red swatch in the top left corner:

Photoshop Text Effects: Choose a color for the text by clicking on a color swatch in the Swatches palette.

Step 6: Add Your Text

Once you've chosen a color, click anywhere inside the document and add your text. I'm going to type the
word "REFLECTIONS", all in capital letters:

Photoshop Text Effects: Add your text to the document.


When you're done, click on the checkmark in the Options Bar to accept your text and exit out of text editing
mode:

Photoshop Text Effects: Click on the checkmark in the Options Bar to accept the text.

Step 7: Resize The Text If Needed With Free Transform

If you need to resize your text, go up to the Edit menu at the top of the screen and choose Free Transform,
or press the keyboard shortcut Ctrl+T (Win) / Command+T (Mac). Either way brings up Photoshop's Free
Transform command which will allow us to easily resize the text and move it as well if we need to:

Photoshop Text Effects: Go to Edit > Free Transform.

Once you've selected it, you'll see the Free Transform box and handles appear around your text in the
document. To resize the text, hold down your Shift key, which will prevent you from accidentally distorting
the width-to-height aspect ratio of the text as you resize it, then simply click on any of the four corner
handles (the little squares) and drag them inward to make the text smaller or outward to make it larger. To
move the text, click anywhere inside the Free Transform box and drag the text to a new location. Just don't
click on the small target symbol in the very center of the box, otherwise you'll move the target symbol, not
the text. I'm going to make my text a bit larger by holding Shift and dragging the handle in the bottom right
corner outward. I'm also going to drag the text down a little bit so that the bottom of the text appears closer
to the horizontal center of the document:

Photoshop Text Effects: Use Free Transform to resize and/or move the text if needed.
When you're done, press Enter (Win) / Return (Mac) to accept the transformation and exit out of the Free
Transform command.

Step 8: Duplicate The Text Layer

Now that we have our text, we can begin creating the reflection effect. The first thing we'll need is a copy of
our text, so let's duplicate the text layer by going up to the Layer manu at the top of the screen, choosing
New, and then choosing Layer via Copy. Or, for a much faster way to duplicate a layer, simply press the
keyboard shortcut Ctrl+J (Win) / Command+J (Mac):

Photoshop Text Effects: Go to Layer > New > Layer via Copy.

Either way tells Photoshop to make a copy of our text layer. Nothing will seem to have happened in our
document, but if we look at our Layers palette, we can see that we now have a copy of the layer sitting
directly above the original (notice that the copy has the word "copy" in its name):

Photoshop Text Effects: A copy of the text layer appears above the original.

Step 9: Flip The Text Layer Vertically

Next, we need to flip our copied text layer upside down, and Photoshop just happens to come with a
command designed specifically for such a task. Go up to the Edit menu once again, choose Transform, and
then choose Flip Vertical:

Photoshop Text Effects: Go to Edit > Transform > Flip Vertical.


The copied text layer will appear flipped upside down in front of the original text layer, creating an
interesting, although entirely unreadable, visual effect:

Photoshop Text Effects: The copied text layer appears upside down in front of the original text.

Step 10: Drag The Copied Text Below The Original

Select the Move Tool from the Tools palette, or press the letter T to select it with the keyboard shortcut:

Photoshop Text Effects: Select the Move Tool.

Then, with the copied text layer still selected in the Layers palette (selected layers are highlighted in blue),
hold down your Shift key, then click inside the document and drag the copied, upside down text below the
original text. Holding the Shift key as you drag makes it easier to drag the text straight down, since it
prevents you from accidentally moving left or right:
Photoshop Text Effects: Drag the copied text down until it's just below the original.

Step 11: Add A Layer Mask To The Flipped Text

At this point, all that's left to do in creating our reflection effect is to make our upside-down text fade from
top to bottom into transparency. For that, we'll use a layer mask. To add a layer mask to our copied text
layer, make sure you still have the copied text layer selected, then simply click on the Layer Mask icon at
the bottom of the Layers palette:

Photoshop Text Effects: Click on the Layer Mask icon at the bottom of the Layers palette.

Nothing will happen in the document, but you'll notice that a small white rectangle has appeared on the right
of the text layer in the Layers palette. This is the layer mask preview thumbnail, letting us know that we
now have a layer mask on this layer, even though we haven't actually done anything with it yet:
Photoshop Text Effects: A layer mask preview thumbnail appears on the copied text layer in the Layers
palette.

Step 12: Select The Gradient Tool

To make the text on this layer fade into transparency, we need to draw a black-to-white gradient on our layer
mask (for more information on how layer masks work, be sure to check out our complete Understanding
Layer Masks tutorial in the Photoshop Basics section of the website). To draw a gradient, we'll need to use
Photoshop's Gradient Tool, so either select it from the Tools palette or simply press the letter G on your
keyboard to select it with the shortcut:

Photoshop Text Effects: Select the Gradient Tool.

With the Gradient Tool selected, you'll see that the Options Bar at the top of the screen has changed to show
you options specifically for the Gradient Tool. Over on the left of the Options Bar, you'll see a gradient
preview area showing you the currently selected gradient. In my case, it's already showing the black to
white gradient that I need. If yours is also showing the black to white gradient, you can skip this step. If
you're seeing different colors in your preview area, click directly on the preview area:

Photoshop Text Effects: Click on the gradient preview area in the Options Bar.

This brings up Photoshop's Gradient Editor, which shows us a collection of gradients that we can choose
from. The one we want is the black to white gradient, third from the left, top row. Click on it to select it,
then click OK in the top right corner of the dialog box to exit out of it:
Photoshop Text Effects: Select the black to white gradient from the Gradient Editor.

Step 13: Draw A Vertical Gradient From Bottom To Top Along The Upside Down Text

With the Gradient Tool and the black to white gradient selected, all we need to do now is draw a vertical
gradient along our upside down text. First, make sure you have the layer mask selected, not the layer itself.
You should see a white highlight border around the layer mask thumbnail in the Layers palette which tells
us that the layer mask is selected. Click on the layer mask preview thumbnail to select it if you don't see the
highlight border around it.

To draw the gradient, click inside the document roughly 3/4 of the way down towards the bottom of the
upside down text. Then hold down your Shift key and drag up to the point where the upside down text meets
the original text. Holding the Shift key as you drag prevents you from moving left or right as you drag
upward:

Photoshop Text Effects: Click and drag a black to white gradient vertically along the upside down text.

Release your mouse button when you're done, which is when Photoshop actually draws the gradient, and
you'll see that the upside down text now fades away as you move further down towards the bottom of the
letters:
Photoshop Text Effects: The bottom text now fades into transparency after drawing the gradient on the layer
mask.

Since we drew the black to white gradient on the layer mask, we can't actually see it in the document, but we
can see it if we look at the layer mask preview thumbnail in the Layers palette:

Photoshop Text Effects: The layer mask preview thumbnail shows the actual black to white gradient.

Step 14: Adjust the Opacity Of The Layer To Fine Tune The Effect

If you want your text reflection to appear a little more faded, simply go up to the Opacity option in the top
right corner of the Layers palette and lower the opacity of the layer. I'm going to lower mine down to 50%:
Photoshop Text Effects: Lower the opacity of the layer to fade the reflection even more.

Here, after lowering the opacity, is my final text reflection effect:

Photoshop Text Effects: The final text reflection effect.

And there we have it!

You might also like