Adding Fireworks Themes to Dreamweaver Pages

from: Mastering Fireworks CS5

Buy now

About this lesson

Creating a jQuery theme is just half of the process. The other half is getting the theme into Dreamweaver and testing the changes in a browser. You will do just that in this lesson.

In this workshop author and expert Tom Green is your guide to Fireworks CS5.1, the latest iteration of Adobe’s web graphics and rapid interactive prototyping tool. You’ll get an overview of the product interface, learn how to do vector drawing in Fireworks, and explore working with bitmaps. Along the way you will also learn how to mask and work with text, create symbols and wireframes, and integrate your projects into Adobe Dreamweaver CS5 and CS5.5. Using a project-based approach to the techniques presented, this course will show you where Fireworks fits into the workflow for digital media projects ranging from simple web page prototyping to interface design for rich Internet application projects.

$44.99

6 hrs 29 min

Buy now

Similar Courses

Welcome to Fireworks CS5.1. In this chapter we will meet each other and discuss what will be covered in this course. We will finish our introduction with a quick look at how to use the exercise files provided for each chapter.

Welcome
- You are most likely here because you want to learn where Fireworks fits into your screen-based workflow. In this lesson we'll cover this and preview many of the projects you will be creating as you proceed through the course.
  
  Overview
  
  01:25
- In this video you'll see where the exercise files for each lesson are located. You'll probably want to use these to work along with the course as you go.
  
  Exercise Files
  
  01:02
When you first open Fireworks, you are presented with tabs, windows, panels, tools, and a myriad of menu items. In this chapter we'll review each of these features and along the way I'll give you tips, tricks, and techniques that will have you using Fireworks in what seems like a very short time.

The Fireworks Interface
- The design process always starts with a document. In this lesson we'll explore the various ways to create a new Fireworks document. Along the way we will also look at creating a custom canvas size, changing the canvas color, and even accessing a Fireworks template.
  
  Creating a New Document
  
  05:00
- Learning the bits and pieces of a new application's interface is generally difficult, but the Fireworks interface is actually quite easy to learn. In this lesson we'll start off by exploring the PC version of Fireworks and see that the only difference between the Mac and PC versions is a toolbar on the PC version. From there we'll walk through the various panels, menus, and tools used in Fireworks.
  
  Touring the Interface
  
  11:43
- One of the neat aspects of Fireworks is the ability to have multiple documents open at the same time. In this lesson you will learn how to use the tabbed interface for multiple documents and how using multiple views of the same document can boost your productivity.
  
  Using the Tabs
  
  03:52
- Accurate placement of objects on the canvas is a key skill. In this lesson you'll see how guides and rulers make this possible and how the grid-based templates in Fireworks make page design a snap.
  
  Working with Guides, Grids, and Rulers
  
  05:11
- To keep things manageable, Fireworks uses a panel-based interface. In this lesson you will learn how to use, merge, dock, and undock panels. You will also see how this feature allows you to customize your workspace to suit your way of doing things.
  
  The Fireworks Panels
  
  02:39
- When it comes to prototyping web sites or other screen-based projects, the pages feature of Fireworks is extremely useful. In this lesson you will learn how to add and subtract pages from a project, rename and reorder pages, and even use a master page to hold content common to all pages in the project.
  
  Pages
  
  05:44
- Mastering the use of layers is key to getting the most out of Fireworks. In this lesson we'll explore the difference between a layer and a sublayer, how layers are named, and how they are reordered between layers and sublayers. We will also look at how to add and delete layers and sublayers to your project.
  
  Layers
  
  05:50
- As a prototyping application, Fireworks hands you a pretty nifty feature for button, motion, and image swaps. It is called "states" and is the subject of this lesson. We'll start by examining exactly what is meant by the term "state," and then move through the subject by creating an interactive button and testing it - all within Fireworks.
  
  States
  
  02:34
- Every object you create has properties that are specific to that object. In this lesson we'll look at how the Properties panel allows you to change the properties - from simple width and height to font changes - with very little effort.
  
  The Properties Panel
  
  03:46
- How you work with Fireworks is up to you. How Fireworks works with you is up to the preferences. In this lesson we will explore the Preferences panels; you will learn the purpose of each section of the panels and see how the changes you make affect how you work with Fireworks.
  
  Preferences
  
  03:39
Fireworks is also a drawing tool that contains some pretty powerful features. We'll start this chapter by drawing a simple shape, tracing the logo on the nose of an airplane, adding textures to objects, and applying filters. The chapter finishes with you creating a rather snazzy interface for video.

Vector Drawing in Fireworks
- Drawing shapes is a core Fireworks skill. In this lesson we'll dispense with the usual boxes and circles and dig right in by tracing the logo on the nose of an airplane. By the end of the lesson you will have mastered the Pen tool and learned how to manipulate a vector shape in Fireworks.
  
  Drawing Shapes
  
  06:28
- Gradients add depth to objects. In this lesson you will learn how to create a gradient, manipulate the colors in the gradient, and change its shape, direction, and intensity. By the end of the lesson, you will have provided the airplane's logo with that extra touch of realism.
  
  Creating Gradients
  
  03:30
- Picking colors and using color is the subject of this video. You will learn how to use the color panel to choose colors and color combinations and variations. We will also examine how the options in the Swatch panel can aid you in your color choices and how you can use the Kuler panel to explore color combinations used by the graphics community.
  
  Using the Color and Swatches Panels
  
  05:11
- Auto shapes are somewhat unique to Fireworks. Using a combination of colors, textures, patterns, and effects, these vector objects allow you to create everything from beveled buttons to multi-pointed stars with the drag of a mouse.
  
  Using Auto Shapes
  
  04:24
- Sometimes a solid color just doesn't work. This is where the ability to fill objects with textures and patterns comes into play. This lesson explores how textures and patterns can be added to artwork and, if they don't work, how you can use "grain" to add texture to an object.
  
  Using Textures and Patterns
  
  02:46
- Complexity usually derives from simplicity, and this lesson explains how you can create complex shapes using Fireworks' multiple methods of combining shapes. They are found in the Path menu, and we will explore how to use each of the commands in the menu.
  
  Combining Shapes
  
  03:08
- Filters have long been a creative tool in the digital studio. This lesson explores how to apply everything from a drop shadow to a bevel to a selected object. You will also learn the difference between Live Filters and a selection from the Filters menu.
  
  Applying Filters
  
  05:06
- It's time to put what you have learned to work. In this exercise you will use many of the techniques presented in this chapter to create a really effective interface for video.
  
  Project: Creating a Video Interface
  
  05:31
Images tell a story, and this chapter shows you how the imaging tools in Fireworks can make the story effective and engaging. Starting with basic skills like importing and scaling, the chapter moves through color correction, retouching, and other intermediate imaging techniques. It ends with an example that involves a tricky problem: a baseball team that has changed its team color...in mid-project.

Working with Bitmaps
- Whether you are creating a collage or simply adding elements to a page, at some point you will need to add bitmaps to your project. This chapter demonstrates a number of techniques for adding images to the canvas and also reviews the various document formats that can be imported into Fireworks, including layered Photoshop and Illustrator files.
  
  Importing
  
  06:53
- There is a lot more to scaling an image than the usual "yank and drag" techniques. This lesson explores a number of scaling options ranging from specialized tools to "doing it by the numbers."
  
  Scaling
  
  05:29
- 9-slice scaling is a technique that lets you protect certain parts of an image from distortion. You'll see how it works in this lesson.
  
  9-Slice Scaling
  
  03:07
- As you will discover in this lesson, there is more than one way to crop an image. From simple cropping and precise by-the-numbers cropping to cropping and exporting, we will thoroughly review your cropping options.
  
  Cropping
  
  04:27
- One of the fundamental imaging skills in Fireworks is the ability to make a selection. This lesson covers not only the tools used but also how to manipulate selections by the numbers and how to manage the edges of selections.
  
  Making Selections
  
  05:51
- There is a collection of bitmap painting tools in the Fireworks Tools panel. This lesson looks at each of the tools and discusses best practices for using them.
  
  Drawing Tools
  
  06:16
- No image is perfect. In this lesson you will gain solid first hand-knowledge of how to approach color correction and image retouching as it pertains to Fireworks. By the end of the lesson you should be able to read a histogram and determine the appropriate color correction strategy.
  
  Retouching and Color Correcting
  
  05:04
- When it comes to image correction, the Art Of Subtlety comes into play. In this lesson you will learn how subtle changes can have profound effects on image detail. We will review sharpening and blurring with a special emphasis on the use (and abuse) of the Unsharp Mask filter.
  
  Blurring and Sharpening
  
  05:32
- The most abused tool in any imaging application's tool box is the Rubber Stamp tool. In this lesson you will see how the pros use this tool to make subtle image changes and learn how to make nondestructive changes to an image.
  
  Using the Rubber Stamp Tool
  
  04:08
- Time to go back to work. In this project you will find yourself dealing with a common issue. The image is great but the team's sponsor has changed the team color and needs it by tomorrow. After completing this project, if you ever encounter this scenario, your answer will be "Sure. Have it for you in an hour."
  
  Replacing Color
  
  05:24
Masking is a great way of altering how an image appears without affecting the original image. In this chapter you will learn how to easily create vector and bitmap masks using a variety of methods. You will also discover how strokes and gradient files can provide you with amazing results.

Masking in Fireworks
- A bitmap mask "hides" bitmap data with a pixel-based mask. In this lesson you will discover how bitmap selections can become masks with the click of button.
  
  Creating a Bitmap Mask
  
  02:05
- Creating and applying a mask in Fireworks is a rather simple process, but there is a lot more you can do. From fixing the edges of a mask with the Brush tool to applying filters to masks, there is a lot of power under the hood, as you'll see in this lesson.
  
  Editing a Bitmap Mask
  
  03:07
- There are times when color changes are so subtle or extreme that selecting the area to be masked becomes an issue. In this lesson it becomes a "non-issue" as you learn how the Brush tool can be a rather handy masking tool.
  
  Painting a Mask
  
  04:12
- One little-known Fireworks masking option is to use the color information in an image to create a mask. You can use this technique to create some pretty amazing masking effects, as you'll see in this lesson.
  
  Mask Groups
  
  02:05
- Fading the opacity of an image is a common masking chore. In this lesson you will learn how vector masks make this possible. You will also see how vectors offer you a degree of precision unavailable in other masking options.
  
  Vector Masks
  
  03:47
- One of the great maxims of this business is "Let the software do the work." In this lesson you will learn how the Auto Vector feature does just that.
  
  Auto Vector Masking
  
  03:00
- You don't always need to use selections and vector shapes as masks. There is some pretty nifty stuff you can do using text as a mask. In this exercise you will learn how to create engaging masking effects with text.
  
  Text Masks
  
  03:48
- It's time to go to work. In this exercise you will apply what you have learned in this chapter to a website prototype.
  
  Applying Masking Techniques
  
  06:53
Text is more than "that gray stuff that goes around the pictures." This chapter will walk you through the major text features and techniques available to you in Fireworks. We will start with a simple banner ad and end our exploration by adding a neon effect to a wall of graffiti.

Working with Text
- There are a lot of choices available to you when formatting text. In this lesson we'll tour the Fireworks text properties and look at everything from how to assign a font to anti-aliasing. Along the way we will also explore some best practices when it comes to the subject of text on a screen.
  
  Text Properties
  
  07:26
- In this lesson we'll explore the concept of a "text block." We'll start by entering preformatted text and then, by manipulating the text block handles, define a precise width and height for that block of text.
  
  Using Text
  
  02:39
- One common layout technique is flowing the edge of a text block to match the geometry of an image element. In this lesson you learn how the Text in Path menu item allows you to wrap text around irregularly shaped objects.
  
  Flowing Text
  
  04:30
- Creating text wrap is interesting but what if the text has to follow an irregularly shaped path or go around a circle? In this lesson we'll do just that by using the mountains on the San Jose skyline to welcome visitors to the city.
  
  Text on a Path
  
  04:21
- There are a couple of little-known text features that can make your life easier. In this lesson we'll use the Special Characters panel to add an accent to a French word and also add a block of dummy text by clicking the mouse.
  
  Special Text Symbols
  
  04:07
- In the previous chapter you learned a basic technique for creating a text mask. This lesson takes it to the next level and shows you two more ways you can use text as a mask.
  
  More About Text Masks
  
  05:50
- Text is more than a communications medium; it can be used as a creative medium as well. In this lesson you will learn a variety of techniques from knockouts to converting text to vector shapes. From there you are only limited by your creativity.
  
  Creative Text Techniques
  
  05:29
- Time to apply what you have learned. In this project you will take a rather flat photograph of graffiti on a wall, jazz it up, and then add a neon light to the wall.
  
  Project: Creating Neon Text
  
  06:03
If you are looking to supercharge your workflow, Fireworks symbols are just the answer. In a world of rapid prototyping, the ability to reuse content - vectors, text, bitmaps, buttons, and animations - in current and future projects is one of the most powerful features of Fireworks. In this chapter we will examine how symbols are created, where they are stored, and how they can be shared among projects and team members.

Creating Symbols in Fireworks
- In Fireworks, adding a symbol to a document is a simple drag-and-drop operation. In this lesson we'll start by adding one of the graphic symbols that comes packaged with Fireworks and use the Edit In Place feature of symbols to manipulate and edit that symbol. You will also see how symbols are managed by the Common Library or the document library.
  
  What Is a Symbol?
  
  07:01
- Graphics such as logos or other often-used items can easily be reused by converting them to graphic symbols. In this exercise you will convert a graphic to a symbol and add multiple instances of the symbol to a page.
  
  Creating a Graphic Symbol
  
  06:54
- Buttons are common elements in any web page but creating them can be a time-consuming process. In this exercise you will create a fully interactive button symbol in Fireworks. Then you will test the button...in Fireworks.
  
  Creating a Button Symbol
  
  06:53
- Animation has become a staple of web- and screen-based motion graphics projects. In this lesson you will learn how to create a simple animation using the built-in Animation Wizard. Along the way you will learn how states are used in Fireworks and how to test your animation in Fireworks.
  
  Creating an Animation Symbol
  
  06:59
- One of the little-known features of Fireworks is the ability to save symbols to the Common Library and use them in a variety of projects. In this lesson you will learn how this process works using a symbol in your document library.
  
  Symbols and the Common Library
  
  03:04
- Time to put your Fireworks symbol knowledge to work. In this project you will construct a fully interactive button bar starting with nothing more than a rectangle.
  
  Project: Building a Button Bar
  
  09:50
Wireframing means setting up the structure of a project before you start working on it. In this chapter we'll start by drawing wireframe designs on a piece of paper and work through using Fireworks templates, creating your own wireframing symbols, and even extending Fireworks by adding a really neat Fireworks extension. The chapter ends with you building a wireframe and understanding the wireframe process from analog to digital.

Wireframing
- Wireframes are the first step in the design process. In this lesson we'll look at how the process starts with an idea, inevitably becomes a sketch on paper or even Post-It notes, which is then scanned and brought into Fireworks.
  
  Introduction
  
  03:18
- Layouts are rarely freeform. They commonly involve a grid that will assist you in the placement of the various interface elements. Fireworks contains a number of these grids and in this lesson you will learn where they are located and how to edit a grid to match your page size.
  
  Using Fireworks Templates
  
  06:18
- Though you can find Fireworks-ready wireframe symbols on the Internet, why bother? In this lesson you will learn how to create your own symbols, which are then saved to the Common Library. By doing this, your wireframing efforts will get a speed boost, because those symbols will be available to every document you subsequently create in Fireworks.
  
  Creating Wireframe Symbols
  
  04:08
- Extensibility is something Fireworks has had for a very long time and there are a number of really nifty Fireworks extensions out there. This lesson shows you how to add an extension to Fireworks using the Adobe Extension Manager.
  
  Adding a Fireworks Extension
  
  04:47
- It's time to put your wireframing knowledge to work. In this project you will create the wireframe for the sketch presented at the start of this chapter.
  
  Building a Wireframe
  
  10:56
In this chapter we'll concentrate on creating an interactive prototype that can be presented to a client for approval. Using master pages, interactive hotspots, shared layers, and symbols, you will move through the process of designing a project. The chapter finishes off by showing you the variety of output options - from interactive PDF to a click-through website - available to accurately and rapidly prototype a website.

Rapid Prototyping (Web)
- It makes no sense to copy and paste common items onto each page of the project. This is where the master pages feature of Fireworks shines. In this lesson you will learn how to create a master page and add elements to it.
  
  Creating and Using a Master Page
  
  04:04
- Interactivity and navigation use hotspots on a page to make things happen. In this lesson you will learn how to add hotspots to a page, where they appear in the interface, and how to test them.
  
  Creating Hotspots for Navigation
  
  04:45
- Fireworks uses vector and bitmap images. It makes sense, therefore, to assume that Illustrator and Fireworks have a working relationship. In this lesson you will learn how Illustrator artwork can be easily imported into Fireworks.
  
  Importing and Editing Illustrator Documents
  
  03:48
- In this lesson you will learn how to share a layer on one page in a document with another page in the same document. You will also learn how to turn this feature off, but most important of all you will see how sharing layers speeds up your workflow.
  
  Sharing Layers with Other Pages
  
  04:34
- If there is an area of the rapid prototyping process that slows things to a crawl, it is the creation of forms. In this lesson you will learn about one solution: using Flex components in the Common Library. You will also learn how to edit the form elements, changing their text and even the look of the various states of the symbol.
  
  Use the Web and Flex Symbols in the Common Library
  
  06:60
- Fireworks makes it really easy to make the prototype available for approval or review. In this lesson you will learn how to use the various export options in Fireworks to output everything from an interactive PDF to a web page.
  
  Prototype Review Options
  
  05:26
In a screen-based environment, more and more attention is being paid to creating the mobile version of a project before anything else. As you have learned throughout this course, Fireworks shines when it comes to preparing the assets or design for screen-based applications. In this chapter we embark, with Fireworks, on a foray into the world of mobile.

Fireworks and Mobile Design
- This lesson shows you where to pick up the CSS3 Mobile Pack and how to install the extension.
  
  Installing the CSS3 Mobile Pack
  
  02:19
- CSS3 is code-intensive, but the CSS3 Properties panels makes the process visual. In this lesson you will learn how to extract the CSS3 Properties from a selected object, add them to a Dreamweaver document, and test the code in a variety of browsers.
  
  Extracting CSS3 Properties from Fireworks Objects
  
  05:51
- In this lesson you will gain a solid grounding in the use of the jQuery extension in Fireworks. You will learn how to access it, how to work with a template, and how to preview the theme.
  
  Reviewing the jQuery Extension and Page Elements
  
  06:45
- Creating a jQuery theme is just half of the process. The other half is getting the theme into Dreamweaver and testing the changes in a browser. You will do just that in this lesson.
  
  Adding Fireworks Themes to Dreamweaver Pages
  
  11:00
You have many options for how to save a document, and which ones you choose will depend on how and where the document is intended to be used. In this chapter we will explore the process I call the "endgame": Ensuring that the document is optimized for its final use, whether that is video, web animations, or anything in between. If you get one "take-away" from this chapter it should be this: The endgame starts the moment you start the project.

The Endgame
- Imaging resizing involves more than simply changing the width and height values. As you will see in this lesson, it also involves keeping an eye on the canvas.
  
  Image Resizing Options
  
  04:60
- In a screen-based universe there is a very simple equation: small = fast. In this lesson you will learn how the number or colors used or even the format of an image can have a profound effect on file size. The tool you will use is the Optimize panel and by the end of the lesson you will be able to make quality and file size decisions by comparing the various options.
  
  Image Optimization Methods
  
  05:50
- Many applications, among them Adobe Edge, can put image layers into motion. In this lesson you'll see how to do this by specifying the correct settings in the Optimize panel and then exporting the document.
  
  Exporting Layers for Use in Other Applications
  
  05:13
- For a lot of motion graphics pros, the graphics tool of choice is Photoshop. When working with Fireworks, this is a mistake, because Fireworks and Flash have a close relationship with each other. In this lesson you will learn how to take advantage of that relationship and how a simple drag-and-drop technique creates buttons that work instantly in Flash.
  
  The Fireworks to Flash Workflow
  
  04:00
- A key issue in developing projects for smartphones is: What does it look like in the selected device? In this lesson you will learn how to use a feature new to Fireworks: a direct path into Device Central. This lets you create a Fireworks project, choose a couple of target devices, use a Fireworks template to create content aimed at the chosen devices, and then preview the project in an emulation of the selected devices.
  
  Using Fireworks and Device Central
  
  04:39
- Letting the software do the work has been the theme of this course. The Export Wizard is a classic example of that theme. In this lesson you will learn how to use the Wizard to prepare your documents for output and how the Wizard will make your life easier.
  
  Using the Export Wizard
  
  04:57
- Slicing and dicing pages for output might seem straightforward, but there are some subtleties to it that you should be aware of. In this lesson you will learn how the pros do it and how slices are used to add interactivity like hyperlinks and rollovers to a document.
  
  Creating Image Slices
  
  07:58
- You don't just casually export a sliced Fireworks document to HTML. In this lesson we will walk through the steps that guarantee your prototype will be fully functional when it arrives in Dreamweaver.
  
  Exporting Slices
  
  05:58
- Fireworks and Dreamweaver have had a "round-trip" feature since the Macromedia days. In this lesson you will learn how to make Fireworks the image editor for Dreamweaver and how to round-trip a project from Dreamweaver to Fireworks and back again.
  
  Integrating Fireworks and Dreamweaver
  
  05:38
- If you own one of the Creative Suites or the Master collection you own Bridge. In this lesson you will see how Bridge makes image management issues a thing of the past and how to open images and artwork in Fireworks with the click of a mouse in Bridge.
  
  Using Bridge
  
  02:43
In this chapter we'll wrap things up with a few final words of encouragement.

Goodbye
- It has been fun working with you. I am going to leave you with a question I ask all of my students at the end of a class: "Did you learn anything?" If the answer is "yes," I have done my job.
  
  Parting Words of Encouragement
  
  01:23