PDA

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



tech_support
10-14-2006, 11:01 PM
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):

http://img101.imageshack.us/img101/1479/peterwe2.png

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

djr33
10-15-2006, 09: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.

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

djr33
10-15-2006, 10: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.

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

djr33
10-15-2006, 11:01 AM
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
10-15-2006, 11:08 AM
Yea gimp can do that but I am not sure about the liquify thing.

djr33
10-15-2006, 12: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.
http://ci-pro.com/misc/phptest/images/mirror.php
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 (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
10-16-2006, 09:58 AM
Cool man :D

I might consider writing more tutorials later on...

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

Wouldn't still be easy for me though

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

djr33
10-16-2006, 10: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.

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

Nice avatar by the way.

djr33
10-17-2006, 07: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:
http://thebrb.com/stockpile
(another example of php at that... check out the search.)