Create Multiple Animated AD-Banners In A Breeze
Need to create multiple animated banners in really tight schedule? Not a problem, Adobe Fireworks has some cool tricks to save the day.
In this tutorial I will show a quick & dirty workflow to create 4 animated GIF-banners. While doing this, you will trigger States-functionality, Export Settings preset-creation and Slicing layout to multiple images via automation. You will need Adobe Fireworks CS5, because I’m going to use some fancy build-in templates. I have marked important keypoints via bold, so be alert on those ones.
1. Getting started with templates
Boot up FWCS5 and select create new document from templates. Select “Document Presets” and choose “Web banners.png“. Get a cup of some steaming hot liquid and enjoy the ride.
Now you got 4 various banners in your screen. Select each rectangle, remove that 1px stroke (select “None” from Properties Inspector / Stroke Presets) and give each rectangle a solid fill with color #FABC02. Notice that for some strange reason the 160×600 banner is grouped – Ungroup it, willya.
2. Adding the funky background graphics
Since we are in a extreme rush here, go and download some Bokeh Styles For Fireworks and read the instructions how to install those suckers.
Done? Good. Open up Layers Panel, Create new Folder, rename it to “Graphics” and place it top of 728×90-layer/folder (aka top of everything) . Lock down every other folder except “Graphics”.
At this point I must clarify that I know Fireworks does not have “Folders”, it has “Layers” as folders – I just like to call ‘em folders.
Lets release our inner Jackson Pollocks. Select Line Tool (N) and draw few (3-4) random diagonal lines over the canvas (Hint: Make it look like somebody has murdered your canvas with a knife). Make sure the line-objects are now in Graphics-layer/folder.
Open up the Styles-Panel (Ctrl+F11), locate the mighty Bokeh Styles from the dropdown. Switch your eyes to the canvas and Select all Line-objects and apply any of Bokeh style (I used first one) to the Lines (FW will take a moment to process this, beware). Now you got loads of balls in your screen. Keep the Line-objects selected and change blending mode from “Normal” to “Soft Light“.
Here is my artistic effort so far (click image for larger 1:1 image):
3. Enter the content
Create a new folder and rename it “Text“. Toss the folder above Graphics-folder and lock up the Graphics folder.
Write the words Speed, Power, Design, Adobe and Fireworks somewhere over 728×90 banner (I used Arial Black, size 20px with color #FFF) . Convert each text-object to symbol (via RightClick/Convert to Symbol or hit F8) and open up the Document Library panel (or press F11).
Still with me? Okay then. Delete the symbols from canvas – the symbols will stay in the Document Library.
4. States check
Lets get complicated. Open up States (Shift+F2) panel. You will see “01 State 1” – right click over it and select “Duplicate State…“. You will get a prompt to choose some stuff:
Select 4 and hit ok – other settings does not matter, since we are just cloning one state.
Go to (= just click) newly born State 2.
Step 1: At canvas, Right-click over any Speed-symbol and select “Swap Symbol…“.
Step 2: A mysterious symbol-menu pops up, select “Power” from list of symbols.
Step 3: Scale the Power-symbol to fit nicely inside of each banner, but try not to move the symbols too much and keep everything center.
Go to State 3 and do these 3 steps again with with Design-symbol.
Eventually when clicking your first 3 states, you should have something like this:
Go to State 4. Now you will need to add symbols Adobe and Fireworks in to State 5. You can do this pretty much with same manuevers like in previous states, just make sure everything is centered. Check out my example on right for one solution setting up the positions for these two important symbols.
Go to State 5 and remove all symbols from banners and leave everything blank.
5. Timing is everything
Okidoki, now got all 5 States ready. Now lets adjust the timings.
Open up the States-panel. On right side the list of states you can see number 7. This is the time that each state is visible in milliseconds.
Doubleclick each timing-value and enter values 200ms to states 1, 2 and 3. We want State 4 to more primetime, so give it a value 500ms. State 5 gets 50ms, since its blank and lonely.
6. Setup the export preset
Since there are no 256color animated gif-preset available, we will have to create such a beast.
- Open up Optimize panel (F6)
- Select from dropdown a preset “Animated GIF Websnap 128“.
- Switch colors from 128 to 256
- Switch mode “Web Adaptive” to “Adaptive”
- At Optimize Panel’s upper right corner there is a button (with triangle and 4 stripes). Click it.
- Select “Save Settings…”
- Save this preset with a name “256 GIF Banner”
7. Slice and Export
From now on it is safe journey till the end. We need to get these animated gif-banners out in the wild.
- Go to State 1 and get ready for slicing.
- Lock up Text folder and unlock the banner folders.
- RightClick over any Rectangle-object and select “Insert Rectangular Slice” (see image). Repeat this step to the remaining 3 banners.
- Open up Layers Panel and Extend “Web Layer” -folder. You should see 4 Slices there.
- Rename each Slice with dimensions of each slice (like 728×90, 300×250 etc.)
- Select All WebSlices
- From the Properties Inspector, Switch Slice Export Settings to “256 GIF Banner”
Got all WebSlices still selected? Good, RightClick over any slice on canvas and select “Export Selected Slice“.
Go with the settings above (Uncheck the “Current state only”) and hit Save.
8… And we are done!
Test your fresh banners by dragging ‘em to a browser. Working, yes? WOHOO.
+ other banners: 728×90, 160×600 and 180×50.
Now that you know how to do multiple animated GIF-banners in a breeze, you might want to adjust the graphics to more complex. Add some cool drop shadows, Call-To-Action-buttons, arrows & stuff like that. With this method you can do more than just 4 banners. You can do even 100 animated banners and export them at once with this exact process, so this is really handy to keep in the memorybanks.
Usually there is filesize-limits on Ad-rotation business, so keep the colors in limited range. Luckily my banners max size was 23KB which is quite ok in these days.
Hope you enjoyed this tutorial. Feel free to drop me comments, questions or feedback!
2 Responses to “Create Multiple Animated AD-Banners In A Breeze”
I very well see you writing a detailed book on Adobe Fireworks CS6! :)
Great tutorial, many thanks! Even if it seems I know Fw pretty well, looks like there’s often something new around he corner, every day…
Keep’em coming, please! (And think seriously about writing for Smashing Mag, they really need more cool Fireworks tutorials!)
Thanks! My initial idea came from the fact that exporting multiple gif-animations at once is so damn effortless process in FW, so I had to do tutorial about it.
Perhaps someday I’ll decide to pop the cherry and do commercial tutorial(s) for some huge site. I just dont like the irrational hate when comes to dealing with big site feedback. So far I’ve been doing these tuts for fun without any pressure.
Trackbacks