Hello,
In this tutorial I am going to show you how utilize Photoshop’s animation window to create a frame based animated .gif banner. I want emphasize on the fact that this is not a tutorial on how to design a banner to achieve a high CTR, or even how to use proper layout techniques in banner design. It is a tutorial to show you the method used to create an animated .gif. I am hoping that you will be able to apply your design skills with this method.
With that being said, it is often suggested that Photoshop is not a good tool to use when creating banners for ad servers such as Google (which have a size limit of 40) sometimes even 30k with other ad servers. Many would suggest that Photoshop is not capable of outputting a .gif within those size requirements. I certainly do not agree with that, and have personally used Photoshop on several banner design projects where these size requirements needed to be met.
For me, it is a matter of preference. Photoshop is a tool I am comfortable with, and choose to stay within the program if possible. This is not to say that Flash is not a great program to use for banner work, because it is. It is again, simply a matter of preference.
Ok, let’s get started.
For this tutorial let’s go with a 300x250px banner.
Step 1.
Create a new document with the following settings;
300 x 250 px
72 DPI
RGB mode
Note: The reason 72 DPI is used is to cut down on the size. Whenever working on banner projects like this, you should always be making a conscious effort to make the file as small as possible. I will talk about other ways to help the file size later.
Step 2.
Let’s layout out some simple text and background graphics to our banner and give it a little life. Again, I’m going to keep it very basic. Here is what I have so far;
Pretty basic right? Ok, let’s keep moving.
Step 3.
Now that we have our banner laid out the way we want it, let’s think about what exactly we want this thing to do. I would like the “Click Here” text to flash on and off to hopefully grab the viewers attention.
Once we have decided which elements of our design are going to be “animated”, it is important that we keep each of those elements on a separate, flattened layer. If you are using layer effects on one of these elements, it important to rasterize or flatten down the layer by creating a new layer above it and merging them together. This is again just good practice in the effort to keep file size to a minimum. In the following image, you will see how I have flattened my layers, leaving me with the layer that will remain static, and the flattened layer that will be animated;
Step 3.
Ok, let’s open the open the ever elusive animation window;
Top Menu > Window > Animation
That will open this fairly new and interesting feature;
Next, let’s make sure that we are in “frame” mode versus “time line mode”. This is done by clicking the toggle button shown below;
Step 4.
Ok, now we are ready to animate the banner!
Again, let’s take a moment to think about what we are trying to achieve. I would like this to be a 3 second animation that loops for all of eternity. I will achieve this by having two basic frames. Frame 1 will have the “Click Here” layer invisible and Frame 2 will have the “Click Here” layer visible. We can then duplicate these two frames to equal a total of 3 seconds. We will also make sure that each of these two frames have a length of 0.2 seconds.
First, Set the time length of our original frame to 0.2 seconds by clicking the drop down menu shown below;
Next, let’s duplicate our first frame by clicking and dragging the frame on to the new frame button located within the animation window. This is shown in the image below;
Ok, now we have Frames 1 and 2 that we wanted. Now let’s select frame 1, and then turn off visibility of our “Click Here” layer in the layers panel.
You will notice that when you turn off visibility of the “Click Here” layer in frame 1, it will also turn it off in frame 2. Simply select frame 2 and turn on the visibility again. Each frame accesses the layers panel independently. You should end up with something like this;
Ok, by now you should have a pretty good idea of how the frame animation engine in Photoshop works. Next, let’s duplicate our two base frames to create a 2.8 second animation. If each frame is 0.2 seconds, we will need a total of 14 frames. Select both frames by holding the Shift key and selecting each frame, and then dragging them on the new frame button as we did before. Continue this process until we have our 14 frames. Your screen should now look like this;
Step 5.
Ok, now let’s export our banner.
This is where things can get extremely confusing and seemingly complicated. This is mostly due to teh large amount of export options when exporting out of Photoshop. I could, and probably will do a tutorial based on this topic alone. So for this tutorial, I will assume that you are simply trying to create a banner for your own use, and do not have size restrictions to your banner. However, I will briefly explain some of the settings used to achieve a much smaller file size.
First, let’s highlight all of our frames by selecting the first frame, holding the Shift key and selecting the last frame.
Now, let’s do the following;
Top Menu > File > Save for Web Or Device
This will bring up the export dialog box. First I will show you the settings I used with no concern of file size, followed by the settings I would used to achieve a smaller file size.
Note the file size of this export option is 119.2 KB. Next, let’s take a look at how we can get the file size down to 40KB.
Note that we have reduced the file size quite a bit, n0w to 34.98 KB. To achieve this, I reduced the color range to 64 colors and set the Lossy to 15%.
It is very important to note that while we now have a file that shows as 34.98 KB, if you right click and select properties on the exported file, you will see that the actual size of the file on disk is 36.0 KB. This can cause issues if you deliver the banner to a client with a file size of 38KB or so and it is rejected by the ad server they are using because it is actually too large.
I also want to point out that it can become tricky to achieve a small file size when using Hi res images in your banners. It is a art form in itself to find a balance between file size and image quality. You really have to just get in there and try several different export options until you really find that balance you need for your project. With that being said, there is a few things you can keep in mind when designing your banners to try and reduce the file size when finished.
Thanks,
ZiggyZ Beam
In this tutorial I am going to show you how utilize Photoshop’s animation window to create a frame based animated .gif banner. I want emphasize on the fact that this is not a tutorial on how to design a banner to achieve a high CTR, or even how to use proper layout techniques in banner design. It is a tutorial to show you the method used to create an animated .gif. I am hoping that you will be able to apply your design skills with this method.
With that being said, it is often suggested that Photoshop is not a good tool to use when creating banners for ad servers such as Google (which have a size limit of 40) sometimes even 30k with other ad servers. Many would suggest that Photoshop is not capable of outputting a .gif within those size requirements. I certainly do not agree with that, and have personally used Photoshop on several banner design projects where these size requirements needed to be met.
For me, it is a matter of preference. Photoshop is a tool I am comfortable with, and choose to stay within the program if possible. This is not to say that Flash is not a great program to use for banner work, because it is. It is again, simply a matter of preference.
Ok, let’s get started.
For this tutorial let’s go with a 300x250px banner.
Step 1.
Create a new document with the following settings;
300 x 250 px
72 DPI
RGB mode
Note: The reason 72 DPI is used is to cut down on the size. Whenever working on banner projects like this, you should always be making a conscious effort to make the file as small as possible. I will talk about other ways to help the file size later.
Step 2.
Let’s layout out some simple text and background graphics to our banner and give it a little life. Again, I’m going to keep it very basic. Here is what I have so far;
Pretty basic right? Ok, let’s keep moving.
Step 3.
Now that we have our banner laid out the way we want it, let’s think about what exactly we want this thing to do. I would like the “Click Here” text to flash on and off to hopefully grab the viewers attention.
Once we have decided which elements of our design are going to be “animated”, it is important that we keep each of those elements on a separate, flattened layer. If you are using layer effects on one of these elements, it important to rasterize or flatten down the layer by creating a new layer above it and merging them together. This is again just good practice in the effort to keep file size to a minimum. In the following image, you will see how I have flattened my layers, leaving me with the layer that will remain static, and the flattened layer that will be animated;
Step 3.
Ok, let’s open the open the ever elusive animation window;
Top Menu > Window > Animation
That will open this fairly new and interesting feature;
Next, let’s make sure that we are in “frame” mode versus “time line mode”. This is done by clicking the toggle button shown below;
Step 4.
Ok, now we are ready to animate the banner!
Again, let’s take a moment to think about what we are trying to achieve. I would like this to be a 3 second animation that loops for all of eternity. I will achieve this by having two basic frames. Frame 1 will have the “Click Here” layer invisible and Frame 2 will have the “Click Here” layer visible. We can then duplicate these two frames to equal a total of 3 seconds. We will also make sure that each of these two frames have a length of 0.2 seconds.
First, Set the time length of our original frame to 0.2 seconds by clicking the drop down menu shown below;
Next, let’s duplicate our first frame by clicking and dragging the frame on to the new frame button located within the animation window. This is shown in the image below;
Ok, now we have Frames 1 and 2 that we wanted. Now let’s select frame 1, and then turn off visibility of our “Click Here” layer in the layers panel.
You will notice that when you turn off visibility of the “Click Here” layer in frame 1, it will also turn it off in frame 2. Simply select frame 2 and turn on the visibility again. Each frame accesses the layers panel independently. You should end up with something like this;
Ok, by now you should have a pretty good idea of how the frame animation engine in Photoshop works. Next, let’s duplicate our two base frames to create a 2.8 second animation. If each frame is 0.2 seconds, we will need a total of 14 frames. Select both frames by holding the Shift key and selecting each frame, and then dragging them on the new frame button as we did before. Continue this process until we have our 14 frames. Your screen should now look like this;
Step 5.
Ok, now let’s export our banner.
This is where things can get extremely confusing and seemingly complicated. This is mostly due to teh large amount of export options when exporting out of Photoshop. I could, and probably will do a tutorial based on this topic alone. So for this tutorial, I will assume that you are simply trying to create a banner for your own use, and do not have size restrictions to your banner. However, I will briefly explain some of the settings used to achieve a much smaller file size.
First, let’s highlight all of our frames by selecting the first frame, holding the Shift key and selecting the last frame.
Now, let’s do the following;
Top Menu > File > Save for Web Or Device
This will bring up the export dialog box. First I will show you the settings I used with no concern of file size, followed by the settings I would used to achieve a smaller file size.
Note the file size of this export option is 119.2 KB. Next, let’s take a look at how we can get the file size down to 40KB.
Note that we have reduced the file size quite a bit, n0w to 34.98 KB. To achieve this, I reduced the color range to 64 colors and set the Lossy to 15%.
It is very important to note that while we now have a file that shows as 34.98 KB, if you right click and select properties on the exported file, you will see that the actual size of the file on disk is 36.0 KB. This can cause issues if you deliver the banner to a client with a file size of 38KB or so and it is rejected by the ad server they are using because it is actually too large.
I also want to point out that it can become tricky to achieve a small file size when using Hi res images in your banners. It is a art form in itself to find a balance between file size and image quality. You really have to just get in there and try several different export options until you really find that balance you need for your project. With that being said, there is a few things you can keep in mind when designing your banners to try and reduce the file size when finished.
- Limit the use of gradients.
- When using images, prepare them before bringing them into your project by exporting them as low res .jpgs or .gifs.
- Keep your layers flattened, and only have separate layers for the elements that will be animated.
- You might consider using an image compression utility to reduce the size of the images you use
Thanks,
ZiggyZ Beam
