Sometimes you just have to work with what you are given. In this exercise you apply what you have learned in the chapter to an image that, on surface, really doesn't appear to need any correction.
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.
Introducing Fireworks
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.
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.
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.
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.
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.
One very unique feature of Fireworks is its ability to add interactivity and motion to your documents. This lesson looks at the States panel, which is where the magic happens.
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.
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.
Fireworks' auto shapes let you create icons, buttons, and just about anything else you can think of using a unique combination of vectors and JavaScript. You'll see how this unique feature works in this lesson.
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 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."
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.
No image is perfect. In this lesson you will gain solid first-hand knowledge of how to approach image retouching and color correction in Fireworks.
Image Retouching and Color Correction
Retouching and color correction start with identifying artifacts in the image and removing or replacing them using the Rubber Stamp and/or Pencil tools, as you'll see in this lesson.
Every image has a color cast. In this lesson you'll learn how to identify a color cast in Fireworks and how to adjust an image to reduce the color cast if you want to.
Sometimes you just have to work with what you are given. In this exercise you apply what you have learned in the chapter to an image that, on surface, really doesn't appear to need any correction.
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.
A bitmap mask "hides" bitmap data with a pixel-based mask. In this lesson you will discover how a bitmap selection can become a mask with the click of button.
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.
Creating text wrap is interesting but what if you need the text to follow an irregularly shaped path or go around a circle? In this lesson we'll do just that.
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.
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.
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.
This lesson looks at a very special type of symbol called a component symbol. Component symbols are UI objects - text boxes, combo buttons, radio boxes, and so on - that come packaged with Fireworks.
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.
Wireframing
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.
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.
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.
The Endgame
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.
This lesson's focus is client approval and team critique. You will learn how to use the Fireworks Export menu to prepare a PDF or an HTML document for client approval or team review.
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.
In this lesson you will learn how to prepare an Illustrator document for import into Fireworks and how to use the Illustrator Import dialog box in 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.
Android
Apple iPad
