An introduction to storyboarding in Fireworks CS5 for later use in Dreamweaver

1. storyboarding with fireworks
M E T A L
S C H O O L

2. set-up:
new document
create new document in fireworks with the above dimensions
M E T A L
S C H O O L

3. set-up:
new document
your canvas is ready to use. let’s clean up the panels on the right
M E T A L
S C H O O L

4. set-up:
new document
remove individual panels from the cluster by dragging them away by their
name tags and then closing them. do this with all except the following...
M E T A L
S C H O O L

5. set-up:
new document
...as shown above. ensure your layers panel is separated from the pages and
states panel
M E T A L
S C H O O L

6. set-up:
new document
save your screen config by clicking on ‘save current’ in the menu above
M E T A L
S C H O O L

7. set-up:
new document
give it your name and save
M E T A L
S C H O O L

8. set-up:
new document
in preferences, set up guides and grids as shown above. change the
default ‘36x36px’ grid settings to ‘10x10px’
M E T A L
S C H O O L

9. set-up:
new document
the canvas now displays the grid. you can hide the grid from view by using the
toggle of cmd+opt g. it’s a useful shortcut you will use often
M E T A L
S C H O O L

10. setting up master page
M E T A L
S C H O O L

11. master page:
body
use the rectangle tool in the vector toolset on the left and draw a rectangle
M E T A L that covers the whole canvas. a rough approximation will do; we can do the
S C H O O L exact dimensions through the properties panel below

12. master page:
body
in the properties panel fill in the dimensions of w and h
M E T A L
S C H O O L

13. master page:
body
choose the gradient option instead of solid
M E T A L
S C H O O L

14. master page:
body
click on the paint bucket icon to shape the gradient
M E T A L
S C H O O L

15. master page:
body
click on the left color icon under the gradient bar and make it
#300 (dark brown); click on the right color icon and make it
#033 (teal green)
M E T A L
S C H O O L

16. master page:
body
click below the gradient bar to get a third color icon. ensure
this color icon too represents the color #300
M E T A L
S C H O O L

17. master page:
body
click on the leftmost color icon. in the swatches panel click on the color wheel
in the top right corner. pull down the slider a little to make the same color
darker (see the before-after slider positions above). click ok
M E T A L
S C H O O L

18. master page:
body
now create a fourth color icon closer to the right icon (see above).
ensure this also has the color of #033. double-click on this new icon
M E T A L
S C H O O L

19. master page:
body
in similar fashion as before, increase the contrast in the color wheel by dragging
the slider down a few notches
M E T A L
S C H O O L

20. master page:
body
your gradient should look as shown above
M E T A L
S C H O O L

21. master page:
wrapper
grab the rectangle tool to draw another rectangle of ‘wrapper’ as shown above
M E T A L
S C H O O L

22. master page:
wrapper
use the above dimensions for the wrapper
M E T A L
S C H O O L

23. master page:
wrapper
use the gradient tool as before for the wrapper region. set the colors to
#DCDCDC and #FFFFFF. set the gradient line to the position shown above
M E T A L
S C H O O L

24. master page: set up the layers panel as above by creating
layers sub-layers under ‘whole page’
M E T A L
S C H O O L

25. master page:
header
click on header in layers panel. use the import... command in
the file menu and import the image file header1.png
M E T A L
S C H O O L

26. master page:
header
use the properties panel to nudge it in place on top of page
M E T A L
S C H O O L

27. master page:
sidebar
click on sidebar in layers panel. create sidebar using rectangle tool
M E T A L
S C H O O L

28. master page:
sidebar
use the properties panel to conform dimensions and placement
M E T A L
S C H O O L

29. master page:
sidebar
use the linear gradient tool as before using the colors of
#97CE7D and #D9E1D6
M E T A L
S C H O O L

30. master page:
sidebar
the final position of the gradient line in the sidebar
M E T A L
S C H O O L

31. master page:
sidebar
save file inside of your metalschool folder. this is a special .png file (with
many layers)
M E T A L
S C H O O L

32. master page:
main content
click on main content in layers panel. use rectangle tool to draw out the main
M E T A L content region with the dimensions shown alongside
S C H O O L

33. master page:
main content
use the gradient tool with 3 icons - #E2E2E2, #F0F0F0 and #FFFFFF
M E T A L
S C H O O L

34. master page:
main content
the final position of the gradient line in the main content area
M E T A L
S C H O O L

35. master page:
main content
name this sub-layer as bg (within main content)
M E T A L
S C H O O L

36. master page:
main content
preview the work in safari
M E T A L
S C H O O L

37. master page:
main content
view the source code to see the html behind the page...
M E T A L
S C H O O L

38. master page:
main content
there’s hardly any html... this isn’t genuine code. it’s just a catch-all .png file that
the browser is reproducing at one go
M E T A L
S C H O O L

39. master page:
footer
click on footer in layers panel. draw out the footer region with rectangle tool
M E T A L
S C H O O L

40. master page:
footer
use the dimensions as before
M E T A L
S C H O O L

41. master page:
footer
use the gradient tool using the colors #000000 and #003333
M E T A L
S C H O O L

42. master page:
footer
the final position of the gradient line in the footer
M E T A L
S C H O O L

43. master page:
footer
the whole page so far
M E T A L
S C H O O L

44. master page:
navbar
click on navbar in layers panel. use the rectangle tool to draw the final region -
the navbar area in the space between the header and the main content
M E T A L
S C H O O L

45. master page:
navbar
let the gradient of black to teal used for the footer remain for the navbar
(this is going to be replaced by the spry widget in dreamweaver in any case)
M E T A L
S C H O O L

46. master page:
footer
select footer in layers panel. select text tool in the tools panel on the left. click in
the footer area and type the copyright message as shown above
M E T A L
S C H O O L

47. master page:
footer
position text with 10px left margin inside the footer
M E T A L
S C H O O L

48. M E T A L
S C H O O L