Animation banner

In this Photoshop tutorial we will create an animated banner for the site.

1. Create a new document of the size you need. The size of our banner will be 380×50 px.

2. Place on your document a background image that will be static.

3. Write the text.

If the text consists of several lines, then write each line on a new layer.

4. Stand on the first text layer.
Click in the layers palette on the button “Add layer mask”
Take the tool , highlight text.

Then click Ctrl + Alt + D, to make a slight feathering, set the value 2 px.
Now set the color black, take the Fill and fill the selection with the active mask. The selection should be white.
Ctrl + D – deselect.

Repeat the same steps with other text layers.

Here is what your layer palette will look like.

Find an image like my pencils – they will open words.

Go to Image Ready.

For the first frame, close the eyes at the text layers and move the pencils to the place where the first phrase begins. I have this “Video lessons …”

Click on the button “Duplicate frame”

Now move the pencils to the end of the phrase. Go to the layers palette, open the eye opposite the first text layer and remove the bonding icon between the layer and the mask.

Click on the mask to make it active.

Return to the document and use the right arrow on the keyboard to drag off the mask from the text until it is fully opened.

Try to use arrows in this lesson !!!

Click on the button “multiply” and in the window set the number of frames 10 pcs.

Duplicate the last frame and hide the pencil layer.

And now we repeat all the above steps for two more text layers. Open the pencils, drag to the beginning of the phrase, hide the first text layer, then open the second one, etc.
If you have forgotten, see above.

I ended up with 38 shots. I set the time 0.1 sec

Now File – Save optimized as …, save in gif format.

Here’s what I got (a slightly abbreviated version)

See you at www.!

Like this post? Please share to your friends: