Start learning with our library of video tutorials taught by experts. Get started
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.
Integration with Photoshop is an important mandate for Fireworks. Bringing in Photoshop files into Fireworks, or saving files as Photoshop PSDs, has become much more predictable over time. While it's not perfect, we do get some pretty acceptable results. Let's have a look at this process. I've got a Web page up here, one of my tour pages for our Web site. There's a big empty space that's just crying out for some kind of imagery. We happen to have something that our Photoshop designer has built for us, a series of images, a little collage of photos, snapshots of some people who went on one of these cycling tours.
So we want to bring this file into Fireworks. Now, we could open it and copy and paste, but we're going to import it, because it's a much more smooth workflow in that sense. So I'm going to choose File > Import. The file I'm looking for is called collage.psd. You'll see a little preview of it showing up in the Import window. I'm going to click Open. Unlike importing a regular JPEG file, or a flat image file where we go right back to the canvas right away, because we're dealing with a Photoshop file, we get some options.
We have some control over what happens to the file before we get to the actual canvas. So we can change things like the pixel dimensions or the resolution. I'm not going to play around with those things. I like to control my sizing through my Import cursor. But what's really interesting is this area down below where it says Layer Comp. You'll see here, we've got a little preview showing up. You might find, by default, that it's empty. So just click on the Preview check box to make it visible. Now, because we're dealing with a Photoshop file, we also have the option of working with Layer Comps. If the designer created different variations of the design and saved them as Layer Comps in Photoshop, Fireworks actually will see those different Layer Comps, and it gives us the ability to choose between the different options that the designer created.
So, the current one that's visible right now is the extra pic. I've also got two other choices here. I've got a complete one without the note, so there's just the photos. There's one missing image, and there's no little Post-It note. Then there's complete with the note. So I can pick between any one of these three Layer Comps to use for what I'm going to be importing into the design. So I'm going to go ahead and go with extra pic. I like that one. Take a look just below the Comments area. You'll see another dropdown menu. This gives us document-level control on how the file was imported by Fireworks.
So we've got four choices here. Maintain layer Editability over Appearance, that's the default setting. Fireworks will try to keep things as editable as possible, but it may not look exactly like the original Photoshop file. We can choose to maintain Photoshop layer appearance, which means that Fireworks would do the best it can to maintain the appearance of the original Photoshop file, which may mean that certain things are flattened, such as Adjustment layers and things like that. The image will look like it should, but it won't be editable as it would have been in Photoshop. We can also choose Custom Settings from Preferences.
You recall when we worked with the Preferences dialog box awhile back, that we could actually set up our global preferences for how Photoshop files are handled when they're being opened into Fireworks. The last option, Flatten the Photoshop layers to a Single Image, if you know you're not going to need to do anything with the image after it's been imported, if you're positive you won't need to make any adjustments, you can simplify your layer structure by flattening the whole design into one flat bitmap image. Now, in my case here, I want to keep things little more editable. So, I'm going to keep my original choice here, Maintain layer Editability over Appearance.
One last option I want to point out is Import into new layer. Because we are bringing in a multi- layered file, what I'd like to do is try to keep everything together in one sort of master layer for the Photoshop file. So I'm going to click on Import into new layer, and this will keep everything together for me in its own layer separate from everything else. So I'm just going to click OK, and I get my Import cursor again. All I'm going to do is click and drag to a size I think is suitable.
Let go over the mouse and in comes the entire design. If I move my cursor over that collage, you'll see every single photograph in here is a separate element. Even my Post-It note and my text are all separate objects that I can edit anytime that I like. Now, if we take a look over in the Layers panel, you'll see a new layer has appeared called Imported from PS. That's our brand-new layer for the entire collage. If I just select it and hide it, you'll see the entire collage disappears. Everything that's part of that import is inside that main layer.
There's a bit of layer hierarchy inside the layer itself. I'm just going to collapse my Pages panel, so we can see a bit more of what's going on. There is the name of the Layer Comp, extra pic. Inside of that, we've got Group 1, which is basically just the actual Post-It note and the text. Then I've also got all my other images inside of there as well, all the different photos that were used for this design. So, what I'm going to do is just reposition things a little bit. I'm going to hold down my Shift key and make sure that everything is selected.
So I've selected the extra pic layer and the Group 1 layer. You can see on my canvas, everything is completely selected. Now if I hold down my Shift key and use my Right Arrow key, I can just reposition that photo collage a little bit further over into the design. That looks pretty good! So, I'm just going to click away from everything. I just want to point out one other thing here with these individual objects. So I click on this top photo, for example, you'll notice it's got a border and a drop shadow. Well, these are editable Photoshop Layer Styles, which in Fireworks are called Photoshop Live Effects.
If we take a look down the Properties panel, you'll see I've got Photoshop Live Effects as an option in my filters. So if I click on the little Info icon, I can go ahead and edit those options. I could change the Drop Shadow. I could alter the settings there. I could change the Stroke settings. Do whatever I like with it. The great thing is that those effects have been brought over and retained as editable elements. So, just to wrap it up, the design cycle doesn't always happen in a vacuum. There are going to be times when you receive Photoshop files from other designers that need to be incorporated into your existing Fireworks designs, and Fireworks does a pretty good job of bringing those files in.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.