Activity 10: Buttons

 

 

 

Web buttons, button graphics, web badges or stickers are pictures in some World Wide Web pages which are typically used to advertise programs that were used to create or host the site (for example, MediaWiki sites often have a “Powered by Mediawiki” button on the bottom right corner of the page), programs that are recommended to view the site, or that the site passes World Wide Web Consortium (W3C) HTML validation. The buttons are linked to the advertised sites. These were first popularized by Netscape and Microsoft during the browser wars.  Button graphics are typically 88×31 pixels in size, but recently, smaller 80×15 pixels buttons have become very popular in the blogosphere.

adapted from the following tutorial: http://www.smartwebby.com/free_tutorials/website-design-how-to/make-button.asp#submit

 

In this activity you are going to learn how to create three glossy vector button effects using Adobe Fireworks. These button effects include:

  1. A green start button,
  2. A red reset button,
  3. A blue submit button,

 

Students are to design three graphic buttons.  Use the skills developed throughout Unit 1.  Be Creative. This does not need to be a traditional rectangular button! Follow the instructions below, but feel free to add your own graphic design twist/colour.  Please note, you do not need to use the colours suggested, but consider the spectrum of a Web Safe colour range.  Create an Activity 10 sub-folder in Unit 1 and create a new page titled:  “Activity 10 Buttons” under the parent page of Unit 1.

Part 1:  Green Start Button

    • It is recommended that your first attempt should be a rounded rectangle, but feel free to use your own shape after it is completed.
    • Step 1: Open an new document (200 X200 pixels) in Adobe Fireworks.  save as: firstlast_activity10start.png in your Unit 1/Activity 10 folder.
    • Step 2:draw a rounded rectangle using the Rounded Rectangle Tool (or any vector shape tool) and set its Fill colour to a gradient fill – go to Fill category >> select Gradient >> Choose Linear option.  Now click the Fill colour, and then click on the small colour shape that is on the left side and set the colour to #15501E.
    • Step 3: After that, click on the small colour shape that is on the right side and set its colour to #BAD32F. Give this a 1-pixel soft stroke with the colour #9FBB66. The illustration below shows how your rounded rectangle should now appear:

    • Step 4: Draw another Rounded Rectangle (or shape of choice) and place it over the first rounded Rectangle and set its Fill colour to#94BE34 and Stroke colour as none. Now apply a Feather of 5 to it. For this, click on Edge from Properties panel, choose Feather and set the feather value to 5.
    • Step 5: Now draw a third Rounded Rectangle (or shape of choice) and place it over the previous Rounded Rectangles. Set the Fill colourto a gradient fill – Fill category >> select Gradient >> Choose Linear option.
    • Step 6: Now click the Fill colour, and then click on the small colour rectangle that is on the left side and set the colour to #FFFFF7. Now click on the small colour rectangle that is on the right side and set its colour to #D4E076. The below image depicts how your button should look so far:

    • Step 7: Cut the 3rd rounded rectangle (or shape of choice)  into two – around 15 pixels in height from the top. For this, select the Rounded Rectangle  (or shape of choice) using Subselection Tool , then select the Knife Tool  and cut the Rounded Rectangle by dragging your cursor from the left side to the right. Now adjust the linear effect according to the height of the Rounded Rectangle and apply a Feather of 2 (click on Edge from Properties panel, choose Feather and set the feather value to 2). The resultant button should look similar to what’s shown below:

    • Step 8: Now copy and flip the cut rounded rectangle vertically – Copy and Paste (Ctrl+C, Ctrl+V) then go to Modify >> Transform >> Flip Vertical. Move the Rounded Rectangle to the bottom and apply a Feather of 2.

    • Step 9: Now click the Fill colour, and then click on the small colour rectangle that is on the left side and set the colour to #96C932. Next click on the small colour rectangle that is on the right side and set its colour to #ECEC81. The image below shows how the reversed Rounded Rectangle should look:
    • Step 10: Click the Text Tool, choose Font – Trebuchet MS, Font Size – 20, colour – #003300, Font Weight – bold, Anti-aliasing level – Smooth Anti-Alias and write “Start” or any other button text.

    • Step 11:Create a simple two-state button
      1. To enter symbol-editing mode, do either of the following:
        • Double-click an existing button on the canvas.
        • Choose Edit > Insert > New Button.
      2. Do one of the following to import or create the Up state graphic:
        • Drag and drop or import the graphic that you want to appear as the button’s Up state into the work area.
        • Use the drawing tools to create a graphic or use the Text tool to create a button from text.
        • Click Import A Button from the Property inspector and select a ready-made editable button from the Import Symbols: Button library. With this option, each of the button’s states is automatically filled with the appropriate graphics and text.
        • (Optional) Set the 9-slice scaling guides to keep the button shape from being distorted when it is resized. (See Apply 9-slice guides to a symbol.)
        • (Optional) Select the Text tool and create text for the button.
      3. To create the Over state, select Over from the pop-up menu and do one of the following:
        • Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it.
        • Drag and drop, import, or draw a graphic.
      4. (Optional) To use Live Filters to create common appearances for each state, select the graphic to which you want to add a Live Filter and click the plus (+) icon next to the Filters label in the Property inspector.
      5. Select Bevel And Emboss > Inner Bevel, or Inset Emboss, or Outer Bevel, or Raised Emboss.
      6. Select a button preset filter for each state.

      Create a three- or four-state button

      1. Although four-state buttons are not mandatory, using them lets you take advantage of the built-in Nav Bar behaviors.
        1. With a two-state button open in the canvas in the symbol editing mode, select Down from the pop-up menu in the Property inspector and do one of the following:
          • Click Copy Over Graphic to paste a copy of the Over state button into the Down window, and then edit it to change its appearance.
          • Drag and drop, import, or draw a graphic.
        2. To add an Over While Down state, verify that the Down state button is open and repeat step 1.
        3. (Optional) Apply preset filters to buttons.
          Note: When you insert or create a graphic for the Down or Over While Down states, the options for including the state in the navigation bar are selected automatically
    • Go to file/Export Wizard and export for Web as firstlastname_activity10_Webgreen in your Unit 1 folder/Activity 10 subfolder.  Note it will export an html file.  Post your exported button (not the html file) to your blog page titled: “Activity 10: Buttons” under the parent page of Unit 1.

Part 2:  Red Reset Button

Similar to the above green Start button by following the 10 steps for a red colour palette instead of green you can create a glossy red button. colours we have used include: #510000#E8201F#B89762 (step 1: 1px soft stroke),#E93730#F0817A#E93B34 and #F39791. To get a slightly different effect as displayed in our sample red button we need to modify Step 7 a little bit. Instead of cutting just a portion of the top for the 3rd rounded rectangle you should cut it into half as shown below. Also the Opacity should be set to 80 (change 100 to 80 – Opacity value located above Filters in Properties Panel).  Save as: firstlast_activity10reset.png in your Unit 1/Activity 10 folder.

So now you have a brand new button effect by implementing just these minor changes. After adding your ‘Reset’ button text (colour: #330000).

Go to file/Export Wizard and export for Web as firstlastname_activity10_Webreset in your Unit 1 folder/Activity 10 subfolder.  Note it will export an html file.  Post your exported button (not the html file) to your blog page titled: “Activity 10: Buttons” under the parent page of Unit 1.

Part 3:  Blue Submit Button

For this button effect, similar to the green Start and red Reset buttons, we first need to create a glossy blue button following steps 1 thru 9 with these colours: #103C5A#04A5E7#0D7EAC (step 1: 1px soft stroke), #3799CD,#80C6EA#2D98CC and #6ACCF3.   Save as: firstlast_activity10submit.png in your Unit 1/Activity 10 folder.After completing Step 9 please do the following:

    • Step 10: We now need to take the top cut rounded rectangle behind the second rounded rectangle (which has feather 5). For this just select the second rounded rectangle and the bottom cut rounded rectangle (press shift then select) and then bring them forward (press Ctrl+Shift+Up Arrow). The image below shows how your button should look after these placement changes:
    • Step 11: Now draw a white circle using Ellipse Tool  on top of the Rounded Rectangle (Fill colouras#FFFFFF, Stroke colour as none) and then set its Opacity as 50. Now set a feather of 10 (click on Edge fromProperties panel, choose Feather – default feather value to 10 should appear). This is how your button should almost look like now – adjust the ellipse to the position showed below:
    • Step 12: Since the ellipse has an opacity value it covers up some of the button’s outline. To prevent this we need to make the ellipse to show only partially. To do this just duplicate the second rounded rectangle (copy paste) andCut and Paste Inside the ellipse into it (Ctrl+X and then Ctrl+Shift+V). After this is done the copied rounded rectangle’s blue fill will show so just select and change it to Transparent. Now add your ‘Submit’ button text (colour:#000033) and your finished.
    • Go to file/Export Wizard and export for Web as firstlastname_activity10_Websubmit in your Unit 1 folder/Activity 10 subfolder.  Note it will export an html file.  Post your exported button (not the html file) to your blog page titled: “Activity 10: Buttons” under the parent page of Unit 1.