View Full Version : Tutorial: Making mirrored text effects on PhotoShop

10-15-2006, 12:01 AM
I've decided to write a tutorial on mirrored text effects after someone emailing me.

So... here it goes. (Assuming that you don't need images to follow)

1. Fire up PhotoShop
2. Create a new Document
3. Type your text
4. Duplicate the layer
5. Rename the first layer 'text2'
6. While on the same layer, press CTRL + T
7. Change the height to -100%
8. Press Shift + Down Arrow
9. Press Layer Mask
10. Press the Mask you just created
11. Press the Gradient tool and drag from the bottom of the page upwards

And there - Your done.

Here's mine (with a bit of tweaking):


Post your results here and tell me what you think about it.

10-15-2006, 10:16 AM
You might also want to add some sort of blur or ripple effect to the reflected text. (For more control, you could use the liquify tool/filter to do the ripples by hand... it can create a cool effect.)

The mirror effect works fine, though.

10-15-2006, 11:15 AM
Works only for photoshop users though. :p

10-15-2006, 11:46 AM
The same theories are easily applied to any similar graphics application that has such abilities.
It would even be fairly easy to code this with php's GD library, due to the simpicity of the math involved.... the gradient is easy, the text is just text, then mirroring would just be inverting the y values around the x axis. //random.

10-15-2006, 11:55 AM
That may be easy for you(as an experienced programmer) but it seems impossible for me.

10-15-2006, 12:01 PM
Ha, nah. I just play with php. A lot.
I'm kidding about it being easy, but the actual manipulation of pixels isn't that complex.
It would be a pain to code (though an interesting exercise).

But using that in another graphics application is easy enough. Make text; mirror text. place on background.

Paint can't do it, but most other graphics editors should be able to.

10-15-2006, 12:08 PM
Yea gimp can do that but I am not sure about the liquify thing.

10-15-2006, 01:17 PM
liquify is likely photoshop only. It is a "filter", sorta. It opens in a new window with a unique set of tools (including a magnifying glass and hand to drag the image around), and you can choose from them to do various things to distort the image.
The most useful is the tool that is somewhat like the smudge tool in the regular part of PS, but it basically lets you mold the image... totally distort it.
I'm sure it's possible to creat something like it in gimp.

So, I felt like testing out my "it's easy" statement above. Wasn't so bad.

You can specify the width/height/text like this:
http://ci-pro.com/misc/phptest/images/mirror.php?width=40&height=50&text=Test (http://ci-pro.com/misc/phptest/images/mirror.php?width=40&height=50&text=Test)


$width = (isset($_GET['width']) ? $_GET['width'] : 403);
$height = (isset($_GET['height']) ? $_GET['height'] : 30);
$text = $_GET['text'];
if ($text == "") {$text="The quick brown fox jumped over the lazy dog.";}
list($tcr, $tcg, $tcb) = array(0,0,0);
list($gctr, $gctg, $gctb) = array(255,0,0);
list($gcbr, $gcimg, $gcbb) = array(0,255,255);

$img = imagecreatetruecolor($width,$height);

for($y=0;$y<$height;$y++) {
$percent = (($y+1)/$height);
$r = ($percent*$gctr)+((1-$percent)*$gcbr);
$g = ($percent*$gctg)+((1-$percent)*$gcimg);
$b = ($percent*$gctb)+((1-$percent)*$gcbb);
$rowpxcolor = imagecolorallocate($img, $r, $g, $b);
for ($x=0;$x<$width;$x++) {
imagesetpixel($img, $x, $y, $rowpxcolor);

function flipimage($image) {
global $width;
global $height;
$image2 = imagecreatetruecolor($width,$height);
for($y=0;$y<$height;$y++) {
for ($x=0;$x<$width;$x++) {
imagesetpixel($image2, $x, ($height-$y), imagecolorat($image,$x,$y));
return $image2;

$textcolor = imagecolorallocate($img, $tcr, $tcg, $tcb);
imagestring($img, 5, 0, 0, $text, $textcolor);
$img = flipimage($img);
imagestring($img, 5, 0, 0, $text, $textcolor);
$img = flipimage($img);

header('Content-Type: image/jpeg');

The problem at this point is that the text isn't centered, vertically or horizontally. It's possible, but I'd need to based that on the width of the text generated, so I guess I'd need to render the text to test out how wide it becomes.
I might look into this more later.

Also, the color is ready to be customized, but entering it in the URL as is would be a pain. I should add hex to decimal conversion for that.

But for now, there you go.

EDIT: Fading, blurring, rippling, etc. are also missing. Might look into that later as well.

10-16-2006, 10:58 AM
Cool man :D

I might consider writing more tutorials later on...

10-16-2006, 11:01 AM
drj33: 10/10

Wouldn't still be easy for me though

10-16-2006, 11:02 AM
And me too.

10-16-2006, 11:08 AM

Well, just play with the GD functions.

If you're the type of person (I am) who can do the pixel by pixel logic in your head, then that should work for you. It's tough to keep track of, but not insanely complex or anything.

10-17-2006, 07:36 AM
Wow. Pixel by Pixel logic in your head. That's amazing.

Nice avatar by the way.

10-17-2006, 08:12 AM
Glad someone noticed the avatar. It's a ping pong ball. 4" monkey. 'Tis awesome.

Pixel by pixel logic isn't that hard... it's just about breaking things apart.
Mainly-- colors.
For example, I've been working on and off on a bluescreen script that takes out a blue background behind actors. It works pretty well, but I do need to work some more of it out.
At the moment, the problem is just figuring out what percent is blue and what percent of the blue to leave/what percent of the image to mix with that

Interesting stuff. The GD functions of php aren't all that complex, but they're weird and new (to me), but I'm getting used to them now.

Sorry for hijacking.

If you want to write tutorials on the subject of graphics and other things (even indirectly) related to filmmaking, we host tutorials (and other stock materials) at my filmmaking site/forum:
(another example of php at that... check out the search.)