Tutorial: Making mirrored text effects on PhotoShop

[tech_support]

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.

[djr33]

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.

[shachi]

Works only for photoshop users though.

[djr33]

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.

[shachi]

That may be easy for you(as an experienced programmer) but it seems impossible for me.

[djr33]

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.

[shachi]

Yea gimp can do that but I am not sure about the liquify thing.

[djr33]

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.
http://ci-pro.com/misc/phptest/images/mirror.php


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

Source:

<?php
$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');
imagejpeg($img,"","95%");
imagedestroy($img);
?>

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.

[tech_support]

Cool man

I might consider writing more tutorials later on...

[shachi]

drj33: 10/10

Wouldn't still be easy for me though