Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
To get any work done in Fireworks, you either have to create a new document or open an existing one. Let's take a quick look at the options for creating new documents, as well as how to open up a basic file inside of Fireworks. Here, we've got our Fireworks welcome screen. Over on the right-hand side, you'll see Create New. We have two choices here: Fireworks Document and From Template. We'll come back to the Template option in just a minute. Let's click on Fireworks Document. I get a New Document dialog box. Here, I can control the Width and the Height and the Resolution of the image.
I can also set the Canvas Color. The default is White. I can pick Transparent, or I can choose a Custom option as well. Lastly, down here in the bottom-left corner, you'll see a button called Templates. Now, this is referring to the same template that we saw on the welcome screen. So, I'm going to click on this button. Fireworks takes me right to the Templates folder. You'll see we've got five different categories: Document Presets, Grid systems, Mobile, Web and Wireframes. Let's take a look at just a few of these. I'm going to go into Document Presets. You'll see here we have a whole series of pre-built layouts.
We've got options for 960x1200 layout. We've got options for 1152x864. We've also got some layouts for some very common projects that you might build inside of Fireworks, so AIR application icons, Desktop application icons, even Flash banners, and if I look a little lower down here, Mobile screens and Web banners. So, I'm just going to go ahead and click on Mobile screens and double-click to open that up. You'll see we've got basically a whole series of different boxes that represent different screens for different mobile devices.
Now, I'm not going to dig too deep into this at the moment, but if I go over to my panel groups over here, I'll see one called Pages. If I click on Pages, I'll see I've got several different individual pages, unique, different designs, inside the same file. Each one of these pages represents a different screen size for a different mobile device. So, I can basically get off the ground running really quickly and design my wallpaper or my application design for a specific mobile device's screen resolution. Now, I'll just close that, and we'll take a look at another option here.
We're back to our splash screen again. We'll choose New > From Template. We're going to look at the Grid systems. We've got four to choose from here. Now, a Grid Layout is really helpful if you're planning to build a Web site. It makes it a lot easier to plan out your CSS-based layout. So, we've got four choices here: Grid 4, Grid 8, Grid 12 and Grid 16. I'm going to work with Grid 8 here. I'll open that up. A couple of things I have to do. I want to show you how this can really speed up the process, but I want to make a couple of changes to this document before I go any further. I'm going to go over to my Layers panel.
We'll be looking at the Layers panel in much more detail later in the course. All I want to do here is create a brand-new layer to draw my mockup on. So, I'll create a brand-new empty layer. Now, you'll notice, on the canvas itself, we've got a design here that's basically broken out into a whole series of grid lines and blue rectangles. This makes it really easy for me to block out my overall design. So, I'm going to press Ctrl+Minus on Windows, or it will be Command+Minus on the Mac to zoom out a little bit. I'm going to grab my Rectangle tool here.
Now, I just want to show you how I can quickly put something together here. Don't worry too much about actually following along with your own artwork in this case, just watch the screen. So, I've got my Rectangle selected, and I'm going to go up and start off by putting in my banner shape. So, there we go! I dropped in my banner image and just a simple Wireframe mockup. I can continue to do the same thing, line up with that grid, and create a two-column layout that extends most of the way down the page. I'll zoom out one more step here and see how things are shaping up. All right! So, zoom back in a bit.
Again, I'm pressing Ctrl+Plus to zoom in and Ctrl+Minus to zoom out. I'm going to grab that rectangle again, and we'll draw one more box here, something along that line. Then if I go a little bit lower, I think I will split the rest of this up into two separate areas, so one here and another one there. I still have some space at the bottom. That's because I want to pop in a footer as well. So, I'm going to, again, just draw one more box, like so.
This would give me a chance to really, really quickly create a simple Wireframe, relatively, accurately. I have a couple of spots where I can probably tweak the shapes. My footer and my header are both a little bit wider than they need to be. But the general idea here is, in a matter of a few minutes, I've blocked out a Wireframe for my Web site design. So, the grids can come in really handy when you're doing this, because you've got the guides already set for you. You don't have to spend time putting those guides in. Things are already preset for you, from that perspective. All right. So I'm going to close this one down.
We don't need that anymore. I'm not going to bother saving that either. We'll take a look at one more option here before we move into opening documents. So, I'm going to choose New > From Template again. I'm going to go to Mobile. Now, the reason I want to go here is that samples here are much more complete. Now, if you want to build out a mobile design application, but you're not really sure what kinds of things you can do, these templates can give you a bit of a heads-up on the kinds of applications you might build. All right! So we've got five samples here. I'm just going to go to the Navigator sample.
I'm going to open that up. Again, much like the mobile design template, this design also has a series of pages. So, I switched over to my Pages panel. I can see I've got four different main pages to this design. Everything inside here is editable. It's customizable. So, for example, if I go to my Search results, grab my Pointer tool first, black arrow, I could click on that box. It's got the location pop-up, and I can reposition that anywhere I want onscreen.
It's completely editable there. I could even use the Subselection tool. That's the white arrow. I could go in and edit individual elements inside that one pop-up window. So, I've got a lot of control here over the existing assets. Plus, it gives me an idea of the kind of things I might want to think about, if I'm building out a Web-based application. Now, not only are templates a great way to hit the ground running a little faster; you can also create your own templates. So, whether it's customizing an existing template, or you've got your own design that you want to share with other designers within your team, you can create your own custom template and save it back to the Templates folder.
So, once I've made changes to the design, I can go up to File and choose Save As Template. That will save it back into the Templates folder. All right! So we've looked at how to create a brand-new document, either from scratch or from an existing template. Let's look at how to open up a file as well. So, I'm going to close down my Template Navigator file here. I'm not going to save any changes. We have options for opening files as well. You can see over here on the left-hand side, we can open recent items, any files that were opened recently by Fireworks, you can quickly grab those by just clicking on the file name.
You can also choose to open from the Open button down at the bottom of that list. You can also go to File > Open and open in that manner. So, I'll go that route, and I'm inside my chapter 1 folder, and I can pick anything that I see in here, open it up. I think I'll grab that photograph of the olives and open that up. There it is, onscreen! So, opening up files is a pretty straightforward process. In future lessons, I'll explain in detail how to open and import a variety of different files, like Photoshop and Illustrator files.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.