How to Create and Encode Flash Video
How to Create a Simple Two-State Button in Fireworks
How to Add Sound to Your Page with CoffeeCup

Create a Client Mockup in Fireworks

An early step in the process of a building a website is to define the concept behind the website and how it should look to appeal to its target audience. The next step is to create a mockup of the website — or, as some web designers call it, a comp. In a nutshell, the exercise amounts to creating shapes that define the major parts of the web design.

You can easily create several versions of a mockup in Fireworks. If you used Fireworks to do your storyboarding, use that document as the basis for your client mockup. Flesh out the shapes with actual content.

If you have assets already created, you can incorporate them into the design. Add link titles to the shapes you created for the navigation menu. Then you’re ready to create alternative versions of the mockup.

To create alternative versions of your mockup in Fireworks, just follow these steps:

  1. Open the States panel.

  2. Select the first frame and then click the New/Duplicate State icon.

    Fireworks creates a carbon copy of the first state.

  3. Create a variation of the first state.

    This is the second design you present to the client. You can change how the menu is displayed, placement of objects, choice of colors, and so on.

  4. Create additional states to create different variations of the design.

  5. After creating different variations of your design, choose File→Export.

    Fireworks displays the Export dialog box.

  6. Choose the desired file format in which to save the images. Then from the Export drop-down menu, choose States to Files.

  7. Name the document and then click Save.

    After you export the states, you have multiple files with the same filename, appended by the number of the state. You can now send the individual versions to your client for consideration.

blog comments powered by Disqus
Get Images Ready for the Web with Photoshop
How to Add Images to Your Web Page in CoffeeCup
Resize Your Photos for the Web with Fireworks or Photoshop CS6
How to Upload a Video Clip to YouTube
How to Create a Navigation Menu in Fireworks