In this introductory chapter you'll get an overview of what will be covered in the course and learn how to use the project files that are included.
In this lesson you'll get an overview of what will be covered in this course, including new features of Fireworks CS6 like the new chromatic color picker, the addition of an RGBA color space, the ability to create jQuery Mobile themes, and more.
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
When Fireworks launches, you will see the Start screen, which you can use to create a new Fireworks document either from scratch or based on a template. You can also open a document you have worked on earlier, as you'll see in this lesson.
On the surface the Fireworks interface, with its collection of tools, panels, and menus, may appear to be rather intimidating. In this exercise we'll walk through the various features of the Fireworks interface so you can become familiar with them. You'll also see how you can change the workspace to fit your way of doing things.
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.
You will be spending a lot of time using the many panels that make up the Fireworks interface. In this exercise you will learn a number of panel management techniques, including expanding and collapsing panels and floating them on the interface, as well as how to use the context menus associated with each panel.
If there is one feature that separates Fireworks from all other screen graphics creation tools, it is the pages feature. In this exercise you will create, delete, and duplicate pages in the document. You will learn the value of using a master page for content that is common to every page in the document and how individual Fireworks pages can be exported out of the document for review.
As is common with most imaging applications, Fireworks contains a layers feature. This exercise shows you how to add and delete layers, manage sublayers, and move sublayer content to a different layer in the document. You'll also learn how to manage and use the Web Layer and Master Page layers in the Layers panel.
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 the change the properties - from simple width and height to font changes - with very little effort.
Fireworks is also a drawing tool that contains some pretty powerful features. In this chapter you'll learn how to draw shapes and add gradients, textures, patterns, filters, and more.
Vector Drawing in Fireworks
Fireworks is a unique combination of vector and bitmap editing tools. In this lesson we'll focus on the vector drawing tools, starting with the Pen tool and its companion tools, Redraw Path and Vector Path. All of these are used to draw lines and curves in Fireworks.
This lesson looks at the various ways of picking color in Fireworks. In this lesson you will be introduced to the redesigned Swatches panel, learn how to use the Blender and Mixers panels to create custom color schemes, and see how to use the Kuler color panel in the Windows menu to pick online color schemes.
A rather interesting aspect of working with Fireworks is the ability to add textures and patterns to objects filled with solid color. In this lesson we will take a look at how textures and patterns can be added to objects, manipulated, and used in creative ways.
The ability to combine one shape with another to create a compound path has been a staple of vector drawing programs since their inception, and Fireworks CS6 is no different. In this lesson you will learn how to use the options in the Combine Paths menu to create compound shapes. You will also see how to do the same thing through the Properties panel by using the Compound Shapes tool.
One of the great underused features of Fireworks is the Live Effects, which apply filters to selected objects in real time. In this lesson you will learn how use the Fireworks Filters panel to apply, edit, combine, and remove filters applied to selections. You will also see how to apply a full complement of Photoshop Live Effects.
In this project you will use a number of the vector tools, techniques, and effects presented in this chapter to create an alternate design for the Fireworks User home page. We'll start by creating the menu and content areas for the page in this lesson.
In this lesson we'll finish the project by adding the text for the navigation menu and completing the navigation area of the menu. You will learn a couple of UI techniques that add a professional finish to the prototype using nothing more than vector shapes, lines, and gradients.
Images tell a story, and this chapter shows you how the imaging tools in Fireworks can make that story effective and engaging. Starting with basic skills like importing and scaling, the chapter moves through color correction, retouching, and other intermediate imaging techniques.
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 lesson 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.
There is more to cropping an image than simply removing the areas of the image that don't fit. In this tutorial you will use the cropping features of Fireworks to precisely define the dimensions of a crop area, crop an image in a Fireworks layer, and even export a defined crop area as a separate image.
There are a number of ways of making a selection in Fireworks and a variety of tools you can use. In this lesson you will learn how to use these tools and how to add to or subtract from a selection you have made.
Fireworks offers a variety of bitmap painting tools ranging from the usual brushes and effects to some pretty interesting touch-up tools. This lesson looks at each of the tools and discusses best practices for using them.
The Rubber Stamp (or Clone) tool is one of the more misunderstood drawing tools in the lineup. In this lesson you'll learn how to properly use this tool as you add a second salt shaker to a restaurant table.
Masking is a great way of changing 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
The great thing about vectors is that they give you tight control over paths - something that is critical when masking. In this lesson you'll learn how to use the vector tools in Fireworks to create masks and how a gradient fill can create a very effective mask with opacity.
You don't always need to use selections and vector shapes as masks; there is also 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.
In this lesson you'll see how to use the Paste As Mask feature to convert a path in one image or layer into a mask using a simple copy/paste technique. You'll also learn how to use the grayscale values of one image to mask another. Both are rather fascinating techniques.
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.
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.
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.
One common layout technique is flowing the edge of a text block to match the geometry of an image element. In this lesson you'll learn how the Text in Path menu item allows you to wrap text around irregularly shaped objects.
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.
Text is more than a communications medium; it can also be used as a creative medium. In this lesson you will learn a variety of techniques, from creating knockouts to converting text to vector shapes. From there you are only limited by your creativity.
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.
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.
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.
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.
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 see how this process works using a symbol in your document library.
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.
Wireframes are the first step in the design process. In this lesson we'll look at how the process starts with an idea, then becomes a sketch on paper or even Post-It notes, then is scanned and brought into Fireworks.
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.
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.
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.
This chapter looks at the options Fireworks offers for preparing images for use in Adobe Edge and creating images to be used on mobile devices like smartphones and tablets.
Creating for Edge and Mobile
Adobe Edge is a new HTML5-based application for adding motion and interactivity to web pages. Naturally, Fireworks is an ideal content-creation tool for this new product, which can use JPG, GIF, and PNG images. In this lesson you'll learn how to prepare images and import them into Edge.
New to Fireworks CS6 is the ability to create CSS sprite sheets for use in your web development efforts. Using a collection of icons and images from the FWUser site, in this lesson you will create the sprite sheet and export it out of Fireworks in a format that can be rapidly incorporated into a web design project in Dreamweaver CS6.
Resizing, renaming, and otherwise manipulating a folder full of high-resolution images used to be a tedious task. Not anymore. In this lesson you will learn how to batch process a folder full of high-res images for use in a content rotator on the FWUser site.
In today's multiscreen universe, small really does mean fast. In this lesson you will learn how to use the Fireworks Optimize panel to squeeze some FWUser content down to as small a file size as possible. Along the way you will discover a number of techniques that enable you to find that fine balance between file size and quality and learn how to export those images for use in web and mobile projects.
The CSS Properties panel is brand-new feature of Fireworks CS6. In this lesson you will see how to extract the CSS properties of a rounded rectangle with drop shadow that was added to the FWUser page using one of the Fireworks CS6 vector tools. You will also learn how to extract single or multiple properties of the rectangle and use simple Copy and Paste commands to add the rectangle to an HTML5 page.
As our web efforts move off the desktop and onto smartphones and tablets, mobile design skills are becoming more important. In this lesson you will learn how to use the new JQuery theme creation feature in Fireworks CS6. You will see how to edit a theme, navigate through the pages contained in the theme, and preview your work both in Fireworks and in a browser.
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.
Light interactivity can be added to Fireworks documents through the use of hotspots. In this lesson you will learn how to add a hotspot and use it to navigate through a Fireworks document or open a web page in a browser.
A critical step in the rapid prototyping process is creating documents that can be shared among the team. In this lesson you'll learn how to add slices to a web layer, name them, and make them interactive.
When you designing a project there are inevitably objects that don't go on a master page but do appear on other pages of the project. In this lesson, you will learn how to share layers on one page with other pages in a document.
A natural question is: Can I bring a Photoshop document into Fireworks? In this lesson you will learn that the answer is "Yes...sort of." You will discover that practically every imaging feature of Photoshop, with the key exceptions of adjustment layers and clipping groups, will move easily from Photoshop to Fireworks.
There are times when you just need to squeeze the last extra kilobyte out of an image or you want to review your image settings but aren't sure of the format. In this lesson you will be given a solid grounding in the Fireworks Export Wizard. You will learn how to answer the questions posed by the Wizard, how to optimize and compare your decisions with each other, and how to target a final file size for export.