storyboarding with fireworks




M E T A L
S C H   O   O   L
set-up:
   new document




                    create new document in fireworks with the above dimensions

M E T A L
S C H...
set-up:
   new document




                    your canvas is ready to use. let’s clean up the panels on the right

M E T...
set-up:
   new document




                    remove individual panels from the cluster by dragging them away by their
 ...
set-up:
   new document




                    ...as shown above. ensure your layers panel is separated from the pages an...
set-up:
   new document




                    save your screen config by clicking on ‘save current’ in the menu above


M...
set-up:
   new document




                    give it your name and save




M E T A L
S C H   O   O   L
set-up:
   new document




                    in preferences, set up guides and grids as shown above. change the
       ...
set-up:
   new document




                    the canvas now displays the grid. you can hide the grid from view by using...
setting up master page




M E T A L
S C H   O   O   L
master page:
   body




                    use the rectangle tool in the vector toolset on the left and draw a rectangle...
master page:
   body


                    in the properties panel fill in the dimensions of w and h




M E T A L
S C H   ...
master page:
   body




                    choose the gradient option instead of solid



M E T A L
S C H   O   O   L
master page:
   body




                    click on the paint bucket icon to shape the gradient

M E T A L
S C H   O   O...
master page:
   body




                    click on the left color icon under the gradient bar and make it
             ...
master page:
   body




                    click below the gradient bar to get a third color icon. ensure
              ...
master page:
   body




                    click on the leftmost color icon. in the swatches panel click on the color wh...
master page:
   body




                    now create a fourth color icon closer to the right icon (see above).
        ...
master page:
   body




                    in similar fashion as before, increase the contrast in the color wheel by dra...
master page:
   body




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




                    grab the rectangle tool to draw another rectangle of ‘wrapper’ as shown ab...
master page:
   wrapper


                    use the above dimensions for the wrapper




M E T A L
S C H   O   O   L
master page:
   wrapper




                    use the gradient tool as before for the wrapper region. set the colors to
...
master page:     set up the layers panel as above by creating
   layers           sub-layers under ‘whole page’




M E T ...
master page:
   header




                    click on header in layers panel. use the import... command in
             ...
master page:
   header




                    use the properties panel to nudge it in place on top of page


M E T A L
S ...
master page:
   sidebar




                    click on sidebar in layers panel. create sidebar using rectangle tool
M E ...
master page:
   sidebar




                    use the properties panel to conform dimensions and placement




M E T A L...
master page:
   sidebar




                    use the linear gradient tool as before using the colors of
               ...
master page:
   sidebar




                    the final position of the gradient line in the sidebar

M E T A L
S C H   O...
master page:
   sidebar




                    save file inside of your metalschool folder. this is a special .png file (wi...
master page:
   main content




                    click on main content in layers panel. use rectangle tool to draw out...
master page:
   main content




                    use the gradient tool with 3 icons - #E2E2E2, #F0F0F0 and #FFFFFF

M ...
master page:
   main content




                    the final position of the gradient line in the main content area

M E ...
master page:
   main content




                    name this sub-layer as bg (within main content)




M E T A L
S C H  ...
master page:
   main content




                    preview the work in safari

M E T A L
S C H   O   O   L
master page:
   main content




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




                    there’s hardly any html... this isn’t genuine code. it’s just a catch...
master page:
   footer



                    click on footer in layers panel. draw out the footer region with rectangle t...
master page:
   footer




                    use the dimensions as before




M E T A L
S C H   O   O   L
master page:
   footer




                    use the gradient tool using the colors #000000 and #003333


M E T A L
S C ...
master page:
   footer




                    the final position of the gradient line in the footer



M E T A L
S C H   O...
master page:
   footer




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




                    click on navbar in layers panel. use the rectangle tool to draw the final re...
master page:
   navbar




                    let the gradient of black to teal used for the footer remain for the navbar...
master page:
   footer




                    select footer in layers panel. select text tool in the tools panel on the l...
master page:
   footer




                    position text with 10px left margin inside the footer




M E T A L
S C H  ...
M E T A L
S C H   O   O   L
Upcoming SlideShare
Loading in...5
×

Fireworks session I

587

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
587
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
































































































  • Fireworks session I

    1. 1. storyboarding with fireworks M E T A L S C H O O L
    2. 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. 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. 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. 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. 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. 7. set-up: new document give it your name and save M E T A L S C H O O L
    8. 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. 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. 10. setting up master page M E T A L S C H O O L
    11. 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. 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. 13. master page: body choose the gradient option instead of solid M E T A L S C H O O L
    14. 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. 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. 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. 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. 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. 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. 20. master page: body your gradient should look as shown above M E T A L S C H O O L
    21. 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. 22. master page: wrapper use the above dimensions for the wrapper M E T A L S C H O O L
    23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. master page: main content preview the work in safari M E T A L S C H O O L
    37. 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. 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. 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. 40. master page: footer use the dimensions as before M E T A L S C H O O L
    41. 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. 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. 43. master page: footer the whole page so far M E T A L S C H O O L
    44. 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. 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. 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. 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. 48. M E T A L S C H O O L
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×