Cara Buat Banner Animasi (Photoshop)

http://www.mintyferret.com

Using Photoshop and Imageready, you can easily design animated banners for advertising campaigns.
Here is what the final result will look like:

Our client wanted a banner to match the overall colour scheme of his site, www.Learn-Poetry.com:

Here we’re going to create a standard 468×60 banner.

Selecting the Gradient Fill tool, I used the Eyedropper to pick up two shades of brown from his site. I then selected Radial and filled the canvas, creating a nice backdrop for the banner.



Now we need to find an image suitable for the banner. Since he runs a Poetry site, I thought of a quill pen. I found this image on iStockPhoto, and it fit perfectly with the atmosphere I was trying to create.
Depending on your image, you may have to extract it from the background to make it blend with your banner. Here I only needed to set the mode to Overlay to acheive the desired effect.

If you check the site, you will see that there are many swirls and twirls to accent the design. We will use a similar element in the banner for unity. Grab the pen tool and create a few swirly shapes. I adjusted the opacity of the layer so it would not be so dark.

Now to create a place for the text. Grab the Rounded Rectangle Tool and draw a rectangle.

Go into Blending Options for this new layer. Select Gradient Overlay. Using the eyedropper, I once again pulled colours fromn the original site.

Select Stroke. Change Fill Type to Gradient. Use the same gradient as the previous step, but check off the Reverse option.

This is what we have so far:

Now we’re going to add text to the banner. Make a new folder specifically for text:

Using the typography already present on the site, insert the text. Make a new layer for each piece of text you want animated seperately.


When you’re ready to move on to the next frame, hide the previous text layers so you can see what you’re doing.


Now we need to prepare the text for animation. Duplicate every text layer you want animated.

Rasterize the duplicates.

Select one of the rasterized layers. Select Filter > Blur > Motion Blur and apply it.




Do the same for every rasterized text layer. Now hide all text layers and select File > Jump to ImageReady.
Since you have six different text layers, duplicate the frame six times.

Select the first ‘blurred’ text layer. To make things easier, right click on this and uncheck Propogate Frame 1 Changes.

Now, show the blurred text in the first frame. In the next frame, hide that blurred text and show the actual, legible text. Keep on alternating like this between frames.


And you’re nearly done! Now we just need to adjust the length of time each frame is shown. Set every blurred frame to 0.1 seconds, play the rest by ear. You will want to aim at something between 2-3 seconds for each frame of text.

Save the optimised animated .gif, and there you have it! A complete, animated banner.


 download the animated banner photoshop file.