P2P | IT Discussions Forum

Full Version: Animated Company Ad
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey guyz this is my first tutorial...hope you guyz like it!

1. Open Photoshop and create a new page. The size I'm using is 600 x 120:

[Image: tut1ux5.png]

2. Then fill in a background. Im using [#5c7b8e]:

[Image: tut2kr9.png]

3. Now, to unlock the background layer, look to the right-side under LAYERS. Find the layer called 'Background' and double click. A layers box will pop up. Click ok.

4. Right now you should be looking at a plain background color. Now you can do anything you want to make the background look less plain.

Here is what I did:

[Image: tut3yb3.png]
[Image: tut4eu0.png]
[Image: tut5vw3.png]
[Image: tut6nt6.png]
I ended up with this:

[Image: tut7qy1.png]

5. Make a new layer called TEXT. Select the Elliptical Marquee Tool and make a oval shap on the side. Make only half or more of the oval seen to make the effect:

[Image: tut8bl2.png]
[Image: tut9kl0.png]

6. Now fill this new layer in. I used [#095ea0] at 51% opacity.

[Image: tut10nu0.png]

7. Now write the name of your company or business on the left side of the banner.

[Image: tut11qt6.png]

8. You can make your TEXT layer look better by adding some blending options. I won't

9. This step will be a little confusing so keep up Big Grin

Now write your first line of text.

[Image: hard1ms0.png]

The above 3 layers are my three layers of text. They are what is going to pop up in the animated ad.

Now it's time to transfer to ImageReady. Click the last button on the TOOLS BAR to do this.

10. Now if you don't see the ANIMATION bar then go to the window tab and click on ANIMATION.

Now go to your layers palette and make your third and second lines of text invisible. To do this click the eye shaped box beside each layer.

You should be looking at your ad with the first line of text in front of you.

11. Now go to your animation bar and make sure the first frame is selected. Then click on the 'DUPLICATE FRAME' button. Another frame should have popped up that looks exactly the same as the first one.

Now make sure that the second frame is selected. Make sure the layer is selected, and make sure the arrow tool is selected. Now press the down key 20 times. Set the opacity of the layer to 70%. You should have noticed that the text went down and got darker.

Now you can press the duplicate key again. Again make the layer go down 20 spaces. Set the opacity to about 40%.

12. Now make another duplicate and make this layer invisible and make the next text layer visible. This time start off the layer at the same place as the last layer. Set the opacity to 40%.

Make a duplicate and make the layer go up by 20 and set the opacity to 70%.

Make a duplicate and make the layer go up by 20 and set the opacity to 100%.

Make a duplicate and make the layer go down by 20 and set the opacity to 70%.

Make a duplicate and make the layer go down by 20 and set the opacity to 40%.

13. Now make a duplicate and make this layer invisible. Now make the last line of text visible. Put the text where the last text was. Set the opacity to 40%.

Make a duplicate and make the layer go up by 20 and set the opacity to 70%.

Make a duplicate and make the layer go up by 20 and set the opacity to 100%.

Make a duplicate and make the layer go down by 20 and set the opacity to 70%.

Make a duplicate and make the layer go down by 20 and set the opacity to 40%

Now before you forget...on all the frames that the text is in the middle and is at 100% opacity, make those frames 1 sec long or however long you want. If you don't do this then it will go too fast

14. At this point you should have about 12 frames. Now you have to tween this up. Click on the first frame and click on the tween button (looks like 4 circles).

TWEEN WITH: NEXT FRAME

FRAMES TO ADD: 3

Now apply this. Skip 3 frames and go to the fourth one. Do the same thing. Then again skip 3 frames and go to the fourth one. Keep doing this untill all the frames are done. It should looks something like this!

[Image: fakeadjk5.gif]

AND YOUR DONE!

If anything was unclear in the processes then please notify me here or at my email: lankan526@hotmail.com/ lankan526@gmail.com

Please comment on my first TUTORIAL POST. If it was bad then i will try to improve next time
Well nice tutorial Lankan..... Reputation added and 100 Points.....
Good job lankan526. Thank you for sharing.




.
Wow!
This is a good tutorial man.I ma gonna definitely use.
Nice effect with cool fonts.Its nice clean approach.
I like it and yes will try it.
Reference URL's