make animated pictures your Website using Adobe Photoshop

[BlueEyesGirl]

Adobe Photoshop is the most famous graphic design software today. It not only is a powerful tool for editing photos but also enables you to create animated pictures most simply so that you can use them as the banner for your Website.
Example

How to create animated pictures with photoshop?

Step 1: Open Adobe Photoshop. press Ctrl +N to create a new image file
Step 2: Select the Text tool to create a new Text file. For example, Type "Tai"

 

 

Next, to create the 2nd Text file, type "mien" next to the first file.

 

 

For the 3d Text file, type "phi" next to the second one.

 

 

And finally, for the 4th Text file, type ".vn".

 

 

Note: You are free to type the number of letters, select color, font and font size.

Now, at the layer frame, we have 4 Text files and 1 background file in total.

 

Step 3: Open Animation by clicking Windows on the toolbar, (if your computer uses Adobe Photoshop.  10.0 and later) or press Ctrl+Shift+M to open Image Ready (if your computer uses Photoshop 9.0 and earlier).

 

Step 4: To create 4 frames for 4 Text files, click “Duplicate selected frames” (on the left of the trash icon)

Create 4 frames corresponding to 4 Text files by clicking that tool 4 times.

 

So we have 5 frames in total including one for the background file and 4 for 4 Text files.
Continue to the last frame.

Step 6: Next, you just need adjust time so that frames appear one by one by clicking on the "black inverted triangle" and selecting time for each Frame.
 

Click Save to save the animated picture.

Source Tip : http://tips.betdownload.com/photoshop-make-an-animated-gif-simply-and-easily-341n.aspx on http://betdownload.com

[BRiteBak]

Awesome!

 

Saved for future reference!

[Geekazoid]

@BlueEyesGirl, not to pick but I think if you include "on" in your topic title it may read better.

I think you meant it to say "Make Animated Pictures On Your Website Using Adobe Photoshop".

BTW, nice tutorial.

[SJBijzitter]

I would NOT do this, the quality of .gif animations is poor to say the best.

Using JavaScript you can make MUCH better animations and they're also easier to edit on the fly.

Example: http://jschr.github.io/textillate/

It's a good tutorial, but this shouldn't be used for websites.

[Nineshadow]

You shouldn't have just copy-pasted the thing,you could have added your own comments or something like that.

[YouRezz]

Nice tutorial.. i'll play with this

[StormtrooperStu]

Do you work for Adobe ?

[BlueEyesGirl]

@StormtrooperStu . No, I don't.

 

@Nineshadow  OK,I would keep in mind

[omniomi]

Click Save to save the animated picture.

 

 

^ Is not accurate. In Photoshop to save a GIF and preserve the animation you need to use the "Save for Web & Devices" option not simply the Save or Save As and you need to select GIF and configure the animation settings (loop, play once, etc.)

 

The instructions would also give you a GIF with no animation because it skips the part where you hide all of the layers and then set the visible layers per-frame. The steps should be hide all except text layer one, crate new frame, show text layer two, create new frame, show text layer 3, and so on.... but even still that's going to give you a choppy anymated GIF and the better way is to type all of the text on a single layer, add a layer mask, unlink the layer mask from the layer, and keyframe the layer mask across a number of animation frames. Such as in this GIF which took all of about 10 seconds to make:

 

 

I created a layer mask roughly the same shape as the horse on the text later and keyframed it to follow the horse across the image... Gives you a smoother text wipe in effect.

 

Also....

 

(if your computer uses Photoshop 9.0 and earlier).

 

 

Photoshop 9? Really? That's CS2 which came out in 2005