Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Bulbs _ Blooms

VIEWS: 15 PAGES: 52

									                                             Bulbs & Blooms 
                                         Prototype Instructions 




                                                                                             

 
Copying Project Files 
    1. Navigate to the Examples > Fireworks.  Copy the bulbs_and_blooms folder and place it in your fireworks folder. 

 
Setting up the Document 
    2. Click File, New from Template. 




                                   
    3. Select Grid Systems, Grid 8. 




                                                                                 
                                                                 
    A grid is a technique that comes from print design but easily be applied to Web design as well. In its strictest 
    form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines 
    and overall aligned on horizontal and vertical lines. Using a grid makes it easier to line objects up on a page. 
4. Open the Layers Panel. 
    There are four layers in the document. They are the Grid System layers. The Web Layer is for prototype hotspots 
    and slices. You will use it later. The Grid System layers are locked. The lock icon indicates this. Since we need to 
    draw our bouquet logo first, we should hide the Grid System so that we can better see the canvas. You can toggle 
    a layers visibility by clicking on the eye icons. 
5. Click the eye icon next to the Leading, Side bars and Grids layers. 




                                                             
    You may still see some teal lines on the canvas. These are Guides. We are going to hide them for right now as 
    well. 
6. If your guides are showing, as shown in the image below, click on View, hover over Guides and click Show 
    Guides.  This will remove the guides from your canvas. 




                                               
    Now you should have a blank canvas to work with. 
Making a Layer 
    1. In the Layers Panel, click on the New/Duplicate Layer icon.  




                                 
        You must have a blank layer before you can begin working. 
Saving the Document 
        1. Go to File and choose Save As. 
        2. Navigate to the fireworks folder in your personal drive space. 
        3. Open the bulbs_and_blooms folder, and then open the _planning folder. 
        4. Type b_and_b for the File name and click Save. 
 

Creating the Flowers 
Drawing a Flower 
    1. In the Toolbar, click and hold over the Rectangle tool to open the drop down. 
    2. Select the Star tool. 




                         
        The star tool is an excellent way to quickly create a flower shape. 
    3. Click and drag on the canvas to draw a star. 




                                        
When you look at the Star shape, you should notice that there are five yellow diamonds. Each diamond allows 
you to edit a part of that shape. 
 




                                                               
 
 The Points diamond indicates the number of points that are in the shape. The Exterior and Interior Radius 
diamonds indicate the radius of the point from the center. The Exterior and Interior Roundness diamonds indicate 
the roundness of the points in the shape. By clicking and dragging the yellow diamonds, you can adjust their 
settings and create flower‐like shapes. 




                                                                                                  
Once you have a shape you like you may need to edit it further in order to make your flower petals more realistic. 
To do this, you should get the Subselection tool and select your star in order to see all of the individual points.  




                                                  
Then select the Pen tool and click and drag at each corner point to create a curved petal. 
                                                           
       Fireworks will warn you about editing sub‐elements of an Auto Shape. Click on the Don’t show again checkbox 
       and then OK. 




                                                       
       Keep adjusting your petals until you have a flower shape that you are happy with. 




                                                   
Coloring the Flower 
   4. Go to the Styles Panel. 
       Remember, the Styles Panel allows you to save the settings for an object's appearance and then apply them 
       quickly to other objects. You can also use preset styles. 
   5.  Click on the Drop Down box to select a family of styles.  
                                      
   6. Select the Tool Tips Styles family and then the Tools Tips 049 style. 




                                                                                 
Drawing the Center 
       Since flowers have a center, we need to draw that. 
   7. Click and hold on the Star Shape in the Toolbar and select Ellipse Tool from the drop down. 




                                
   8. Click and drag to create a circle shape in the middle of your flower. 
                                         
9. Go to the Styles Panel and select the Tool tips 041 style for the center of the flower. 




                                                                                     
    If you need to resize your circle after you have drawn it you should select the Scale tool and then click and drag 
    one of the four corners to resize it. If you hold the Shift Key while you resize the circle, it will constrain the 
    proportions. 




                                                          
    To ensure that your circle is in the center of the flower, you should select both the circle and flower. Use the 
    Pointer tool and click and drag a rectangle over both shapes to select them. 
                                                             
    Use the Align tools on the Menu Bar to Align the Horizontal and Vertical Centers of the flower and circle. 




                                                                    
    Now that your flower is finished you should group the petals and circle. 
10. Use the Pointer tool and click and drag a rectangle over both shapes to select them. 




                                                             
11. Click the Group icon on the Menu bar. 



                                         
12. Use the Scale tool to resize the flower to a more appropriate size for the Web site. 




                                                       
Make Multiple Flowers 
   13. Select the flower. 
   14. Click on the Copy icon on the Menu Bar. 



                                      
   15. Click on the Paste icon on the Menu Bar. 



                                  
   16. Paste a few copies of the flower. 




                                                       
       Use the Align and Stacking icons on the Menu Bar to help you arrange your flowers into a bouquet. 




                                                           




                                                 
   17. Select the Pointer tool and click and drag over all of the flowers to select them. 
   18. Click the Group icon on the Menu bar. 



                                             
   19. To group elements in Fireworks, you can also use the shortcut keys to group:  Ctrl+G to Group and Ctrl+Shift+G 
       to Ungroup. 
Creating the Stems  
Draw a Stem 
   1. Select the Line Tool from the Toolbar. 




                    
   2. Click and drag to draw a line on the canvas. 
   3. Use the Properties Panel to adjust the color and size of the line. 




                                                                             
   4. Select the Pen tool from the Toolbar. 




                    
   5. Click on the center of the line to add a point to it. 




             
   6. Select the Subselection tool. 
                    
   7. Click and drag the point on the center of the line to the right. 




                
   8. Select the Pen tool again. 
   9. Click and drag the point in the center of the line down to create a curve. 




                
   10. Select the Point tool and move the stem below the left most flower. 
       Select the Scale tool and click and drag to Scale the stem if necessary. 




                        
Make Multiple Stems 
   11. Select the stem. 
   12. Click on the Copy icon on the Menu Bar. 
                                    
13. Click on the Paste icon on the Menu Bar. 



                                
14. Click the Flip Horizontal icon on the Menu Bar. 




                            




                                        
15. Move the stem to the right most flower. 
16. Copy and Paste the stem. 
17. Move the stem to inside of the previous one. 




                                        
18. Click the left most stem. 
19. Copy and Paste the stem. 
20. Move the stem inside the previous one. 
                                     
    21. Select the Line tool from the Toolbar. 
    22. Draw a straight stem in the middle. 




                                     
        Use the Stacking icons on the Menu Bar to help you arrange your stems behind the bouquet. 




                                 
    20. Use the Pointer Tool, click and drag over the stems to select them. 
    21. Click the Group icon on the Menu bar. 



                                                
 

Creating the Bow 
Drawing the Loops 
    1. Select the Ellipse tool from the Toolbar. 




                    
2. Click and drag to draw a circle on the canvas.  You can create a perfect circle by clicking the Shift key as you draw 
    the circle. 




                    
3. Select the Subselection tool from the Toolbar. 
4. Select the right most point on the circle and drag it to the right. 




                                          
5. Select the Pen tool and click on the right most point. 




                         
    This will remove the curves from both sides of the point. 
6. Copy and Paste the shape. 
7. Move it upward and to the left slightly. 




                              
8. Click and drag to select both objects. 
9. Open the Path Panel. 
10. Click on the Divide Paths icon. 




                                  
    This will punch the overlap out of the shapes and create the loop of the bow.  
11. Select the Styles Panel. 
12. Select the Tool tips 040 style. 
                                                               
   13. Group the two parts of the loop together. 
   14. Copy and Paste the loop. 
   15. Use the Flip Horizontal and Vertical buttons and place the second loop. 




                                                      
Drawing the Center 
   16. Select the Star tool from the Toolbar. 
   17. Click and drag to draw a star shape. 




                                                
   18. Adjust the points on the star to create a triangle. 




                                                  
   19. Use the Flip Vertical icon on the Menu Bar to Flip the triangle. 
                                                                              
   20. Click and drag the Roundness triangle (the one on the upper right corner) inward slightly. 




                                                                                                            
   21. Select the Scale tool and resize the triangle so it looks proportional to the loops. 




                            
   22. Move the triangle over the intersection of the two loops. 




                                                  
       Select all three items and click on Modify > Align > Center Horizontal to line up the objects. 
Drawing the Ribbon Tails 
   23. Select the Pen Tool. 
   24. Click once to start the path. 
   25. Click and drag a couple of inches below and to the left of the original point to create a curve. 




                                                      
   26. Click back on the second point to remove the curve. 
   27. Click and drag an inch above and to the right of the original point to create a small curve. 
                                           
28. Click back on the third point to remove the curve. 
29. Click and drag an inch below and to the right of the original point to create another small curve in the opposite 
    direction. 




                                               
30. Click back on the point to remove the curve. 
31. Click and drag a couple of inches above the original point to create the opposite side of the ribbon tail. 




                                       
32. Click back on the point to remove the curve. 
33. Click on the beginning point to finish the path. 




                                       
34. Open the Styles Panel and select the Tool tips 040 style. 
                                                                             
35. Select the Pointer Tool from the Toolbar. 
36. Move the ribbon tail to the appropriate location. 




                                              
37. Copy, Paste, Flip Vertical and Move the second ribbon tail into the correct location. 




                                              
38. Use the Pointer tool to click and drag and select both ribbon tails. 
39. Click the Send to Back icon on the Menu Bar. 



                                      
40. Select all parts of the bow and Group them. 



                                                  
41. Move and resize the ribbon over the bouquet. 
                                     
 

   ating the B
Crea         Background 
   ate a Full Col
Crea            lor Symbol 
    1 Select all parts of the b
    1.                        bouquet and Group them.
    2.          k the bouquet
    2 Right click                        Convert to Symbol (or click
                            t and select C                                      eyboard). 
                                                                   k F8 on the ke




                                 
    3 Name the
    3.                   quet‐100% an
             e symbol bouq          nd click OK.




                                                           
   ate an Opaqu
Crea          ue Symbol 
    4.         cale tool to re
    4 Use the Sc                         uquet to abou
                             esize the bou           ut an inch tall. 
    5.          he symbol and change the
    5 Click on th                                    he Properties Panel. 
                                       e opacity in th




                                                
   6. Right click the bouquet and select Convert to Symbol again. 
   7. Name the symbol bouquet‐bg and click OK. 
   8. Move the bouquet to the upper left corner of the canvas. 




                                               
   9. Adjust the X and Y values in the Properties Panel so that the bouquet is 5 pixels to the left of the edge and 5 
      pixels to the bottom of the edge. 




                                
        
Make the Rows of Flowers 
   10. Open the Document Panels Library. 
   11. Click and drag the bouquet‐bg symbol to the canvas to add a bouquet‐bg symbol to the background. 




                                                      
   12. Repeat step 11 six or seven times to create a column of bouquets. 
   13. Move the last bouquet the bottom of the canvas. 
                                  
14. Using the Pointer tool, click and drag all over all of the bouquets. 




                                              
15. On the Menu Bar, click the Align Left icon to ensure that all of your objects are aligned on their left edge. 




                                  
16. Click the Distribute Heights icon to evenly distribute the vertical whitespace of all the bouquets.  
                                




                         
17. Using the Pointer tool, click and drag all over all of the bouquets. 
18. Select the Group icon from the Menu Bar. 



                                           
19. Click Copy. 




                                                                 
20. Click Paste. 




                                                                
21. Click on the newly copied bouquets and drag them to right edge of the canvas. 
                                                                       
Make the Page Background 
       First, let’s turn the guides back on so we can draw our page width correctly. 
    22. Click on View, hover over Guides and click on Show Guides. 




                                                                
       Your canvas should now look like this. 




                                                            
23. Click and hold the Star tool to open the submenu, then click the Rectangle tool. 




                               
24. Click and drag from the second guide on the left to the next to last guide all the way on the right. 




                                                                                         
25. Select the Scale tool. 
26. Click and drag to resize the background rectangle.  Make the rectangle have a height of 900 pixels. 




                                                                                             
    27.
    2 Open the Styles Panel. 
    28.         yle for the rectangle to To
    2 Set the sty                         ool Tip 001. 




                                     
         
  me that Layer 
Nam
    29.
    2 Open the Layers Panel. 
    30.                                             ange it to bac
    3 Double‐click on the Folder name Layer 1 and cha            ckground. 




                                                                                    
    31.         blank area ne
    3 Click the b                                                  folder to lock the layer. 
                            ext to the eye icon for the background f




                                          
 
Crea         Header 
   ating the H
  king a Layer 
Mak
   1.         yers Panel, click on the New
   1 In the Lay                                      Layer icon.  
                                         w/Duplicate L




                                     
             er, you must h
       Remembe                         layer before y
                          have a blank l                        n working. 
                                                    you can begin
   2 Double‐click on Layer 1
   2.                                 e the name to
                           1 and change           o header. 




                                                                           
             et Logo 
Add the Bouque
   3.                   ibrary. 
   3 Open the Document Li
   4.                                 ymbol to the canvas. 
   4 Click and drag the bouquet‐100% sy




                                                         
   5 Move the
   5.                     upper left cor
            e logo to the u                         age backgroun
                                       rner of the pa           nd. 
                cale tool to re
       Use the Sc                            essary. 
                              esize it if nece
                                                     
Add the Text Log  
               go
   6.          he Text tool in the toolbar
   6 Click on th                         r. 




                   
   7 Click on th
   7.                      d type the tex
               he canvas and                         ooms. 
                                        xt Bulbs & Blo




                                    
   8.          Font Family b
   8 Click the F                        operties Pane
                           box on the Pro                         Curlz MT from
                                                    el and select C           m the list. 




                                                     
   9.          Font size box on the Prope
   9 Click the F                                                  in the box. 
                                        erties Panel and type 100 i




   10.         B on the Prop
   1 Click the B                         to make the t
                           perties Panel t           text bold. 
   11. In the Styles Panel, click the Tool tips 049 style to apply it to the Bulbs & Blooms text. 




                                     
Add the Navigation Bar 
   12. Open the Common Library Panel. 
   13. Double click on the Menu Bar folder. 




                                     
   14. Click and drag Menu_Bar_09 onto the canvas. 




                                                                        
   15. Double‐click on the menu bar to open Symbol Editing bar. 


                                                
       Click on the 100% at the bottom right of the canvas and select a smaller percentage to zoom in. 
                             
16. Click on the center of the menu bar and drag downward to separate the shapes. 




                                                                                      



                                                                                      
17. Click the Delete key on the keyboard to remove the shape. 
18. Click on the center of the remaining menu bar shape. 
19. Open the Styles panel and select the Tool tips 040 style. 




                                                   
20. Click on the Scale tool in the toolbar. 
21. Resize the menu bar so that it expands the full width of the pink background. 




                                                                                      
22. Click on the tiny white arrow and delete as we will not be using it. 
                                                                                                                  
23. Click and edit each of the page names so that they match those needed for the Bulbs & Blooms Web site.  Reset 
    the size of the links to 12. 




                                                                                                                      
    Click and edit each of the page names so that they are a black text color as they will be easier to read. 




                                                            
24. Click on the left arrow at the top of the canvas to exit symbol editing mode. 


                                            
25. Select the Pointer tool. 
26. Click and drag to move the menu bar so that it aligns with the bottom edge of the bouquet. 




                                                                                          
27. On the Menu Bar click on the Send to Back icon to move the menu bar behind the logo. 



                                      
28. Use the Pointer tool to move the Bulbs & Blooms text so that it is above the menu bar. 




                                                                                      
Now that the com                                      ed with can begin creating
                mmon elements of our design are finishe                                     pe so that we can show it 
                                                                               g the prototyp
to the client. 

 
Set a Master P
             Page 
    1 Open the Pages panel. 
    1.
    2.          k on the blue area that say
    2 Right click                                                   et Master Pag
                                          ys Page 1 and select the Se                        ouble‐click 01
                                                                                ge option.  Do            1 Page 1 and 
                t to Master Pa
        rename it            age 




                                          
                             sic template f
        A Master Page is a bas                                      me you make a
                                          for your Web site. Each tim                       t will automa
                                                                                a new page it           atically have 
        the basic template. 
    3 Click on th
    3.                                  on in the Laye
                he New/Duplicate Page ico            ers panel. 




                                          
    4 Double‐click on the Page 2 text and
    4.                                  d rename the page to Hom
                                                               me. 
                                           
    5.                     until you have
    5 Repeat steps 3 and 4 u                                      ts and Contac
                                        e created the Flowers, Gift           ct pages. 




                                           
 
Crea        ome Page 
   ate the Ho
    1.         ges panel sele
    1 In the Pag                                     an also select
                            ect the Home page.  You ca                                      ge Navigation
                                                                  t the page by using the Pag           n at the top 
       of the workspace winddow. 




                                                                             
                             ed it is highlig
        When a page is selecte              ghted in blue.
    2 Select the
    2.         e Text tool in the toolbar. 
    3.                     nd to the righ
    3 Click and drag down an                                       t spans the width of your p
                                        ht to create a text box that                         page. 




                                                                                 
    4 Open the bulbs_bloom
    4.                               ocx file from the bulb_blooms folder in
                         ms_content.do                                                  ks Examples f
                                                                           n the Firework           folder. 
5. Copy and paste all of the text for the Home page. 
6. Select the text and in the Properties Panel set the text to Verdana, 16 point, left aligned. 




                                                                                          
    To make the text easier to read we are going to adjust the Anti‐Alias. Aliasing occurs when a computer monitor, 
    printer, or graphics file does not have a high enough resolution to represent a graphic image or text. Anti‐aliasing 
    smoothes the transition of pixels in an image. On the Web, text should not be aliased, so it should not be aliased 
    in our Fireworks prototype either. 
7. In the Properties Panel select No Anti‐Alias in the Anti‐Alias box. 




                                                                
8. Select only the Welcome text. 




                                           
9. Make the text bold and size 24. 



                                                                               
10. Click after the word graduation. and press the Enter key on the keyboard a few times. 




                                                                           
    You need to add some space in between the paragraphs so that you have room to add an image. 
11. Click on the File menu and select the Import option. 
                                    
12. Browse to the bulbs_and_blooms Web site folder in the Fireworks Examples folder, select the images folder and 
    select the flower‐and‐vase image.  Do not click and drag to bring in the image, only click on the canvas one time 
    and the image will be imported at the original size of the image. 




                                                                                            
    This will import the picture to the Home page in the Fireworks document. 
                                                                                        
        If necessary, delete some of the extra space above your last paragraph. 

 
Create the Flowers Page 
    1. Use the Pointer tool to select the text on the Home page. 
    2. Copy it. 
    3. In the Pages panel, select the Flowers page. 
    4. Paste. 
    5. Use the Text tool to edit the Welcome text and change it to say Flowers. 
    6. Open the bulbs_blooms_content.docx file from the bulbs_and_blooms folder in the Fireworks Examples folder. 
    7. Copy the text for the Flowers page and paste it in the Fireworks page replacing the text from the Home page. 




                                                                                                          
Retrieve the Photos 
    8. Open a Web browser and go to http://pics4learning.com/?search=cat&query=Plants_Flowers. 
    9. Browse the Web site and find 6 different flower photos to use on the flowers page of the Web site. 
    10. Download each image to the _editables folder in your bulbs_and_blooms folder on the U drive. 
 
 
 
     the Photos 
Edit t
                          h of the flowe
       We want to make each                                      ireworks Batc
                                       er images the same size. Fi           ch processing features are ideal for 
              u have to do th
       when you                         g to a bunch of images. It allows you to
                            he same thing                                      o use the software to automatically edit
                                                                                                                      t 
                 mages. 
       multiple im
   11.         he File menu,
   1 Click on th                         atch Process.
                           , then click Ba




                                              

   12.
   1 In the win ndow that app pears, navigate to your bu
                                                       ulbs_and_bloo               hen navigate to the _edita
                                                                      oms folder, th                         ables folder, 
                Ctrl key on the keyboard and click on ea
       hold the C                                                    ower images t
                                                        ach of the flo                         t to resize. 
                                                                                   that you want




                                                                                      
     13.        k the Add button, and then
     1 Then click                                     ext button. 
                                         n click the Ne

         This window allows you to specify w           s you want to perform on e
                                           which options                        each image. 

     1 Select the
     14.                     n and click Add. 
                e Scale option




                                                           
  
     15.        ale to Size opt
     1 Select Sca                          ottom of the d
                              tion at the bo            dialog. 




                                                           
          
     16.        e width and h
     1 Adjust the                                      hen click the Next button.
                            height to 150 pixels, and th




                                                               

     17.        stom Location
     1 Select Cus                                   vigate to the images folder
                            n for your images and nav                                                 m
                                                                              r in your bulbs_and_blooms folder. 
   18. Click on the Batch button to run the script and resize each of the selected images. 

Import the Pictures 

   19. Click File and then Import 




                                        

   20. Select the first flower picture and click Open. 




                                                                                

   21. Move the mouse where you want the picture positioned on the page and click once to place the picture. 




                                                                                           
        If you click and drag to place the image you risk distorting it. Click once and let go to place it without distorting it. 

    22. Repeat steps 19, 20 and 21 until you have imported all of the pictures. 




                                                                                            

        Position your left‐most and right‐most image exactly where you want them. The position of the images in the 
        middle does not matter. 

    23. Use the Pointer tool to click and drag over the images to select them. 




                                                                                           

    24. Click on the Align Top icon on the Menu Bar to align the top edge of all of the images. 




                                       

    25. Click on the Distribute Widths icon on the Menu Bar to equally distribute the images across the page. 




                                                                                                                              

 
   ate the Gif
Crea         fts Page 

   1.                      o select the te
   1 Use the Pointer tool to                          owers page. 
                                         ext on the Flo
   2.
   2 Copy it. 
   3.         ges panel, select the Gifts page. 
   3 In the Pag




                                        
   4 Paste the text. 
   4.
   5.                      dit the Flower
   5 Use the Text tool to ed                         hange it to say
                                        rs text and ch             y Gifts. 
   6 Open the bulbs‐and‐blooms‐conten
   6.                                              om the Bulbs
                                    nt.docx file fro                      older on the U
                                                              s & Blooms fo            U drive. 
   7 Copy the text for the G
   7.                                   d paste it in th
                           Gifts page and                                       ng the text fro
                                                       he Fireworks page replacin                        ers page. 
                                                                                              om the Flowe




                                                                                       
       Now that you have the             works, we nee
                           e text in Firew                         t so that it loo
                                                     ed to format it              oks a bit better. 
   8 Place the mouse curso
   8.                                  nning of the B
                         or at the begin                         . 
                                                    Balloons text.
   9.                     acters Panel. 
   9 Open the Special Chara
   10.         he Bullet icon
   1 Click on th            n. 




                                         
   11. Repeat steps 8 – 10 for each of the gift ideas so that it resembles the graphic below. 




                                                          
   12. Go to the File menu and click Import. 
   13. Navigate to the images folder in the bulbs_and_blooms folder and select the gifts.gif image. 




                                                   
   14. Move the mouse to the area you want to place the image at and click once to place the image. 




                                                                                                  


Create the Contact Page 

   1. Use the Pointer tool to select the text on the Gifts page. 
   2. Copy it. 
   3. In the Pages panel, select the Contact page. 
                                          
    4.
    4 Paste the text. 
    5.                      dit the Gifts te
    5 Use the Text tool to ed                          ge it to say Co
                                           ext and chang             ontact. 
    6.                               nt.docx file. 
    6 Open the bulbs‐and‐blooms‐conten
    7.                      Contact page and paste it in the Fireworks page replacing the text
    7 Copy the text for the C                                                                            ontact page.
                                                                                             t from the Co




                                                                                                             
        On the ac            e, the text Em
                ctual Web site            mail Us will be a hyperlink. The steps bel            e illusion of a
                                                                                   low create the             a hyperlink. 
    8 Select the
    8.                      Us. 
               e text Email U
    9.         operties Panel underline th
    9 In the Pro                                      hange it to the color #FF7D
                                         he text and ch                                     d underlined.
                                                                                D46, bold and




                                                                                                                            


   ate the PD
Crea                  pe 
            DF Prototyp

Protootypes providde an immediaate visual outtput of what yyour Web site
                                                                       e design, conttent, and nav                ook like and 
                                                                                                   vigation will lo
                  on. They are g
how it will functio                          ing the client determine if you are going in the right direction bef
                               great for helpi                         f                                          fore you 
    st an enormou
inves              us amount off time or effor
                                             rt. PDF is a co
                                                           ommon prototype format a                 sally available
                                                                                     as it is univers             e and usable 
                  f
to the majority of people. 

 

 
    1.         e Master Page
    1 Select the                       ages Panel. 
                           e from the Pa




                                           
    2.                     zoom in on th
    2 Use the Zoom tool to z           he top of the page. 




                                 
   ing the Hots
Addi          spots 
    tspot in Adob
A hot           be Fireworks is            ent of a hyperlink in a Web
                             is the equivale                                       hotspots in yo
                                                                     b site. Using h                        e will make it 
                                                                                                our prototype
   e realistic. 
more
    3.         e Rectangle Hotspot tool fr
    3 Select the                         rom the Tool bar. 




                             
    4.                      e upper right hand corner of the bouqu
    4 Click and drag from the                                                              ht hand corne
                                                                 uet logo to the bottom righ           er. 




                                                                  
    5.         operties panel select the ar
    5 In the Pro                                       Link dropdow
                                          rrow for the L                      e Home.htm as the page t
                                                                  wn and choose                      to link to. 
                                                                                 
   6. Click and drag from the upper right and corner of the Home link to the bottom right hand corner. 



                                                              
   7. In the Properties panel select the arrow for the Link dropdown and choose Home.htm as the page to link to. 




                                                                        
   8. Complete steps 6 and 7 for each of the remaining links. 



                                                    ’ 
Export the Prototype 
   9. Go to File menu and select Export. 




                                   
   10. Select Adobe PDF as the Export file type. 
                                                                                            
    11.        to the _plann
    1 Navigate t                                     and_blooms f
                           ning folder in your bulbs_a          folder. 
    12.        file as prototy
    1 Save the f             ype. 
    1 Click Save
    13.        e. 
   w the Protot
View          type 
    prototype sh
The p          hould open a
                          automaticall
                                     ly. If it does not you shou
                                                               uld navigate           rive and open
                                                                          e to the U dr           n it. 
    14.         he zoom out button to zoo
    1 Click on th                                    you see the w
                                        om out until y           whole page. 




                                                                                        
    15.        through the p
    1 Navigate t                                    everything wo
                           prototype to ensure that e                        y. 
                                                                orks correctly




                                                                                                      
                              ld open up your email and send a copy o
        At this point, you woul                                                 eted prototyp
                                                                    of the comple                         nt for 
                                                                                            pe to the clien
                              ill likely reque
        approval. The client wi                          nges and you will have to t
                                             est some chan                                                   ototype to 
                                                                                   then edit the Fireworks pro
                 cifications, re‐
        their spec                           df prototype a
                                ‐export the pd                        t for approval
                                                          and submit it                         tually the client will 
                                                                                   l again. Event
                the prototype
        approve t                                     ng the actual Web site. 
                            e and you can begin buildin

 
Slici         ototype 
    ing the Pro
                  o create the a
        In order to                        ite you will ne
                               actual Web si             eed all of the images that w            up. In Firework
                                                                                    will make it u             ks you can 
                 nd easily expo
        quickly an                          ent images that will make up the Web s
                              ort the differe                                    site using the slice tool. 
    e the Text an
Slice           nd Bouquet 
    1.         ges Panel, clic
    1 In the Pag                         ster Page. 
                             ck on the Mas
    2 In the Too
    2.                       the Slice tool. 
               ol bar select t




                      
3.                      e upper left c
3 Click and drag from the                                                               ht corner to d
                                     corner of the Bulbs & Blooms text to the bottom righ            draw a slice.




                                                                                                 
4.                      e upper left c
4 Click and drag from the                                     o to the botto
                                     corner of the bouquet logo            om right corner to draw a slice. 




                                        
    Make sure            p edge of the bouquet slice
            e that the top                                                   text slice mat
                                                   e and the top edge of the t            tch. Click and drag to make
                                                                                                                    e 
            nts if necessa
    adjustmen            ary. 




                                                               
5.         e Pointer tool from Tool ba
5 Select the                         ar. 
6 Click on th
6.                                   o select it. 
            he Bulbs & Blooms slice to
7.         operties Panel type “Bulbs & Blooms” fo
7 In the Pro                                                   t and “banner” for the Slic
                                                 or the Alt text                         ce name. 




                            , for short, is what will be displayed if th
    Alternate text, Alt text,                                                     nnot be loade
                                                                       he image can                        ge on a Web 
                                                                                              ed. Every imag
                          fied alternate text. The Slic
    site should have specif                                        e filename for
                                                      ce name is the                          ce it has been
                                                                                r the slice onc            n exported. 
8.          he bouquet slice to select it. 
8 Click on th
9.         operties Panel type “Bouqu
9 In the Pro                                     Alt text and “b
                                    uet” for the A                                      me. 
                                                               bouquet” for the Slice nam



                                                                                                         
1 Open the Layers Panel. 
10.
1 Open the header layer
11.                                              ye icon next to
                      r folder and click on the ey                        Bar layer. 
                                                               o the Menu B
            e can export t
    Before we                        slice we need to hide the navigation bac
                         the bouquet s                                                 cause it should not be part
                                                                            ckground bec                         t 
             uquet image. 
    of the bou
                                  
Export the Text and Bouquet Slices 
   12. Go to File and select Export. 




                                         
   13. Navigate to the images folder in your bulbs_and_blooms folder. 
   14. Choose Images Only for the Export type. 




                                                               
   15. Click OK in the warning box that appears. 




                                                       
   16. Choose Export Slices for the Slices option. 




                                               
   17. Choose Current Page for the Pages option. 




                                                 
   18. Uncheck the Include areas without slices box. 




                                                 
   19. Click Save. 
   20. Open the images folder to view the exported slices. 
       Navigate to your fireworks folder. Click on the bulbs_and_blooms folder and then open the images folder.  You 
       should now see the bouquet_s1 and bouquet_s1 files. 




                                             
Slice the Navigation 
   21. Go back to Fireworks. 
   22. Open the Layers Panel. 
   23. Open the header layer folder and click on the eye icon next to the Bulbs & Blooms text and bouquet layers. 
       Before we can export the navigation slice we need to hide the bouquet and text because it should not be part of 
       the navigation image. 




                                         
       We also need to hide the bouquet slice because we do not want it to interfere with the navigation slice. 
   24. In the Layers Panel, open the Web Layer folder. 
   25. Click on the eye icon next to the bouquet slice to hide it. 
                                         
        We also want to hide the text for the navigation bar as it should not be part of the image. 
    26. Using the Pointer tool, double click on the Menu Bar to open it in Symbol Editing mode. 
    27. Open the Layer 1 folder in the Layers Panel. 
    28. Click on the eye icons next to each of the Text layers to hide them. 




                                     
    29. Click on the blue arrow in the upper left corner to exit symbol editing mode. 



                                             
    30. Choose the Slice Tool from the Toolbar. 




                     
    31. Click and drag from the upper left corner of the navigation background to the bottom right corner to create the 
        slice. 



                                                                                                        
    32. In the Properties Panel type “Navigation Background” for the Alt text and “nav‐bg” for the Slice name. 




                                                                                                                   
 
Export the Navigation Slice 
   33. Go to File and select Export. 
   34. Navigate to the images folder in your bulbs_and_blooms folder. 
       Make sure that Images Only  is set for the Export type, Export Slices is set for the Slices option, Current Page is set 
       for the Pages option and the” Include areas without slices” checkbox is not marked. 




                                                                   




                                                                                                                      
   35. Click Save. 
   36. Open the images folder to view the exported slices. 
       Go to your bulbs_and_blooms folder and then open the images folder. 




                                                                   
Slice the Background Bouquet 
   1. Go back to Fireworks. 
   2. Open the Layers Panel. 
   3. Open the header layer folder and click on the eye icon next to the Bulbs & Blooms text and bouquet layers to 
      show them again. 




                                     
       To slice the background bouquet we need to hide the background rectangle because we do not want it to 
       interfere with the slice. 
   4. In the Layers Panel, open the background folder. 
   5. Click on the eye icon next to the background rectangle to hide it. 




                                         
   37. Choose the Slice Tool from the Toolbar. 




                       
   38. Click and drag from the upper left corner of one of the background bouquets to the bottom right corner to 
       create the slice. 




                               
       This will be a repeating background. You should leave extra space around all edges of the slice to ensure that 
       when it is repeated each bouquet will have adequate whitespace around it. 
   39. In the Properties Panel type “Bouquet Background” for the Alt text and “bouquet‐bg” for the Slice name. 



                                                                                                         
Export the Navigation Slice 
   40. Go to File and select Export. 
   41. Navigate to the images folder in your bulbs_and_blooms folder. 
       Make sure that Images Only  is set for the Export type, Export Slices is set for the Slices option, Current Page is set 
       for the Pages option and the “Include areas without slices” checkbox is not marked.                             
   42. Click Save. 
     43. Open the images folder to view the exported slices. 
         Go to My Computer and select the U drive. Click on the Bulbs & Blooms folder and then the images folder. 




                                                                               
         You should now have all of the images that you will need when creating the actual Web site. 
 
 

                                               Congratulations! 
You have just finished creating a design and prototype for a Web site, from scratch, using Adobe Fireworks. And now that 
    you have sliced your prototype, we are ready to move on to the construction phase of the Web Development Process. 

								
To top