Create an animated banner in Photoshop

Animated Gif files were a cause for many jokes in design societies. This is because the animated images are known for being a bit intrusive and cluttering up web pages. However, when used properly, the animation can draw attention to itself and make you forget about other page content. Today we will show how to use Photoshop CS5 to create animated GIF banners. Let’s start!

Note translator: Photoshop CS4 is also suitable for this tutorial.

This is the same banner, which will be discussed in this lesson.

Step 1. Create a new document with a size of 250 x 250 pixels and set the resolution to 70 pixels. The background color for the banner will be # f2f2f2.

Step 2. Place the logo in the top center of the banner.

Step 3. Write a slogan under the logo.

Step 4. Draw a rectangle and set the color # b90909.

Open the dialog box Layer styles (layer styles) and customize Shadow (Drop shadow). Decrease distance (distance) and the size (size) by 2px.

Now add Gradient overlay (Gradient Overlay) and set the blending mode to Multiplication (Multiply) with an opacity of 28%.

Add a stroke and reduce its size to 1 pix. Set color # a31b1b.

Step 5. Add a list of promotional offers. We will have it Tutorials (Lessons) Articles (Articles), Tips (Tips), Freebies (is free), Basix (Ase) Videos (Video), Premuim (Premium) as shown.

Rasterize the text layers and create Clipping mask (Сreate a clipping mask).

Step 6. Now put an attractive picture. In our case, we used the PSDTUTS premium program icon, but you can use whatever suits you.

Step 7. Add more text below the image that we inserted in step 6.

Step 8. Create an oval shape and set the color fdfcfc.

Open the dialog box Layer styles (layer styles) and customize Shadow (Drop shadow). Decrease distance (distance) and the size (size) by 1px.

Turn on and check Internal glow (Inner glow) and leave everything as it is in the settings.

Add a Gradient overlay (Gradient overlay) with Opacity (Opacity) 6%

Step 9. Now that we’ve finished creating all of our layers, we’re ready to start working on the animation. First, open the animation panel. Window – Animation (Window> Animation). I will use the animation panel on Timeline (Timeline Animation), not Frame-by-frame animation (frame animation).

Note: This feature is only available in Photoshop Extended.

Now we set all layers visible, but reduce their opacity to 0%. Do not touch the background.

Step 10. See the images below for instructions on how to insert keyframes and where to increase the opacity. For each element we created, there is a separate screenshot with the instruction.

Note translator: keyframes can be moved with the mouse. You can also select several key frames to move.



(click on image to enlarge)



(click on image to enlarge)



(click on image to enlarge)


(click on image to enlarge)


(click on image to enlarge)



(click on image to enlarge)


(click on image to enlarge)

Step 11. Your Timeline (Timeline Animation) should look something like the one below.


(click on image to enlarge)

Step 12. Well, we completed our animation. Click the Play button to see the result. You can adjust everything if necessary. To save your banner, go to menu File – Save for Web and Devices (File – Save for Web Devices). Set the settings as in the screenshot below and click the Save button.

That’s all! Here we have such a banner!

And this is the translator banner for the lesson. Practice very well establishes the theory!

Here you can download a psd file with a banner from the translator.

Author: Vikram Creative

Like this post? Please share to your friends: