Join Jim Babbage for an in-depth discussion in this video Using document templates, part of Fireworks CS5 New Features.
Document templates give you a jump on creating new designs for web, mobile, and applications. Having a mental block on where to start a mobile design? Not really sure how to set up a mockup for a CSS-based webpage layout? Well, templates may be the solution. These templates are native Fireworks PNG files and in many cases even contain multiple pages in the template and everything is customizable. You can even create your own custom templates that can be shared among the design team. Let's have a look. You can see right here on the Fireworks Welcome Screen, we have an option under Create New > From Template.
Now we can access the templates from this location. We can also access them in the File menu > New from Template. So you've got two different places to get at those templates. I'm just going to grab it from the Welcome Screen here and you are taken right to the Templates folder. You see we've got several different categories that we can look at here. So let's take a quick peek into some of these here. Document Presets. We can pull up various different presets for different types of designs, whether it's Flash banners, Desktop applications, AIR applications and so on. Grid systems. The grid layout is becoming a really common tool for generating or creating CSS-based layouts.
We've got four different flavors to pick from here. I've got a category here for Mobile. If we open that up, you'll see several different starter designs for different types of mobile applications. And if I go ahead and select one of these, let's say the Navigator here, you'll see I also get a little preview showing up. And I can actually scroll through the different pages inside of this template, so I can choose which page I want to start on basically, and then just select Open. File opens up and you can see we've got our little navigation application showing up on screen and over here in the Pages panel, we've got a Background master page.
We've got a Search page, a Search Results page, a Navigation page, and then a new generic page that's been added at the end. So I've got all those different elements, already pre-built for me, based on the specific dimensions of certain cell phones. In this case 240x320 pixels. Now once you've created your own template, we'll just use this one as an example, maybe made some design changes. Maybe let's just go right in here right now and let's just reposition a couple of things. And then maybe change, with our Sub-Selection tool, change the slider a couple of spots, like so.
And once you've made some changes, customized the design the way you want, you can choose File > Save As Template, and you're brought right back to the Templates folder inside of Fireworks. And here you can create your own custom folder or you can save that just to the main Templates folder. It's really up to you. But this gives you the ability to call on this new modified template anytime you want. And this is true of anything you build inside a Fireworks. Any design you create can be saved as a template and then later on shared with the rest of the design team. So you can see we've got quite a few choices here.
I think my favorites have got to be the Grid and Document Presets. These options alone get me started faster because a lot of the basic drudgework is already done.
- Using document templates
- Creating compound vector shapes
- Controlling, editing, and saving strokes
- Aligning artwork with the Snap to Pixel command
- Exporting Fireworks documents as FXG files
- Performing roundtrip editing between Fireworks and Flash Catalyst
- Integrating with Device Central
- Testing the mobile compatibility of Fireworks documents