Animated Advertising

In this tutorial I will show you how to create an animated advertising. Read the other tutorials in section Designing from: http://tutorials.assistprogramming.com and feel free to combine in creating your own animations.

First open an image in Adobe Photoshop and apply View > Rulers and divide an image into 6 parts. Go to View > New Guide and make a horizontal guide (125 pixels) and two vertical (100px and 200px) guides like in the image below:

Choose the Rectangular Marquee Tool and create a selection inside the top left square of the picture.

Then apply Layer > New > Layer via Copy (Ctrl+J) to create a new layer from the selection. Now go back to the picture layer and repeat this step for every square you have - be careful to have selected the background layer every time you make a new layer. Go to the picture layer and delete it. Now create a new layer, select Paint Bucket Tool and fill it with a red color. Then choose Horizontal Type Tool (T) and type something. Now place all layers like in the image:

Press Shift+Ctrl+M to edit the image in ImageReady. Now go to “Do you need help?” layer and turn it on. Press ‘Duplicates current frame‘ button on Animation panel. Choose these two frames and press ‘Tween…‘ button (or hit the top right arrow and select Tween) and make the following settings: Tween With -> Selection, Frames to Add -> 3, Layers -> All layers, Parameters: Position->On, Opacity->On, Effects->On.

Now duplicate the last frame. Now go to “Layer 2″ and turn it on. Choose last two frames and press ‘Tween…’ button with the following settings: Tween With -> Selection, Frames to Add -> 5, Layers -> All layers, Parameters: Position->On, Opacity->On, Effects->On. Duplicate the last frame.

Then repeat this with layers 4, 6, 1, 5, 3.

Now turn on “Read our articles” layer. Choose last two frames and press ‘Tween…’ button with the following settings: Tween With -> Selection, Frames to Add -> 3, Layers -> All layers, Parameters: Position->On, Opacity->On, Effects->On.

And also site timing to 0.1 seconds, and for the last frame set timing to 1 second.

Post a comment

Name (required)

Mail (will not be published) (required)

Website

Anti-spam text: (Required)*
To prove you're a person (not a spam script), type the security text shown in the picture. Click here to regenerate some new text.