New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Fireworks CS5 Essential Training
Illustration by
Watching:

Creating and opening documents


From:

Fireworks CS5 Essential Training

with Jim Babbage

Video: Creating and opening documents

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.
Expand all | Collapse all
  1. 3m 42s
    1. Welcome
      1m 22s
    2. What is Fireworks?
      1m 59s
    3. Using the exercise files
      21s
  2. 1h 27m
    1. Creating and opening documents
      7m 36s
    2. Understanding the interface
      9m 43s
    3. Working with tabbed documents
      6m 18s
    4. Setting up rulers, guides, and grids
      10m 7s
    5. Using tooltips and Smart Guides
      5m 40s
    6. Working with panels
      9m 29s
    7. Working with pages
      8m 59s
    8. Working with layers
      13m 13s
    9. Working with states
      4m 35s
    10. Using the Properties panel
      4m 38s
    11. Using the Preferences panel
      7m 34s
  3. 52m 39s
    1. Understanding the Fireworks PNG format
      2m 11s
    2. Saving and exporting files
      5m 11s
    3. Importing files
      5m 34s
    4. Opening Photoshop files
      6m 7s
    5. Opening Illustrator files
      3m 58s
    6. Exporting a single file
      9m 57s
    7. Using the Image Preview window
      1m 52s
    8. Using the Export Area tool
      3m 10s
    9. Creating PDF files
      4m 16s
    10. Saving Photoshop files
      5m 48s
    11. Using Fireworks files for Illustrator
      4m 35s
  4. 1h 2m
    1. Understanding bitmaps
      1m 32s
    2. Resizing images
      3m 48s
    3. Using the selection tools
      8m 0s
    4. Using the drawing tools
      8m 19s
    5. Retouching with the corrective tools: Rubber Stamp
      12m 16s
    6. Using the bitmap effects tools: Blur, Sharpen, and Replace Color
      7m 33s
    7. Using more bitmap effects tools: Dodge and Burn
      7m 1s
    8. Improving images using the Levels filter
      8m 15s
    9. Creating a bitmap mask with a selection
      6m 2s
  5. 1h 10m
    1. Looking at the vector toolset
      6m 53s
    2. Using the Pen tool
      7m 32s
    3. Editing vector shapes with the Freeform and Reshape Area tools
      4m 35s
    4. Filling shapes with patterns and live filters
      3m 17s
    5. Using Auto Shapes
      7m 24s
    6. Using shapes as image elements
      4m 16s
    7. Scaling shapes
      5m 28s
    8. Masking objects with vector shapes
      7m 13s
    9. Applying strokes
      5m 52s
    10. Using Vector Path and Path Scrubber
      6m 9s
    11. Using the Compound Shape tool
      7m 40s
    12. Using Snap to Pixel
      2m 15s
    13. Using Gradient Dither
      1m 46s
  6. 51m 18s
    1. Understanding symbols
      5m 41s
    2. Creating graphic symbols
      13m 11s
    3. Creating button symbols
      10m 22s
    4. Creating animation symbols
      5m 4s
    5. Sharing symbols with the Common Library
      1m 37s
    6. Editing the instance of a symbol
      3m 46s
    7. Adding component symbols to a design
      8m 46s
    8. Exporting and importing symbols
      2m 51s
  7. 17m 34s
    1. Creating GIF animations
      9m 31s
    2. Animating with Twist and Fade
      3m 47s
    3. Creating a tweened animation
      4m 16s
  8. 26m 46s
    1. Using text in Fireworks
      7m 19s
    2. Understanding text properties
      3m 14s
    3. Adding text in a path
      4m 43s
    4. Adding text to a path
      4m 31s
    5. Using text as a mask
      3m 35s
    6. Maintaining crisp text in web images
      3m 24s
  9. 28m 35s
    1. Having fun with filters
      8m 44s
    2. Working with Styles
      4m 10s
    3. Using Blend Modes
      4m 40s
    4. Converting bitmap selections to paths
      3m 50s
    5. Working with Adobe Swatch Exchange files
      2m 33s
    6. Using the Kuler panel for color inspiration
      4m 38s
  10. 1h 14m
    1. Understanding the web toolset
      1m 51s
    2. Creating hotspots
      6m 22s
    3. Using the Slice tool
      8m 57s
    4. Using a master page
      5m 20s
    5. Sharing layers across pages
      4m 49s
    6. Sharing web layers across pages
      3m 30s
    7. Using HTML component symbols
      3m 15s
    8. Creating choices and showing design options to clients
      7m 7s
    9. Importing pages
      2m 47s
    10. Previewing the mockup
      4m 17s
    11. Using HTML prototyping
      5m 22s
    12. Improving the workflow
      20m 30s
  11. 33m 19s
    1. Optimizing images for export, part 1
      15m 36s
    2. Optimizing images for export, part 2
      13m 36s
    3. Generating a CSS-based layout
      4m 7s
  12. 22m 20s
    1. Integrating Fireworks, FXG, and Flash Catalyst
      3m 56s
    2. Integrating Fireworks and Flash
      3m 46s
    3. Using roundtrip editing between Dreamweaver and Fireworks
      5m 52s
    4. Copying and pasting objects to Dreamweaver
      2m 57s
    5. Integrating Fireworks and Device Central
      4m 13s
    6. Working with Bridge
      1m 36s
  13. 13s
    1. Goodbye
      13s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Fireworks CS5 Essential Training
8h 51m Beginner Apr 30, 2010

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.

Topics include:
  • Customizing the workspace
  • Working with pages, layers, and states
  • Importing content
  • Comparing bitmaps and vectors
  • Creating and editing vector shapes
  • Converting artwork into graphic, button, and animation symbols
  • Animating in Fireworks
  • Maintaining crisp text in web images
  • Sharing content between pages
  • Optimizing images for export
  • Integrating with Device Central, Dreamweaver, Flash, and Flash Catalyst
Subjects:
Web Web Graphics Prototyping Web Design
Software:
Fireworks
Author:
Jim Babbage

Creating and opening documents

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Fireworks CS5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.