Your SlideShare is downloading. ×
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Fireworks session I
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fireworks session I

573

Published on

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

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
573
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
































































































  • Transcript

    • 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

    ×