• Home
  • About
  • Advertise
  • Contact Us
Blue Orange Green Pink Purple

Self Writing Text

Posted in Animation. on Friday, July 3rd, 2009 by Tutorial Park Tags: Animation, photoshop, tutorial
Jul 03

Self Writing TextLearn how to make self-writing text with the help of Adobe Photoshop and Adobe ImageReady.


1. Start a new document 400×400. Select Type Tool (T) and write any text you want. In this tutorial we’ll use a “WDL” text. Set the font family ” Freestyle Script ” or any font that looks like hand-writing, text size 72.

image 1

2. Select Pen Tool (P). In Shape Tools options choose Paths. Click where you want the path to begin. Then click where you want the path to end.

image 2

With the left mouse button held down, drag the points to make accentuation shape.

image 3

3. Select Brush Tool (B). Set Hard Round 3px Brush. Now go to Window>Brushes (F5) and use the following “Shape Dynamics” settings: Control: “Fade” 150. Create new layer (Ctrl+Shift+N). Select Pen Tool (P) again, right click on the shape and select Stroke Path… Use Brush to stroke. Repeat Stroke Path one more time.

image 4

Now it’s time to switch to ImageReady (Ctrl+Shift+M)

The main idea is that in each frame you should delete almost whole image, leaving the already written lines. Each frame should contain a bit more image in comparison to the previous one, until the whole phrase is written… But let ‘ s do it step – by – step :

1. First you should prepare your workspace. In Layers Palette you should have something like this:

image 5

Select Shape 1 layer (left mouse click) and delete it (Layer>Delete Layer). Then select Layer 1 and merge it with WDL text layer (Layer>Merge Layers or Ctrl+E). Duplicate it (Layer>Duplicate Layer or Ctrl+J). Hide “WDL” layer (just click on the eye left to the layer).

image 6

Call rulers (View>Rulers) and start adding lines (just drag ruler to the place you need). Add every 5 px horizontal rulers on the WDL text. This will show you writing stepping.

Open Animation Panel (Window>Animation)

2. Now everything is ready. The first frame should contain the beginning of the text. In our case it is the upper left part of the “W” letter. Select Eraser Tool (E) and erase everything, except the upper left part. In animation panel set frame delay time to 0.04. The first frame is ready.

3. Click the Duplicate Current Frame button on the Animation panel.

image 7

Now make invisible your top (WDL copy) layer. Duplicate WDL Layer and make this duplicate visible. Select this layer.

image 8

As in step 2, select Eraser Tool (E) and erase everything, except the upper left part, but now leave some more (remember about rulers – use them to measure how many you should erase).

4. Repeat step 3 until you see the frame which will contain all letters and underlining.

5. Make new empty frame. Then click on Tween in Animation panel and use the following settings:

image 9

This is done to make your text disappear after it is written.

6. Now it’s time to change the frame delay time. To make your animation look more realistic, you should change the delay time in some places. The biggest delay should be between your letters (about 0.35 ms). Also, you may set a small delay in the sharp curves of the letters (about 0.06 ms). The last frame should have the 0.6 ms delay .

Animation1

7. That’s it! You can use this effect for you signings, greetings and other – looks very impressive!

Self Writing Text Tutorial: Final Result

4 Comments

  1. LeviD on July 17th, 2009

    Very nice toturial !!!

  2. Self Writing Text « photoshop tutorials on July 26th, 2009

    [...] Freestyle Script ” or any font that looks like hand-writing, [...] View The Original Post HERE Tagged as: Adobe No Comments Comments (0) Trackbacks (0) ( subscribe to comments on this post [...]

  3. Christy on August 28th, 2009

    this is kinda of confusing…

  4. ghada on September 23rd, 2009

    thanks a lot

  5. Hipolito M. Wiseman on February 12th, 2010

    thanks !! very helpful post!



Leave a Reply

Spam Protection by WP-SpamFree

Tutorial Park

  • templated business
    templated business
  • Search


  • Categories
    • Animation
    • Drawing
    • Freebies
    • Photo Effects
    • Text Effects
    • Tutorial Reviews
  • Recent Tutorials
    • 3D Valentine’s Day Typography
    • St. Valentine’s Photo Manipulation
    • Na’vi Avatar Photo Manipulation
    • Thanksgiving Wallpapers
    • Google Text
    • Jack-O-Lantern Drawing Tutorials
  • Featured Partners

      Web Design Library

      flash websites

      build a website

      flash intro
  • Tutorial Park Tags

      angel animals Animation ball batman business car Casino Royale cat catroon design digg earth frog glass half life 2 Harry Potter hearts icon icon set James Bond jewelry logo lollypop mafia monster navigation bar photo photoshop photoshop tutorial photoshpo plastic poster quake sunflower template transformers tutorial typography vector video vintage wall-e wallpaper watercolor

      WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.





  • Home
  • About
  • Advertise
  • Contact Us

© 2004-2010 Copyright Tutorial Park. All rights reserved.
Designed by FTL Wordpress Themes. Website promoted by SEO Software.

Back to Top