Fireworks CS4: Rapid Prototyping
Illustration by John Hersey

Importing graphics into a first storyboard


From:

Fireworks CS4: Rapid Prototyping

with Jim Babbage

Video: Importing graphics into a first storyboard

In the last movie, we downloaded the color theme using the Kuler panel in Fireworks and converted them into a Custom Swatch panel. Now, in this movie, we're going to start putting the elements together. The client has been kind enough to supply us with several photos as well as the vector version of their logo and I've prepared a quick demo file to show you the progression, in creating the first storyboard. Let's have a quick look at that and then we get on with the real construction. So on our screen here, we've got our first part of the demo which is just an empty blank page with the chocolate brown color as the background color and then as we move through the progression in this, you see it partially built with that background added in behind our products.
Expand all | Collapse all
  1. 4m 17s
    1. Welcome
      1m 11s
    2. Using the exercise files
      48s
    3. Understanding rapid prototyping
      2m 18s
  2. 8m 0s
    1. Using Share My Screen
      4m 19s
    2. Using PDFs for wireframe and design feedback
      59s
    3. Understanding storyboard concepts
      1m 5s
    4. Viewing the HTML prototype
      51s
    5. Viewing the AIR prototype
      46s
  3. 1h 28m
    1. Understanding wireframes
      4m 45s
    2. Planning a wireframe
      13m 52s
    3. Creating a wireframe
      19m 46s
    4. Adding a master page and its subpages
      10m 5s
    5. Customizing subpages with Greeked text
      9m 35s
    6. Emulating a Spry accordion panel with the Grid Autoshape
      6m 7s
    7. Creating an order form
      12m 25s
    8. Building a contact form
      7m 55s
    9. Exporting wireframes
      4m 16s
  4. 45m 33s
    1. Making a wireframe realistic
      1m 0s
    2. Using the Kuler panel for color choices
      6m 37s
    3. Importing graphics into a first storyboard
      17m 20s
    4. Adding navigation
      10m 7s
    5. Adding design variations
      4m 15s
    6. Using Demo Current Document
      2m 33s
    7. Emailing deliverables
      3m 41s
  5. 22m 47s
    1. Adding a new page
      7m 46s
    2. Adding component symbols
      3m 40s
    3. Adding interactivity
      6m 14s
    4. Exporting storyboards as a PDF
      5m 7s
  6. 21m 41s
    1. Exploring the completed prototype
      1m 57s
    2. Mocking up an interactive accordion panel
      7m 13s
    3. Mocking up a pop-up window
      7m 8s
    4. Exporting an HTML prototype
      5m 23s
  7. 40m 9s
    1. Understanding AIR
      49s
    2. Examining the structure
      5m 55s
    3. Adding rollovers
      3m 40s
    4. Adding events
      2m 49s
    5. Adding interactivity for realism
      7m 35s
    6. Adding a new state with pages
      5m 52s
    7. Troubleshooting
      5m 40s
    8. Creating the AIR prototype
      7m 49s
  8. 15m 3s
    1. Exporting MXML
      6m 42s
    2. Using Flex skins
      5m 10s
    3. Exporting FXG
      3m 11s
  9. 10m 53s
    1. Embedding an iframe into a Fireworks HTML prototype
      6m 22s
    2. Embedding an SWF file into a Fireworks HTML prototype
      4m 31s
  10. 19s
    1. Goodbye
      19s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Fireworks CS4: Rapid Prototyping
4h 17m Intermediate Aug 21, 2009

Viewers: in countries Watching now:

In Fireworks CS4: Rapid Prototyping, designer Jim Babbage deconstructs real-world examples that show the interoperability between Fireworks and other Adobe applications. Jim lays out the schedule for good prototyping, from wireframing to storyboarding to creating multi-page mockups for design feedback. Along the way, he covers advanced imaging topics, such as adding interactivity for a realistic mockup and exporting a Flex mockup as an FXG file. Exercise files accompany the course.

Topics include:
  • Using screen-sharing applications for review and feedback on prototypes
  • Emulating a Spry accordion panel with the Grid auto shape
  • Storyboarding wireframes to make them more realistic
  • Adding navigation and design variations to elicit comments
  • Building multi-page mockups and adding interactivity
  • Inserting rollover states in prototypes
  • Using Flex skins in final mockup sets
Subject:
Web
Software:
Fireworks
Author:
Jim Babbage

Importing graphics into a first storyboard

In the last movie, we downloaded the color theme using the Kuler panel in Fireworks and converted them into a Custom Swatch panel. Now, in this movie, we're going to start putting the elements together. The client has been kind enough to supply us with several photos as well as the vector version of their logo and I've prepared a quick demo file to show you the progression, in creating the first storyboard. Let's have a quick look at that and then we get on with the real construction. So on our screen here, we've got our first part of the demo which is just an empty blank page with the chocolate brown color as the background color and then as we move through the progression in this, you see it partially built with that background added in behind our products.

Some text added in, the logo, our navigation starting to take place. In our full navigation, we can see here representation of both the regular tab and also the tab that might appear when the mouse moves over the buttons and lastly a full blown layout complete with footer information as well. So that's what we're aiming for, for this movie. So I'm just going to close this file down and we're going to create a new file or you can actually open up the storyboard_start.png file. Either one is fine. But we'll build something right from scratch here. So we're going to go to New Fireworks Document and we're going to set up a value here of 960 for the Width and 600 for the Height.

Click OK and I'm going to zoom out just a little bit, so we can see the whole document area. First things first, let's set the Canvas color. So I'm just going to go over to my Properties Inspector, click on the Color selector and then move over to my Swatches panel and grab that chocolate brown. There we go. Now there's a couple of other things I want to put into place here before I get much further along. First of all, I want to double check, and make sure my grids are set up the way I want and so on. So I want to go into my Edit > Preferences and if you're on the Mac that's the Fireworks Preferences and let's see here, Guides and Grids.

And we currently set at 36x36, which is the default setting. So we're going to change that to 10x10. I'll just click OK. And I'm going to bring up my Rulers. It's always nice to have those up, just in case you need them, to see where distances are and you can also drag in guides that way if necessary. And we'll check the View menu here. My tooltips are showing up, my Smart Guides are showing up and snapping and my Grid is not yet showing, but we'll deal with that shortly. Now, before we actually get into adding assets into this design, much like we did with the wire frame.

We want to create some structure to the document. So we're going to look over in the Layers panel here and we're going to make some additions. First of all, we're going to name the top layer, the empty layer at the moment, header. And I'm going to create a sub- layer inside of that particular layer. I'm going to call the sub-layer, nav for navigation and I'm going to add in some additional layers. So I'm going to go back to my top layer, click on my New Layer icon and I'm going to add in three more layers. All right, one of these is going to be background.

So I'm just going to call this bkg. Other one is going to be footer and last one is going to be content. Okay, I'm just going to restructure things a little bit here. So I have got my header at the top where it belongs. There we go. So, now I have got my basic structure as well. Now, we're going to add in some elements for the background itself. So before I do that, one of the things, I would like to try to remember to do is to lock all my other layers, which basically means I won't end up putting stuff in the wrong place by accident. So, I've locked my header, my content, my footer layers.

So the only layer I can really work with is the background layer. I'm going to bring in my Grids, and I'm also going to Snap to Grid as well. There we go. So the first thing I want to do is create the background color. And I'm going to use a vector for this because I can easily change the color anytime I want, all I need is a rectangle. So I am going to go and click on my Rectangle tool and just draw any old shape, doesn't really matter because I can adjust all that stuff inside the Property Inspector. So what I'm going to do is set this up to be from the Properties Inspector, 900 pixels Wide by 390 High and that's going to start off at the left-hand side, so 0 point and as far as the distance from the top, it's going to be 115 pixels.

Of course, I want to change the color as well, so just like before I can choose the color well, and pick from the Color swatches here, but I want to work with my Custom swatches. So I'll go ahead and go over to my Swatches panel and fill in the background. Now, we're going to add a decorative element into the background. We want it to be something that's going to be a bit visually interesting, but now so powerful that it's going sort of compete with everything else and I have got just the thing. So we're going to go into our File menu and choose Import and I have got a file here called flowers and this is actually a Photoshop file.

So I'll see what happens when we import this into the document. Right away, we get our Photoshop File Import Options dialog box coming up. And from here we can right off the bat change dimensions, change Resolution. We are dealing with a bitmap image here, so I don't really recommend changing your dimensions, as you can end up with a poor quality image. We can also check out different layer comps if there are any in the file and we can also preview it. So we can see what we're working with and you can see that subtle flower design up there. And then we've got options for how the file is going to be imported in terms of basically maintaining the look of the file, compared to the original Photoshop document.

You have got four different choices here. Maintain Layer Editability over Appearance, Maintain Photoshop Layer Appearance. You can use Custom Settings from your Preferences files or you can flatten the Photoshop file into a Single Image. We are just going to go ahead with the default option, Maintain Layer Editability over Appearance because we are just dealing with bitmaps. There is no special effects with this, so we shouldn't have any problem bringing this in. Once I commit to that, I move my cursor into the document area and you'll see that I get my little inverted L, which is my Import symbol. So I'm just going to click once to import the file at its original size, there we go and let's position this as well.

Set it to an X value of 0. So it's going off in the left-hand side and our height is going to be about 175. So that's our positioning for our flower elements. All right, now, that's the basic elements we need for the background. We've got our background color, we have got our flowers. So we're going to lock this background layer up, and we're going to move into our content layer, there we go, unlock that one. Now, here is where we're going to start putting in some elements that are specific to the page. I'm going to start off with again another graphic. Sort of a product shot of one of the products for Bliss No. 5.

and again we're going to import this. So File > Import and I've got a file here called caramel and that's the one I want to work with here. I'm going to open that up and again I'm just going to click once and it will insert it at its original size, which is just fine. And we're going to position this one at about 500 pixels from the left and about 240 from the top. So it's sitting nicely inside the flowers. Now, we're going to add a couple of more elements in here and these are going to mostly be text elements. So we're going to put in a tagline and we're going to choose our Text tool and I want to set some specific attributes here for this first.

So I'm going to go down to my Properties Inspector and I'm going to change from Verdana, down to Time New Roman, there we go. I'm going to change it from a Regular font, to an Italic font and my Color and Size, we'll set this to about 20 point and the Color is going to be that chocolate brown that we got working in the background. I'm just going to type in here, first name in quality chocolate. Now, you might have noticed that my text is kind of swooping out of the canvas area and that's because I forgot to change my alignment.

So as I start typing it, it always starts type from the center out. So I'm just going to switch that alignment over to the left before I forget and it's not a big deal in terms of repositioning this element. All I have got to do, grab the Pointer tool and we'll set this up at about 20 pixels from the left and about 120 down. So we're actually pretty close there, there we go. And we're probably going to do a bit more work with that little tagline later on. But for now it's good. I'm going to zoom in a little bit here and double check things and yup, I have made a spelling error. So I'm going to go back into my text and just fix that up.

Okay, so we've got a tagline in here, we have got some graphic elements. Want a bit more text to go in here to sort of act as filler text for the time being, for this original storyboard. So we've got two elements I want to put in here, kind of a header and sub-header combination as well as some body text. So we'll start off with the header and sub-header information. So I'm going to grab my Type tool again and in this case here, I'm going to go with the Times New Roman style. But I'm not going to be changing my sizing a bit. So I'm going to start off with the actual company name. So I want that to be little understated, because we're going to have a logo coming in and the name is pretty much all over the place.

So we're going to knock this down from 20 point, down to about 13 and we are going to change the color to white, so that it stands out really nice against the background, and I'm just going to start typing. The company name Bliss No. 5 and I think I'll also select that text and make it just Regular, so it stands out just on its own as such. So there's my first little bit of text and I'm just going to just press the Enter key, we're going to add in our second line.

Now, the nice thing about working with text inside of Fireworks is you can change the font sizes and so on, even the font families within the same text block. So we're just going to keep this as one group for the time being. So we'll leave it all in one area. And what we're going to put in here is A new dimension in good taste and I'm going to zoom in. There we go, I'll just make sure everything is looking the way we want. A new dimension in good taste. Okay, so I've got that typed in, I'm just going to go ahead and select it and play around with its properties a bit.

I want this to be a lot larger. So I'm going to switch this out to about 25 point, there we go, and I think I'll make this one, Italics, there we go, and as far as positioning is concerned, let's set this whole thing to about 110 pixels in, in the left and about 340 pixels from the top. There we go and I'll just zoom out again so we can see how this is looking. Now, sometimes you'll find when you zoom out, the grid becomes a little bit of visual distractions.

So anytime you want, just go and go to the View menu and go to Grids, and hide the grids. You can see what you're actually working with. We get a sense there, the overall look. Now, we got to add in our one little paragraph of text and that's just going to fall down beneath our little sub-header here. I'll zoom in a bit, so I can see things a little bit better and I'm going to go to my Commands menu and down here in the Text menu, we have actually got, quick little command for adding in some Lorem ipsum text. Just a single paragraph at a time. But it's kind of handy, because it just allows you to drop in some placement text anytime you want.

So, I'm just going to choose Lorem ipsum and it will automatically drop that paragraph of text in, based on the last bit of text that was typed. So in this case here, we have got the Italic, Times New Roman at 25 point, which is a bit on the big side. So we are going to make some changes to this. I have already got the text block selected using the Pointer tool. So I'm just going to go down to my Properties Inspector, change it to Regular and we'll change the actual text itself to a lot smaller. We're going to go down to about 12 point here. There we go and I think also what I'm going to do with this-- There is my smart guides coming in, help me wind things up.

I'm going to change the font to make it little bit more readable. We're going to change it from Times New Roman and I'm just going to press the V key with the font list open. That will bring me down to my first font with a V, which is Verdana, which is exactly what I wanted. And last little bit here is let's make sure that this text isn't overlapping or underlapping our product shot. So I'm going to grab one of the control points and just resize that text box, I think along that range there. Now, just a markup here, so I'm not too worried about what this text actually says and it's actually spilling out of my content area.

So I'm just going to double-click inside the text block, I'm going to grab whatever is overlapping and just delete it. So, now I've got just a paragraph of text sitting in there, nice and neat. So that's our elements for our overall content area and I'll zoom back out again, so we can see how things look and that's not bad. I think what I might do is just grab my two text areas and just holding the Shift key down, just move them up a little bit higher. Just to get little space from the bottom. There we go. Okay, so that bit is done.

We're going to lock our layer for our content, and take a look over here, we notice that we've run into, Fireworks is generating an extra layer for us, very helpful. But not what we wanted. So we're going to move the Lorem ipsum text and that little heading, back into my content area. The easiest way to do this rather than drag and drop or cut and paste is just to select the little radio button over on the right-hand side of the layer and drag it down to the layer that you want that content to be in. When you let go over the mouse, everything is in the right place and layer number 1, which we don't need, we are going to delete. There we go.

So there is my 3 bits of text and I'm just going to lock that up and collapse it. Our next bit is to work on the header layer. So let's unlock that. We get a sub-layer in here to called nav. So we're going to be working with two different areas. So now first thing I want to do is bring in my logo. So I'm going to turn on my grids again, there we go and I'm going to import my logo. So File > Import and there we have choco_logo. Notice it's an Illustrator file. Now, I've been promised by the designer, this is an all vector based file, which is great because it means I can scale it however I want, without any worry about any problems.

So let's just select that and we'll choose Open and we'll go ahead and import. Now, again because this is not a native Fireworks file or a flattened bitmap, we are getting in a dialog box coming up. In this case here it's for the Vector File Options. So you can set your Scale, and your Width and Height and so on here. You can also Group or Render elements as images that are in groups over 30 and you can set the values there if you want. We're going to leave this at its defaults, because we shouldn't have anything too, too complex here and we'll just click OK.

Up comes my Import icon again and I'm just going to click once to import at the original size of the images. And you can see here, true the designer's word, we have the logo, we also happen to have three versions of the logo. That's might be a bit of a surprise but sometimes you'll have all these things grouped in one file, be that way they are easy to manage. Now the great thing is, if we look over in the Layers panel, you'll see that all these different logos are grouped in and of themselves. So I don't necessarily need to worry about all of them. I just picked the one I want, I can delete the rest. So I'm going to click away from these guys first and then just going to go back and select them individually. So Group: 3 objects, the very top one in the list is actually the one I want.

So I'm not going to touch that one, but Group: 2 is not something I need. So I am going to trash that. And the Group: 4, 5, same idea. We will get rid of that guy and that one other group of three objects, we don't need that either. And lastly is the little brown background behind the logo, which we don't need, because our background is already that brown. So we're going to trash that as well. So that leaves me with my logo. I'm going to rename this right off the bat logo, before I forget, what is this. And I'm going to reposition it, up in here and we will put this about 10 pixels from the top and about 20 pixels in from the side.

I think I will also scale this a little bit too. Make it stand out a bit more. And again if I hide my grid and we take a look at this at 100%, you can see the logo has come in nice and sharp. The scaling hasn't really affected it at all. Okay, let's just take one look around our Layers panel again. Make sure everything is in the right place. Just scroll up a bit, and oh look at this. Our mug layer and our cannister layer from our little import of our photo here have actually been dropped into the wrong spot and that can happen because these files already have their own layer structure and as a result rather than Fireworks dumping them into another layer, they come in as their own top level layers.

So not a big, big deal, we can make some changes here. And what we're going to do is we're going to go to our content layer, we'll unlock that and we'll lock up our header just to get it secure there and inside the content layer, I'm going to add my two sub-layers that I need for this. I want to keep the mug and the canister separate from each other, just like they were there in the original file. So I am going to add two sub-layers, there we go. There is our first one and I'll add in one more. Okay, I'm going to name the first one, mug and the second one canister, and again rather than cut and paste, or drag and drop in the sense of dragging the actual objects, we are going to work with that little radio button feature again.

So I'm just going to make myself a little more working room here and go to my mug layer, and all I've got to do is literally just select the layer. Everything in the mug layer gets selected as you can see on screen and I'll just drag the radio button from one mug to the other. There we go. So now the mug elements are all inside of my sub-layer. Do the same thing with the canister. Just click on the canister layer, grab the radio button and drag that down to the new canister layer. That's nice and quick and easy and things get put exactly where you want them to go. Now, I don't need these two top level layers anymore, so I'm just going to select them and delete them from the Delete option in the Layers panel.

Now we have got things exactly the way we like. So I'm just going to collapse everything down and we'll lock everything up for the time being and we have done quite a bit here. We have added in our background elements. We've added in some photos, some text, our logo. In the next movie, we're going to concentrate on creating the navigation.

Find answers to the most frequently asked questions about Fireworks CS4: Rapid Prototyping .


Expand all | Collapse all
please wait ...
Q: I have a question about showing a vertical fly-out in my navigation menu when creating the interactivity for my layout. Could I add hotspots to menu items in my nav bar so that they would fly out in a vertical fashion when I hover over it?
A: There is a pop-up menu feature in Fireworks, but my best advice is to run in the opposite direction. These menus seem easy to use, but they are very difficult to maintain. If you're just using it for prototyping, it's fine, but don't expect to use the menus generated by FW in an actual web site.

That said, if you want to use them, add a slice or hotspot to a main menu button, then click on the behavior handle in the middle of the slice or hotspot. It looks like a little wheel. You'll see an option to Add pop-up menu in the list that appears.

However, it is better to build that kind of functionality in a true web page editor such as Dreamweaver.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Fireworks CS4: Rapid Prototyping.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.