Designing a webpage using Adobe Fireworks CS3

The mock ups are the prototype models for a web page to be designed. This can be very useful in order to verify whether the mock up satisfies the client’s needs and if the changes are required, then it will be implemented in the original web page design. The webpage mock ups are designed by different type of software and the Firework from the Adobe Company provides many facilities to design the mock ups with ease.

Some of the features included in the Adobe Fireworks CS3 are like pages, improvised symbols, file interoperability, slide show facility etc. The pages are similar to the webpages where elements can be added and master page can be assigned or specification of elements for a particular page can be done. Common library has a category of pre-created symbols introduced newly. Also Symbols are improvised and resizing, breaking into small vector pieces are improved. Flash slide shows are provided for perfect transitions. Photoshop files, Flex elements can be accessed in Fireworks and files can be saved in the PSD format too.

Fireworks User Interface

Now let us see how to design a mockup of a web page in fireworks CS3.

  1. Open Fireworks software, create a new file.
  2. provide the necessary required resolution details and background choices.
  3. Use the tools and properties toolbars to add tools and edit properties respectively.
  4. Many options are like shapes, paint, text tool, select, eraser etc., are provided in toolbox, you can use them to the limit fo your creativity.
  5. Properties like color adjustment, size, weight, text alignment are provided in properties box.
  6. Images can be imported from external sources of any size to the design.

Fireworks enable users to build complex multi-page designs within a single PNG file and also without use of frames. Master pages can be designated which contains common elements that are not changed from page to page. When all the elements are added and the design is completed, then we can save the file in the PNG form. The mockups design now can be used for analyzing the requirements of the client for any issues regarding the web page.


The tricks daddy website that provides valuable technical information on internet tips and tricks, hacking tips, blogging, Black Hat Hackers, webhosting, social networking etc.

You can leave a response, or trackback from your own site.

Leave a Reply