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.
Different designers use different software, and we tend to use the software we're most comfortable with to get the job done. That's why you'll find sometimes you have to open up Photoshop or Illustrator files. But there will also be times when you have to export those formats, so others on the design team can work with them. We're going to take a look at that process in terms of a Photoshop file. Now onscreen here I have a Fireworks PNG file. It's got range of different elements in it. So I've got some text over here in the upper-left corner. I've got a vector logo in the upper- right corner. I have several photographs that all have been masked and have special effects like border and a drop shadow applied to them.
And over here on the right-hand side, I have a blue rectangle sitting underneath one of my photographs. If we take a look over in our Layers panel, you see we've got this structured with layers and elements inside of the layers. So I've got a logo layer. I've got a type layer, and I've also got the finish layer, which has all the different graphics in it. So I'm just going to collapse those down, and we're going to go to File > Save As, and I want to save this not as a Fireworks PNG file this time. I want to save it as a Photoshop file.
Now as soon as I choose Photoshop from the Save copy as list, I get an Option button displaying, giving me options over how I'm going to be exporting this file. I have a few different choices. The default setting is Maintain Editability over Appearance, which means Fireworks is going to try to keep the images editable as possible in terms of layers, vector effects and so on. I have other choices in here too and let's just take a quick look at these. We have the option to Maintain Fireworks Appearance, which means we make it a closure match to what the Fireworks document look like, but it may not be as editable inside of Photoshop.
We've also got an option for a Smaller Photoshop File. That generally means you're going to be flattening some of your elements. And then we also have an option for Custom, and Custom gives you the ability to control each of these four different categories: Objects, Effects, Vectors, and Text. Now again, the default here is trying to keep things as editable as possible, but you can click on these dropdown menus, and you have choices over what you can do. So under Objects, we can convert to Photoshop layers, or we can flatten each fireworks layer.
Under Effects, we can maintain editability, or we can render the effects. Now again, I tend to want to vote for Maintain Editability as much as possible. But if you're finding that the effects you're working with in Fireworks aren't coming across into Photoshop at all, you may want to sacrifice some editability just so you have the effect displaying inside of Photoshop. Maintain Editability of your vectors. So again, we have the choice here of flattening images or raster graphics or keeping them as vectors as much as possible. And then lastly here, maintaining or rendering our text and generally speaking, I think it's a good idea to maintain editability there too, so you can always change things after the fact.
So I'm just going to pop in and switch back to my main default choice of Maintain Editability over Appearance, and we'll click OK, and then we will click Save. I am going to hop over to Photoshop and choose File > Open and inside of my ch2 folder, there's my red_rock_ adventure_collage, and it's about a 9 megabyte file for Photoshop. So I'm going to choose Open. Now, we are getting a little message about the text and just a question of we're going from one software package to another and Adobe is just double checking to make sure that we want update our text layers to make sure that they remain as editable as possible in Photoshop.
So we're just going to say Update, and there is our file. Now, if you take a look over in the Layers panel first, let's see what we've got going on here. There is my logo layer with my logo. There's my type layer with an actual Photoshop type layer, and there's my finished layer with all the original photographs in it. Now let's break down these things a little bit more. I've mentioned to you earlier the logo in fireworks was a vector graphic. Now, this is a pretty complex vector graphic, and it's not supported by Photoshop.
When it's bringing this element in, it actually brings it in as a bitmap image. So just to give you an example, if I scale this, I can see that it's starting to break down. Okay, it's getting fuzzy. So that didn't come in as a vector element, but it did come in, in the right location, as a bitmap. On the other hand, in our type layer, we've got a Red Rock Adventure type, and it actually has been brought in as real text on a path. If I grab my Type tool, I can click inside the text, and I can change the text.
I can edit it and do whatever I want with it. It's completely editable. On the finish layer, where all our photographs are, you'll notice that we've got our images and our masking has all been maintained. As well, we've also got our effects. So we've got a drop shadow and a stroke applied to each of these images. This was applied as a Photoshop live filter inside of Fireworks, so they were brought over quite nicely. Now, what didn't come across was another live filter we applied for adjusting the levels in each of these individual images.
Much like adjustment layers aren't well supported inside of Fireworks, some of the live filters in Fireworks aren't supported inside of Photoshop. And if you want to maintain those kinds of things, you'll need to change your export settings to maintain the Fireworks appearance rather than to maintain the editability. One last little thing down here is that blue rectangle. Now, this is a simple rectangle primitive, and it's been brought across into Photoshop quite nicely. We have our vector mask and our color. So it's been maintained.
It's an editable object, and it's retained as a vector element. So you can see, you do have a fair amount of control and a reasonable degree of fidelity when you're exporting out a Fireworks file as a Photoshop file.
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.