VIEWS: 15 PAGES: 52 POSTED ON: 4/24/2011
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.
Pages to are hidden for
"Bulbs _ Blooms"Please download to view full document