Your SlideShare is downloading. ×
0
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
Fireworks session ii
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 ii

404

Published on

The second session on creating storyboards using Fireworks CS5.

The second session on creating storyboards using Fireworks CS5.

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

  • Be the first to like this

No Downloads
Views
Total Views
404
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
54
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 - II M E T A L S C H O O L
    • 2. master page: whole name page as ‘kastasite’ if not done already. right-click it and set it as master page. this makes it a common page visible underneath every page created in this document M E T A L S C H O O L
    • 3. creating the ‘about us’ page M E T A L S C H O O L
    • 4. new page: set up create new page by clicking on the new page icon (shown by the red arrow above) in pages panel. double-click and re-name as ‘about’ M E T A L S C H O O L
    • 5. new page: set up in layers panel create 2 new layers: main content and sidebar M E T A L S C H O O L
    • 6. new page: image select main content in layers panel. choose import... in the file menu M E T A L S C H O O L
    • 7. new page: image import alternativerocksgraphic.png M E T A L S C H O O L
    • 8. new page: image click the inverted L-cursor in the main content area to drop the image on page. place it at the x and y co-ordinates shown above M E T A L S C H O O L
    • 9. new page: text ensure main content in layers panel is selected. let’s import some placeholder text by going to the commands menu as shown M E T A L S C H O O L
    • 10. new page: text use the x, y co-ordinates as shown. set font, font-size and line-height too M E T A L S C H O O L
    • 11. new page: text use text tool set to properties above. type ‘heading 1 will go here’ as shown M E T A L S C H O O L
    • 12. new page: line select line tool. while holding shift key draw a horizontal line as shown. adjust its properties as shown. color: #999999. then click on ‘edit stroke’ button M E T A L S C H O O L
    • 13. new page: line choose the ‘single dash’ option and change on value to 2. click ok M E T A L S C H O O L
    • 14. new page: line a sort of dotted line in grey is now under the heading M E T A L S C H O O L
    • 15. new page: text use text tool and place new line between the grey line and first para. type ‘heading 2 if any’ in all caps. set values as above. color: #001818 M E T A L S C H O O L
    • 16. new page: text select heading 2 and para by shift-clicking. copy. paste on a fresh line below to create more copy matter. cut out a couple of lines of M E T A L S C H O O L copy to make the second para a little shorter than the first
    • 17. new page: text select heading 1 and both heading 2’s and all the lorem ipsum text by shift- clicking on each. copy (cmd-c) M E T A L S C H O O L
    • 18. new page: text paste below in the empty space to create more copy for the page M E T A L S C H O O L
    • 19. new page: image ensure you are still in main content in layers panel. click import... in file menu and get 1atsoundclick.jpg from your images folder M E T A L S C H O O L
    • 20. new page: image place the image and adjust co-ordinates as shown M E T A L S C H O O L
    • 21. new page: image re-name ‘bitmap’ to ‘chart’ in layers panel M E T A L S C H O O L
    • 22. new page: pen tool select the pen tool to create a vector path. go around the copy block that surrounds the chart graphic. before using the pen tool, it’s better to cut the last para (cmd-x) and paste inside of the first para to make this para longer M E T A L S C H O O L
    • 23. new page: pen tool this should be your finished vector path M E T A L S C H O O L
    • 24. new page: pen tool to make the next step easier to execute, make chart graphic invisible by clicking on the eye symbol in layers panel M E T A L S C H O O L
    • 25. new page: pen tool now select both the vector path and the para text by shift-clicking M E T A L S C H O O L
    • 26. new page: pen tool M E T A L in text menu, choose the ‘attach in path’ option S C H O O L
    • 27. new page: pen tool the graphic is ‘floated’ left and the copy wraps around it M E T A L S C H O O L
    • 28. new page: pen tool check in safari M E T A L S C H O O L
    • 29. new page: sidebar ensure sidebar is selected in layers panel. copy heading 1 and paste within sidebar using text tool. properties as above M E T A L S C H O O L
    • 30. new page: sidebar dark green is #003333; dark brown #330000; dark grey #666666 M E T A L S C H O O L
    • 31. new page: sidebar M E T A L dark green is #003333; dark brown #330000; dark grey #666666 S C H O O L
    • 32. new page: sidebar use text tool to type ‘1.’ followed by lorem ipsum (single line of text). option drag to create about 10 or 11 copies one below the other. shorten text on some lines to create jagged right edge for whole list. with all lines selected press cmd-g to M E T A L create group S C H O O L
    • 33. new page: sidebar type in ‘launch pics | reviews | buy cd’ as a fresh line using text tool. change properties as above M E T A L S C H O O L
    • 34. new page: sidebar select all of the following by shift-clicking: cd graphic, green line, ‘hover’, grey text under it, ‘track list’, all songs (as a group) and ‘launch pics...’ line. copy M E T A L with cmd-c and paste on fresh line below to replicate. replace hover graphic S C H O O L with eleven complaints graphic by importing as before
    • 35. new page: sidebar M E T A L check in safari S C H O O L
    • 36. new page: sidebar M E T A L the bottom half of the page in safari S C H O O L
    • 37. new page: sidebar clean up the layers panel by naming sub-layers correctly M E T A L S C H O O L
    • 38. new page: gallery create a new page and re-name it ‘gallery’. M E T A L S C H O O L
    • 39. open file kastasiteforclass.png. it has the two site file: additional pages we earlier created in dreamweaver. all pages click on the master page. now go to file menu and preview all pages in browser M E T A L S C H O O L
    • 40. 2 things to notice • the nav bar is in place with buttons created site file: within fireworks - not only that, the nav bar also all pages works! complete with hover state M E T A L S C H O O L
    • 41. 2 things to notice • the nav bar is in place with buttons created site file: within fireworks - not only that, the nav bar also all pages works! complete with hover state • the contact page has a form in place. although the form doesn’t work, it still has visual elements in place including the send button M E T A L S C H O O L
    • 42. site file: all pages M E T A L go to master page and switch off the view for sidebar, bitmap (inside of header S C H O O L layer) and main content by clicking on the eye symbols
    • 43. site file: all pages M E T A L now click on the aboutus page in the pages panel. the above visual in the S C H O O L canvas may suggest other color scheme ideas which you are free to explore
    • 44. open file kastasiteforclass2.png. see all the pages in site file: all pages safari - an example that scratches the surface of what fireworks can do... M E T A L S C H O O L
    • 45. color themes from kuler M E T A L S C H O O L
    • 46. site file: all pages go to kuler.adobe.com. there are any number of themes there that are constantly added on to. M E T A L S C H O O L
    • 47. site file: all pages click on a theme strip to see it in a magnified form as a header. click on the header strip to see it as even bigger bands of color. sign in as user M E T A L S C H O O L
    • 48. site file: all pages you can access kuler features without leaving fireworks. first, in the swatches panel, use the clear swatches command to delete the default color swatches M E T A L S C H O O L
    • 49. site file: all pages go to window > extensions > kuler M E T A L S C H O O L
    • 50. site file: all pages the kuler panel opens with the latest color strips on display. before we change the look and feel of our kastasite save it as kastasite3.png right away M E T A L S C H O O L
    • 51. site file: all pages select ‘street basketball’ - this is the theme we will apply. click on the arrow and choose the ‘add to swatches panel’ option M E T A L S C H O O L
    • 52. site file: all pages the chosen palette is added to your swatches panel M E T A L S C H O O L
    • 53. site file: all pages select ‘master page’ in pages panel. in layers panel, make invisible the following: navbar, sidebar, maincontent and new header M E T A L S C H O O L
    • 54. site file: all pages inside the body layer make invisible the ‘line’ sub-layer to get rid of the green vertical rule. now the main screen should display only the body background and nothing else M E T A L S C H O O L
    • 55. site file: all pages with the page selected use the gradient tool in the properties box. select the left color marker and use the automatic eye-dropper to select the right-most color in the swatches panel M E T A L S C H O O L
    • 56. site file: all pages now select the right color marker and use the automatic eye-dropper to select the second right-most color in the swatches panel M E T A L S C H O O L
    • 57. site file: all pages use two more gradient stops with colors of #484a3f and #595344 M E T A L S C H O O L
    • 58. site file: all pages the body gradient and the plumb line M E T A L S C H O O L
    • 59. site file: all pages make visible the sidebar and select it. use the gradient tool with the same M E T A L left and right values as for the main body before S C H O O L
    • 60. site file: all pages similarly make visible the main content region and select it. use the gradient tool to make both markers the same color (extreme right in the swatches panel) M E T A L S C H O O L
    • 61. site file: all pages the finished gradients on main page M E T A L S C H O O L
    • 62. site file: all pages click on the aboutus page in pages panel M E T A L S C H O O L
    • 63. site file: all pages color the headlines as shown with the chosen ones from the swatches panel. also the line above ‘hover’ should be the same bright orange (similar treatment for ‘eleven complaints’ and the line above it) M E T A L S C H O O L
    • 64. site file: all pages select headlines in the main content region ‘who is kastadyne’, ‘the debut album...’ and ‘band members’ one after the other and make them bright orange M E T A L S C H O O L
    • 65. site file: all pages select all copy blocks in main content and sidebar regions one after the other and make them blue-grey (leftmost color) in the swatches panel M E T A L S C H O O L
    • 66. site file: all pages final color scheme for the aboutus page. this is a totally different feel M E T A L within minutes of tinkering with the kuler palette S C H O O L
    • 67. open file kastasiteforclass3.png. see all the pages in site file: all pages safari - the header has been changed to suit the color theme. so has the nav bar. a very workable scheme M E T A L S C H O O L
    • 68. check out headers and footers of fatcow.com site file: all pages cdbaby.com slideshare.com mailchimp.com M E T A L S C H O O L
    • 69. M E T A L S C H O O L

    ×