Create An Animated Gif Banner

Create An Animated Gif Banner



Here is what we will be creating today:

This
technique is very useful for any serious marketers of any industry who
need create animated banners for ad networks , its also good fun.
Step 1
As this is a tut about banners to comply with most banner ad
networks rules we’ll keep this close to 100kb . First off create a new
document at 250 x 250.
Step 2
Go to pvm garage .com the site we are creating the banner for. To be
authentic and also to save time we can use the already existing
graphics at the site.
Either using your own screen grab software or Print Screen which is
“PrtSc” on windows and for mac hold down Apple key ⌘ + Shift + 3 .
Now copy the image into Photoshop.

Step 3
We need the head graphic, the title and the three category titles
too separated onto different layers. To do so draw around each area and
press Ctrl + j to put it into a separate layer.

Step 4
Once on a separate layers we can place them into our 250 square
canvas . Arrange them so they look like the following image. Resize the
Title and place the categories at the top. Make sure they are accurate
and how you want them to look because changing the animation afterwards
can be tricky.
Also you may need to create a layer an fill in with the light brown colour to fill in any gaps.

Step 5
For the animation we need the timeline, so go to window and the fourth one down is animation.

Step 6
In the bottom right corner there is a button that says” convert to
frame animation” as you hover over it. Select this so that the timeline
changes to frames, which is how we need it.

Step 7
Each frame must have a separate layer for a new graphic, so in other
words whatever you want to fade in or appear must be on its own layer.
Now create more frames by clicking the duplicate button, just like
creating more new layers. We are going to need a total of five but
we’ll create them as we go.

The first one should be a layer filled with this colour dfd8c8, the
colour of the website. And underneath the other layers, so switch off
the visibility of the other layers.
Step 8
The next step is putting the head in, and animating the fade. To do
so click the second frame switch the head’s layer visability on, and
thats it.

step 9
Now we need to create the fade with a tween, select both frames
using shift , then leaving the tween with these settings press ok .

You should end up with the following when you press play , make sure
looping options in the bottom left corner is set to forever.

Step 10
Add a new frame by clicking duplicate frame, add the title pv.m garage move it down 15 or so pixels .

Step 11
Now add another tween between the last frame with the head in and
the new one with the title and head in, use the same settings as
before. This will make the title fade downwards. This is what you
should end up with .

Step 12
Create a new frame and add the category web design , then another for tutorials , and finally another for wordpress.


Step 13
Now all we need to do is add the timings , which for this one are
simple – all the frames are set to 0 sec . The last one is set to 2
sec, this can be changed by clicking on the bottom of the frame an
selecting no delay .
Finally to set how many time it plays in the bottom left corner
select the button that says once and set it to forever. To view the
animation press the play button.
In conclusion we could add more fades and different timings with the
categories – however we need to keep this low in file size and as this
is a 250 square gif we have to keep it simple.
To see this animated in browsers and software that supports gifs
save it as a gif . Save for web and devices (Alt +shift +ctrl +s )
under file menu brings up a menu where you can lower the size of the
gif . I put this one on 64 colors and the result was fine at 104 kb
which is quite small really .

Final result