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.
Establishing a comfortable workflow, especially when you are prototyping projects, is a really important component to being efficient and making the best of your time. So I would like to share some things with you that I found useful and maybe they'll solve some of the problems you are already experiencing. Let me start off with Pages here, and one other things you're going to run into when you're coming up with concepts for a project is inevitably the clients is going to want to see a slightly different variation on what you're doing. Now, rather than build a whole bunch of different files or edit your existing file and lose your changes, make use of pages to show those different iterations.
So, for example, I've got my little olive_site design up here, and the clients ask for a couple of changes. They want to see a smaller logo and a smaller header, for example. So rather than make any changes here, I'm going to create a duplicate of this existing page. So I'm just going to click on my Page. I'm going to drag it down to my New/ Duplicate icon and create a brand-new copy. Now, it shows up as Page 1 Copy. I think I'm going to rename these. I'm going to change this one to original, and I'll change this one to iteration1.
So I've got a slightly different name for that. Now, I need to make a couple of changes here as the clients request. I'm going to hide my slices for a minute. I'm going to rescale my logo to make it a bit smaller, something along that range there, double-click to lock that in the place. I need to also rescale my header area so I don't have all that extra area. There it's good, and as well, I've also got to reposition these elements because now there's this big gap between the header and the content.
So I'm going to grab my Pointer tool and one nice little trick with Fireworks is if you want to select a lot of different things, you can use your Pointer tool to click and drag over those elements on the page, and as long as you overlap parts of them - I've to do that again - as long as you overlap at least parts of those different objects, you'll select all the object. So that grabs all my content. I'm just going to hold down my Shift key and press the Up Arrow key a few times. Something like that looks pretty good. Now I've got basically an update to my design.
Now, once I've done this I can also export this out as a file for the client to view. I'm just going to check my Optimize panel, and my default format is PNG 24, which is fine except that's going to be a slightly larger file than I probably want for e-mailing. So I'm going to change this to JPEG. That's my default optimization setting at this point. Now, hop back to my Pages panel, and I'll right-click on iteration1 and I'll choose Export Selected Page. This gives me the ability to export this file out in a variety of different formats.
In my case, I just want a plain old flat JPEG file so I'm going to change my Export option to Images Only. I've got a little message about slices being ignored, because there are slices in the design and when you export a flat file, you can't use the slices. So I'll say OK. And I'm just going to my leave my option here as Selected Pages for the Web pages are being exported. And I think I'll rename this though for index.jpg to iteration1.jpg, and make sure I'm in the right location.
There we go and just save away. Now, basically I could go ahead and open that file just to show you what's happened, File > Open and go into my Exercise Files/ch9 and there is my iteration1.jpg file. if I open that up, there it is a flat .JPEG file that I can e-mail to the client for them to comment on or approve or whatever it happens to be. I want to talk a bit more about the Master Page as well. Now, we've looked at the Master Page as a tool for basically storing common elements of your design. Well, you can use the master page to store common navigation for your design as well.
So I'm going to go ahead and add in one more page here, just so I've got a couple of different links to generate. I'm going to drag my iteration1 file down to my New/Duplicate Page icon and create a brand-new copy. I'll change the name to iteration2, and I'll make a slightly different iteration. So I'm going to select my different elements here. One thing I forgot to do is alter my slice location, so I'm going to make changes there as well, because they are a little bit confusing, all those red guides.
So let's actually do that first. I'm going to show my slices again, there we go, and I'll just reposition these slices in the right spot. Now I need to do that for my other iteration page too. Now, this particular part of the image by resized or scaled logo, I'm just going to delete that slice and then right- click on it and Insert a new Rectangular Slice. In my other image, I'll just reposition that too. So everything is back in the right place. Now, while I'm still here I'll make a couple of change as I'm going to shift my text over to the right-hand side of my design.
I'm going to use my Select Behind tool to select my slice and my image by Shift+Clicking and reposition the image over on the left-hand side, and do the same thing with my other image. Again, holding down the Shift key lets me select first the top element and then select by clicking a second time I can select the bottom element at the same time. So now I'll get a slightly different position. I'll make one more change here, and that's my slices on my original iteration page.
They are still in the wrong location. So I'm going to reposition those, and I'm going to delete that old slice for the logo, and then just reinsert a new Rectangular Slice just like that. So now I've got three different pages, my original, iteration1 and iteration2. And what I'd like to do as well is share some of the elements that are on this design. So there are lot of changes going on between the three pages in terms of the content itself, but the navigation is consistent from page to page, so this is a really good opportunity to share that navigation across all the pages.
So I'm going to create one more copy. I'm going to grab my original file, drag it down to my New Pages icon. I'm just going to call it common, and I'm going to pop it up to the top here. This is also basically the way you would add in a Master Page after you start building out in design. If you don't start with the Master Page, it gives you good idea of how you can sort of reverse-engineer that Master Page. So on the common page, I'm going to select everything that's not going to be shared by all the pages.
And that's going to require me to just click and drag across all the elements of my content area, just like that, and I'm going to delete them. Okay, so that's gotten rid of everything but my navigation. So the only thing showing is this navigation bar. I'm going to hop over to my other pages, and I'm going to do the reverse. I'm going to select my navigation and delete it from the pages. And again, just using the Pointer tool clicking and dragging makes it really short work to get rid of those elements.
All right! So the navigation, which is going to become common to all my pages, is now missing from those three pages. I'll go back up to my page. It's got the navigation on it, and I'm going to convert this into a Master Page. I'll choose Set As Master Page from the pages options. And now, if I click on my pages, you'll see that they all have my navigation bar back, all thanks to that master page. Now, the last thing I want to do here is create some links. So I'm going to select my first slice on my Master Page, and I'm going to link off to my original page.
I'll select the slice on my second link and choose iteration1, and on the third one iteration2. And with that done, I'll switch over to my original page, and now I can actually preview this whole structure. So I'm going to go to my File menu and choose Preview in browser > Preview all pages in Internet Explorer and Fireworks will generate all of the temporary pages that are needed, and I can see my design in the browser and if I click on the individual links, you'll see I can move back and forth commonly from each page so that navigation is constant on every single page in that preview.
So it's another way to sort of save some time. Just remember that this is an example where the navigation doesn't change on from page to page. So if your navigation is going to be different on the different pages, adding it to the Master Page is not going to be a good idea. I'll just close the browser. I'm going to take a look at one more file here, choose Open, and I'm going to grab my mockup_site here. And this is just mostly just a reminder about some structuring. I mentioned in the past, it's really important to sort of keep a handle on your structure of your document, and you can do that using pages obviously for different content, but you also can do a lot of structure work inside of your Layers panel.
I've just collapsed everything down here for a minute so you can see how compact my Layers panel is when I've collapsed the master layers for the design. Now, if I click on my navigation layer, you'll see all my different navigation objects are showing up in there. Now, ideally these should be named so you want to go into each one of these individual objects based on the object that's selected and rename it. So I'll just change name here to tours. I'll zoom out a little bit so I can see things a bit better. There we go.
Next one is contact. Getting into the habit of naming of your objects and your layers and your sublayers is really helpful because you never know when you're going to have to access a file that you might have designed a few months ago, and having everything named makes it a lot easier to get oriented to the file structure. And mission is the last one. There we go, okay. So I can expand and collapse my navigation layer. I've got multiple objects in it so I can basically declutter my Layers panel a little bit.
Now, the main layer here, and actually that should be given a different name as well. We'll just name that. We'll call it main page content. The main content area has quite a few different structure elements to it as well. We've got a header sublayer, a content region sublayer, a footer sublayer, and a backgrounds sublayer. And withinside of those we've got further drilling down. So inside of our header sublayer we also have a logo sublayer, a tour sublayer, and nav bar sublayer and so on.
So it's kept very, very organized, very structured, and it, again, makes it easier to find things as you're moving through. And also from the standpoint of just being able to look at your Layers panel, you only have a limited amount of vertical space here. So if you just put everything inside of a single layer, then you either have to show everything or show nothing, which makes it a little harder to find things as you're moving through that Layers panel. By structuring your design with layers and sublayers and possibly even subsublayers, you're able to condense the overall layer structure and make it a little easier to work.
Now, as well as being able to structure your designs in this way, you've also got the ability to very, very quickly hide entire sections of your site. So, for example, I can choose the content region here, and I can click on the eyeball icon and hide the content that's all inside of my main content region. Equally, I can also lock that region, so if don't want to edit anything in there by accident, I can click on the Lock icon and that particular layer and anything inside of it is no longer accessible for editing. You can also lock or unlock or show or hide layers by using your mouse and dragging through the layers.
So, for example, I can go up to my main page content, hold down my mouse button and drag down the eyeballs, and you see I can basically make my entire site disappear, and go back the other way. So I can show and hide things very quickly. I can do the same thing inside of my locking element. So I can go to my header layer, for example, expand that down. I can click on the Lock icon for the logo, and I can drag downwards and lock everything that's inside the header layer so it won't be edited by accident. So again, a couple of different ways that sort of make you work a little bit quicker.
And lastly with this page, I just want to bring up one other concept. We touched on this in one of the previous lessons, but I think this is a really powerful feature inside of Fireworks. I just want to impress this on you. If you're working in a team atmosphere and you have different designers working on different page content for the same project, being able to bring that content into an existing design is really, really helpful and Fireworks has made this incredibly easy in CS5. So, for example, I'm just going to scroll down at the bottom of my pages here and go to my snowboarding page, and see brand-new content and everything. And what I want to do is add in an additional page to the rest of this content.
So all I've got to do is go to my File menu and choose Import, and I'm going to look for a file called mockup_tourWine_final. This is another design. You'll see a little preview of it here, and it's a single page, and I can see that option right there. If this is a multiple page design, for example, just to give you a quick idea I'll just go to my comps page. If I grab the file that has multiple pages in it, I can actually scroll through the pages, and I can choose which page I'm going to import into my design, which is also incredibly handy.
So I'm going to go back to my tourWine_final here and just choose Open. And I'll get my preview option again here, and you'll see I have 1 of 1 pages. The key with this is to make sure that you choose Insert after current page. That'll tell Fireworks to generate a brand-new page and place all this content on that new page rather than laying it on top of existing content in the current page. I'll just choose Insert, and this process is incredibly fast. Fireworks creates a new page and drops the new content into that page just like that.
Then from here I can go and share my navigation objects and also my Web objects for creating hyperlinks, but this is a really, really nice feature. Now a couple of more tips before we finish off this lesson, both of which hopefully will save you some time, and they all revolve around batch processing and creating custom commands. Now, it's very likely, when you're working on a project, if you're receiving assets from outside your own organization, you're probably to get files that could be the wrong size, maybe they are original photographs for a photo shoot, for a Web site, and they're all coming in a very high resolution.
Now, we don't need high- resolution images inside of Fireworks. It's not the most efficient way to work. So rather than constantly opening them up and resizing them and saving them, we can actually batch process a whole series of files to the size and dimension that we want. And I'm going to show you how to that right now. I'm going to go to my File menu, and I'm going to choose Batch Process, and I'm going to browse to my folder. Now, I have a folder in here conveniently called hi_res_photos, so if I open that up, there is a few different images in here, all high-resolution quality images.
And I can select individual images for this process, but they're all high-res files so I'm just going to go and choose Add All, and that adds everything inside this folder to the list of files that are going to be worked on. I'm going to click on my Next button and here I can choose what processes I want to use, so the very first one is Scaling. I want to rescale these so I'm going to add that to my including batch. And I think I'm also going to choose to rename these files so I'm going to add that process here as well.
And lastly, I'm going to choose Export. So I've got three different processes I'm going to run through with all these images. Now, each one of these different actions has different options that I can control down here at the bottom of the Batch Process window. So for Scaling, for example, I'm going to go in here, and I'm going to choose Scale to Fit Area, and I don't want any of these images bigger than 600 pixels wide or tall. So that's going to force both vertical and horizontal images to have a maximum dimension of either 600 pixels wide if it's a horizontal image or 600 pixels high if it's a vertical image.
Click on my Rename option here and all I want to do in this case is add a prefix. So I want to have some indication that these are my Web images. So I'm just going to put in the term here Web_, so that's going to add that prefix to every single file. And the last bit here, Export. I want to set these all to JPEG-Better Quality, and I could edit the setting, but you don't really see anything in the Edit menu here because you have multiple files so you're just kind of guessing. So I'm going to go with JPEG- Better Quality. That should do the job.
Click on my Next butto,n and here I can determine where these files are going to be output and whether it's the same original folder or whether it's going to be a custom location. I can even control how the backups are handled. I can Overwrite existing backups, I can add Incremental backups, and I can even save this entire set of steps as a script. We'll get to that one in just a minute. What I want to do here is pick a Custom location now. I don't want these back in my high- resolution folder, because there is not much point in having them there. So I'll go to my Desktop, go to our Exercise Files, and I'm going to create a brand-new folder here called web_photos.
That one is blatantly obvious so we'll choose that and click Open. So now you'll see a path pointing to my web_photos folder. Now, before I go any further, if this is a process I think I'm going to be needing on a regular basis, rather than having to walk through all these individual steps in the Batch Process Wizard, what I could do is I can save this as a script that I can call on from the Commands menu. So I'm going to click on Save Script and again, you can determine where you're going to save this particular file.
Now it really comes down to your own preferences here. Keep in mind that Fireworks has to know where to find the file. So I'm going to go ahead and go to my Computer, open up my C drive, go to Users, and there is me, so I'm going to go ahead and pop it into that location, and I'm going to call this Web_resize. I don't need to worry about naming conventions here particularly, but I'd like to just keep in the habit of having those spaces in my file names.
So I'm going to pop that in there as Web_ resize, and I think I'll put it into My Documents folder like so and just click Save. So that's going to save that file for me, and we'll see that what is it that comes in handy in just a minute. My next step is to click on Batch. Fireworks run this exercise relatively quickly. Actually, if you're watching the screen, you'll notice that it generated my - you'll see the files updating inside my Web Folders icon in my ch9 folder.
So in relatively short time, Fireworks took about 13 high-resolution, 4000 pixel wide images and reduced them down to maximum long dimension of 600 pixels. Just click OK. I'm back to Fireworks. Now, that command that we were talking about, let me just show you what's happened there. If I go up to my Commands menu, I can choose Run Script, and I can browse for that Web_resize file, and just click on Open. Once I launch the custom command, I can go and choose whether I want to work with the currently open files, or go to custom and basically custom means I can go browsing for other images.
And I can run that entire script again, all the resizing, the renaming and so on, on a new batch of files if that's what I want to do. So that's a pretty handy feature. I'm just going to click Cancel there because we don't actually need to do that. There is the couple of ways of speeding up your workflow. The Batch Process command in itself gives you the ability to resize a whole series of files, for example, really, really quickly, and you can even save that script as something that you can use later on and save yourself even more time, because you don't have to walk through all the batch processing steps.
So those are just a few of the things I run into on a regular basis and different solutions I have created for resolving them. I hope you've picked up some tips to help you smooth out your workflow and make your job even easier.
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.