Foundation Fireworks CS4- P2 ppt

Figure 1-8 shows the Photoshop File Open Options dialog, launched when you open a PSD file a similar dialog is displayed if you choose File ➤Import and select a PSD.. Photoshop File Open

WELCOME TO FIrEWOrKS

bars being diced into multiple pieces and stretched laboriously to represent the actual width or height needed by the layout In short, they saw the pain that users were experiencing to create application mockups that resembled their final output when running as a true application

To ease this pain, the Common Library (Window ➤ Common Library) was created Figure 1-6 shows the Common Library panel with the Flex Components category expanded

Figure 1-6 Common Library panel

A large number of controls have been implemented as Fireworks symbols that you can drag from this Common Library directly to your page In addition to Flex-styled controls, there are both Mac- and Windows-styled controls, as well as a number of non-OS-specific controls and icons to speed the creation of your layouts Figure 1-7 shows the Flex, Mac, and Windows versions of the radioButton symbol The Symbol Properties panel is used to set common properties on the selected control, such

CHAPTEr 1

Figure 1-7 Setting radioButton symbol properties

These are some of the common features that make Fireworks a great tool for prototyping:

Pages

States

Common Library

Create AIR Package command

Export Flex Skin command

Export FXG command

PDF export

HTML export

Fireworks and the Creative Suite

While Fireworks can stand on its own as a design tool, it doesn’t have to And, because of its strengths and history in web design, Fireworks is often used as an integration tool prior to slicing and exporting images for use on the Web, bringing together assets (such as logos or retouched images) created in other tools It’s important that you be able to import artwork created in these other tools and export

to their native formats as well The Fireworks team (along with the rest of the Adobe engineering team) has gone to great lengths to develop an effective workflow between Fireworks and the other Creative Suite tools, such as Photoshop, Illustrator, and Flash

The fastest way to move artwork from one program to the other is by simply copying and pasting work For example, you can select an object on the Photoshop stage, copy that object, and then paste that object directly to the Fireworks stage Likewise, you can copy artwork on the Fireworks stage

art-WELCOME TO FIrEWOrKS

and paste it into other Creative Suite applications While the copy/paste approach is fast, it does not always give you the level of control that is needed when moving from one application to the next In the following sections, you’ll see how Fireworks gives you extra control over importing and exporting artwork to Photoshop, Illustrator, and Flash

Photoshop support

Fireworks can both open and save Photoshop PSD files Figure 1-8 shows the Photoshop File Open Options dialog, launched when you open a PSD file (a similar dialog is displayed if you choose File ➤Import and select a PSD)

Figure 1-8 Photoshop File Open Options dialog

When opening a PSD, Fireworks lets you choose how the underlying artwork is imported By default Maintain Layer Editability over Appearance is selected from the last combo box When this option is selected, Fireworks tries to convert Photoshop elements into native Fireworks objects If you just want to drop a Photoshop element into your existing layout and have no need to edit the artwork, select Flatten Photoshop Layers to Single Image to ensure the imported artwork looks exactly as it did

CHAPTEr 1

Fireworks also lets you save your file as a Photoshop PSD and offers export options similar to the import options just seen Figure 1-9 shows the Photoshop Export Options dialog

Figure 1-9 Saving as a Photoshop PSD

This dialog is displayed by clicking the Options button of the Save As dialog after selecting Photoshop PSD from the Save copy as combo box Just like importing, the settings you choose here should be dictated by how the final exported PSD will be used

Illustrator support

Like Photoshop files, Illustrator files can be opened directly via File ➤ Open or can be imported into an existing Fireworks document by selecting File ➤ Import from the main menu Once you’ve selected an Illustrator file, the Vector File Options dialog is displayed, as shown in Figure 1-10

WELCOME TO FIrEWOrKS

Figure 1-10 Vector File Options dialog

This dialog lets you customize the way Illustrator artwork is imported into Fireworks, letting you specify the scale and resolution and whether or not you want large groups rasterized (in the Render as imagessection) Save Fireworks documents as Illustrator files by selecting File ➤ Save As from the main menu and selecting Illustrator 8 from the Save copy as menu When saving Fireworks files as Illustrator files, Fireworks will generally rasterize any objects that use filters or unsupported fill types

Flash support

Flash is a common destination for artwork created in Fireworks And (surprise, surprise) Fireworks includes a custom Adobe Flash SWF Export Options dialog that lets you customize the way Fireworks artwork is treated when exported Select Adobe Flash SWF from the Save copy as menu of the Save Asdialog, and then click the Options button to see the dialog shown in Figure 1-11

CHAPTEr 1

Figure 1-11 Adobe Flash SWF Export Options dialog

When exporting to SWF, like exporting to Illustrator or Photoshop, you have options to preserve ability or appearance The resulting SWF can later be imported to the Flash design surface by selecting File ➤ Import from within Flash Further, as mentioned in the “Fireworks and the Creative Suite” section earlier, you can copy objects on the Fireworks stage and paste them directly to the Flash stage Flash automatically launches a custom import dialog as shown in Figure 1-12

edit-WELCOME TO FIrEWOrKS

Figure 1-12 Import Fireworks Document dialog in Flash

Once again, you’re presented with options that let you find the right balance between editability and appearance preservation Unlike interoperability with Photoshop and Illustrator, Fireworks does not have a way to natively open artwork created with Flash You can get around this by exporting Flash artwork to an Illustrator file, and then importing the Illustrator file into Fireworks

Summary

You should now have an idea of who uses Fireworks, why they use Fireworks, and how they use Fireworks with other tools of the Creative Suite In the chapters that follow, you’ll be introduced to the Fireworks toolset from the ground up You’ll see how to create highly popular (and polished) effects, learn about Fireworks extensibility, and even be shown how to extend Fireworks yourself You’ll see why Fireworks is used by leading web designers, illustrators, graphic artists, and user inter-face and user experience professionals, and be prepared to join their ranks By the end of this book, you’ll be well on your way to becoming a Fireworks pro yourself So, push up your sleeves—it’s time

to get started!

a start for users to explore those functionalities in depth To understand the text in this chapter, we advise you to install the CS4 applications discussed in this chapter apart from Fireworks, namely Photoshop, Illustrator, and Flash The 30-day-trial edi-

tions for all these applications are available at www.adobe.com.

What is integration?

Integration is the process of connecting multiple applications or tools to create a

final product In designing, integration is the act of using multiple applications to ate a picture or piece of art

cre-If you have ever designed a 3D scene and then imported it into Photoshop, you have integrated two tools to create a finished piece In fact, many tools exist that work well with each other Adobe has built the Creative Suite around this concept to make the designers’ and developers’ lives a lot easier

FIREWORKS AND CS4 INTEGRATION

ChAPTer 2

How integration helps

The goal with integrating multiple applications is to speed up the design process and make changing

an existing project faster as well You will find that integration also makes working in a team ment smoother and more seamless A team designer proficient with Photoshop might not migrate to Fireworks or vice versa In such a situation, designers can use the application of their choice and still get their designs worked upon by other team members

environ-The reason integration abilities benefit teams is because the designer can focus on his or her skill set and not have to worry about preparing the design for the developer The developer can take the files from the designer and simply import them without any modification

Another less-known advantage of integration is the ability to keep your designs in sync, because you never have to export the individual elements of a project This in turn means fewer chances for errors

in the design and development process

Now that you know what integration is and how it can help you, let’s take a look at how integration works within the Creative Suite

Integration within the Creative Suite

You will find most of the applications within the Creative Suite offer some level of integration Some examples of integration would be the ability to load PSDs directly into Dreamweaver or the ability to create a Fireworks PNG (the default Fireworks file format) and load that directly into a Flash applica-tion Copying text objects from Illustrator or Photoshop and pasting them into Fireworks with all the attributes editable is another integration example among Adobe CS4 applications A symbol created in Fireworks intelligently converts into an editable component when copied and pasted into Flash.This chapter will cover the integration of Fireworks with Photoshop, Flash, and Illustrator We will look

at the similarities and differences as you start sharing files across the applications

Once the fundamentals have been examined, we will wrap up the chapter with an exercise of building

a basic Flash interface using Fireworks as the basis of an application

For this chapter, you will need to have Flash, Photoshop, and Illustrator installed on

your system Thirty-day trials can be downloaded from www.adobe.com if you do not

already own these software programs but would still like to follow along.

In this section you learned what integration is and how it can help Now we will start looking at gration features available in Fireworks CS4

inte-You will quickly realize how well the CS4 applications work with each other

18

FIreWOrKS AND CS4 INTeGrATION

Integration with Photoshop

The first application we will work with to cover Fireworks integration features is Photoshop CS4 Fireworks has the ability to work with the PNG format by default, but it can easily load a PSD file (native Photoshop format) You can access a PSD file in Fireworks in two ways: either open it or import

it into any page of the Fireworks PNG file

Importing a Photoshop file

To import a PSD in Fireworks, select File ➤ Import and navigate to a PSD on your machine Once you have found a PSD you want to import, click Open, and the Photoshop File Import Options dialog box will appear

This dialog, as shown in Figure 2-1, allows you to choose which contents should be imported It has a variety of abilities, such as previewing the PSD and allowing you to choose specific layer composites

to import

Figure 2-1 Photoshop File Import Options dialog in Fireworks CS4

The three check box options at the bottom of the Photoshop File Import Options dialog are unchecked

by default, but the settings will persist when modified Also, the drop-down selection options persist

on further PSD imports

ChAPTer 2

When importing multiple PSDs, we recommend you enable the optionImport into new

layer to ensure the document is easy to work with in the future This option is found at

the bottom of the Photoshop File Import Options dialog.

Pixel Dimensions

The Pixel Dimensions section of this dialog is pretty straightforward The size of the imported objects can

be set here Most of the time you will want to leave the resolution at the default setting of 72, but you do have the opportunity to change that setting in this section as well The last option in the Pixel Dimensionssection, Constrain proportions, is used to keep the same ratio when you modify the height or width

Layer Comp

Photoshop allows you to create states in your document called layer comps These are most often

used to demonstrate many options to a client or colleague without your needing to generate multiple files The Layer Comp option can also be used in other apps, such as Fireworks

Using the drop-down, you can choose a specific layer comp to import If you’re unsure which layer comp you want to load, you can check the Show Preview option This will display a thumbnail of the specific layer comp

The last drop-down box allows you to select from the following four import options These tings define how elements in the PSD file are brought into Fireworks The option you should choose depends on the use cases of the document objects being imported into Fireworks (e.g., you want the objects to be editable or retain custom settings) after importing

Maintain Layer Editability Over Appearance: This option will ensure you are able to edit the

objects within the imported document and even sacrifice some appearance specifics to make sure editing is still possible

Maintain Photoshop Layer Appearance: When you prefer to preserve the display of the

imported graphics, this is the option you would use This will favor the original Photoshop graphic quality over editability

Custom Settings From Preferences: rather than choosing settings each time, you have the

option to set up a default one in the Preferences dialog box under the Photoshop Import/Opencategory This option tells the importer that you would prefer to use previously defined set-tings, rather than the settings from this import dialog box This allows users finer control on how the objects should appear when they are imported in Fireworks

Flatten Photoshop Layers to Single Image: Occasionally you will have a document that doesn’t

look good when imported, or maybe you have no intention of editing the document When this

is the case, this option will ensure the appearance is pretty much identical to the one found in Photoshop, because the imported file will become a flattened graphic This setting will convert the PSD file contents into a single bitmap object, losing the capability to make any edits

FIreWOrKS AND CS4 INTeGrATION

The last two options available when importing a PSD are Include background layer and Import into new layer Both options are pretty straightforward Sometimes, when creating a graphic in Photoshop, the background is required for layers to properly be blended If this is the case, you would ensure the background layer is included when importing the PSD

The Import into new layer option is important if you have a complex document and don’t want ments of that design to get misplaced This option would ensure that all the objects of imported graphics would be placed on a new layer in the Fireworks document

ele-Once you have made all the changes to the settings for this import, click OK to import the PSD Your mouse cursor will change to an “L” on its side This special cursor is used to define the bounds where the document will be placed Click and drag to define the width and height By doing this you are defining the crop point This means the final object will only display within the regions you define

The object will be resized based on the size you define Once you have defined the required size, release the mouse button, and the object will be placed

If you just click once when the “L” sign is visible, the actual dimensions of the objects

within the PSD file will be applied to the imported objects.

Opening a Photoshop file

To open a PSD in Fireworks, select File ➤ Open and navigate to a PSD on your machine Once you have found a PSD you want to import, click Open, and the Photoshop File Open Options dialog box will appear

You also can open a PSD without an existing document available When you open a PSD versus ing one into an existing Fireworks document, you will be presented with a set of options similar to those in the Photoshop File Import Options dialog, aside from the check box options at the bottom, as shown in Figure 2-2

import-These options are replaced with two new ones The first, Include Guides, allows you to include the guides that were created in Photoshop The other option, Convert layer to frames, will convert the lay-ers found in the PSD to states in Fireworks This option is commonly used when you are creating an animation, such as animated buttons for a web project

While importing/opening a PSD file with the drop-down option Custom Settings From Preferencesselected, the settings from the Photoshop Import/Open section of the Preferences dialog are applied,

as mentioned previously In the preferences settings is the check box option Prefer native filters over Photoshop Live Effects This option, which has been added in Fireworks CS4, is helpful for designers wanting either a Fireworks or a Photoshop appearance for filters When the check box is checked, all the effects applied to an object are mapped to Fireworks effects When the check box is unchecked, the effects on the objects are mapped to Photoshop effects This may change the appearance on some occasions

ChAPTer 2

Figure 2-2 Photoshop File Open Options dialog in Fireworks CS4

The advantage of using Fireworks filters is that all the filters are individually listed, thus allowing their movement in the hierarchical order in which they are applied The multiple Photoshop live effects when applied are shown as a single effect in the Property inspector, restricting the individual effects’ hierarchical movement

If the PSD file to be imported/opened has a color profile attached to it, Fireworks will

ignore it This may result in color shifts for certain files.

Photoshop Live Effects

You probably already know you can create graphics with filters in Photoshop however, did you know that the filters can be re-created in Fireworks? When you import a PSD with filters that Fireworks can work with, it adds a Photoshop Live Effects entry in the Filters section within the Property inspector, as shown in Figure 2-3

FIreWOrKS AND CS4 INTeGrATION

Figure 2-3 Photoshop Live Effects entry in the Property inspector

If you click one of the objects that has a filter applied and then look in the Property inspector, you will see the Photoshop Live Effects item With the object still selected, if you double-click the filter, a dialog box will appear, as shown in Figure 2-4

Figure 2-4 Photoshop Live Effects dialog box

Most designers familiar with Photoshop will notice that this dialog box is very similar to the one found

in Photoshop In fact, it is a lot more user friendly for these designers due to the similarities

Filters imported from the PSD will display a check box in front of their name, as shown in Figure 2-4 Clicking a filter entry will reveal the settings for that filter The starting values of filters found in the imported PSD are also carried over, which makes it easier to edit and manage