The second session on creating storyboards using Fireworks CS5.

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