<p>Website Usability L1 - Google Page 1/9</p><p>Recreate Google’s homepage by copy  pasting its logo, typing its text and creating its search box and buttons. Use a screen shot of the actual page as a template (lower its opacity) and create your version right on top. Website Usability L1 - Google Page 2/9</p><p>The purpose of this exercise is to practice the ability to reuse design elements with Photoshop. We will recreate a few parts of the Google web page: the logo, the text field, a few links, and buttons. </p><p>We will capture this part of the web page using SnagIt, and then use it as a background template to guide the development of the design.</p><p>First open the Google web page, then open SnagIt, and select the command that would allow you to select a region. Click on capture, and draw a box around the area that must be captured. </p><p>The red box in the image on the right shows about how large the box must be. This region will be captured into SnagIt.</p><p>In order to bring the captured image from SnagIt to Photoshop, select and copy it using the respective Select All (or Ctrl+A), and then Copy (or Ctrl+C) from under the Edit menu.</p><p>Start Photoshop, and use the “New …” command to start a new file. Type in 6 and 4 for the width and height. Type in “Google” for the name, and make sure that the resolution says 96 pixels/inch. Click OK. Website Usability L1 - Google Page 3/9</p><p>Maximize your workspace and close unnecessary window you are able to dedicate most of your work space to the document window. </p><p>Paste the Google image you copied from SnagIt. It will create a new layer. Name the layer Guide.</p><p>First we will recreate the multicolored Google logo using the Text Tool and a matching font.</p><p>We found that the Garamond font at 72 point size comes closest to the font used in the logo.</p><p>Select the text tool, and pick the suggested font and size from the Options bar.</p><p>Create a text box over the logo, and type Google.</p><p>Select one letter at a time and change its color to match the color used in the logo. Website Usability L1 - Google Page 4/9</p><p>The click the color button in the Options bar to bring up the color palette. Notice that the mouse cursor becomes an ink dropper tool. Using this tool, click on the color of the letters used in the original logo.</p><p>For example, you will begin with the blue used in the “G” to pick up the blue. Follow this process one letter at time till you have colored all the letters to match.</p><p>With the text layer selected, click on the button for the effects menu located in the bar at the bottom of the layers palette, and then on Blending options.</p><p>Select the check boxes for Drop Shadow and Bevel & Emboss, and click OK. Website Usability L1 - Google Page 5/9</p><p>This should complete the logo. Now you may reduce the opacity of the Guide layer.</p><p>Next we will draw the text entry box using the rectangular tool. Select this tool from the toolbox and a style for the box from the options bar, as shown by the circled selections.</p><p>Draw a box exactly over the text entry box in the guide layer.</p><p>Next we will make the buttons using the Rounded Rectangular Tool. Select this button from the Toolbar as shown. Website Usability L1 - Google Page 6/9</p><p>In the Options bar, change its radius to 5 pixels. Draw the areas over the buttons. Name the layers appropriately.</p><p>The boxes you have drawn may show a stroke effect. Since we need a different effect than Stroke, right-click the button layers, select Bevel and Emboss.</p><p>In the Layer Style dialog box, check Bevel and Emboss and uncheck Stroke. Click OK. Website Usability L1 - Google Page 7/9</p><p>Next, we will replicate the links that appear above the text entry area. The Text tool is used for this, with the Arial font, and 12 point size.</p><p>Draw a box over the links area, and type in all of the text. </p><p>Then just like we did with Google, select the text and change their formatting (color, superscript, etc) to match what is used in the Guide layer underneath.</p><p>You may use the character palette to make these formatting changes. This palette can be launched either by a button in the Options bar or by using the menu command Window  Character.</p><p>Create button text for the two buttons in a similar fashion, starting with drawing a text box as wide as the button text, and selecting the font characteristics: Arial, 10 point, blue.</p><p>Move all layers to place them so they fit as close as possible to what the Guide later looks like. </p><p>Turn off the visibility of the Guide Layer and save the file. </p><p>Start SnagIt and capture the document window to paste it into a deliverable. Make sure all layers are named and are visible with no scrollbars showing. Capture the layers palette and paste it beside the snag of the document window. Save this deliverable as L1 Website Usability.</p><p>Next, you will create a site map of the CoB website. Website Usability L1 - Google Page 8/9</p><p>Creating a Site Map A site map helps a user to navigate throughout a website. It is a snapshot of all a website has to offer. Because websites have a hierarchical structure, it is appropriate to portray the site map in the same fashion. We will create our site map of the College of Business Website. Follow the steps on the next page to create a site map using MS Word.</p><p>3/ 8/ 2005 Frost and Pike 13</p><p>Open MS Word At the end of your L1 document, choose Insert > Diagram.</p><p>9/ 23/ 2006 Frost and Pike 14</p><p>Select Organization Chart. Select Organization Chart. </p><p>3/ 8/ 2005 Frost and Pike 15 Website Usability L1 - Google Page 9/9</p><p>Enter Text Click on top box and type "College of Business Home". Click on lower (subordinate box) and add subtitles starting with "About the College". </p><p>3/ 8/ 2005 Frost and Pike 16</p><p>Add Coworker To add more boxes, go up to the Organization Chart Toolbar, and click the arrow next to Insert Shape. Choose "Coworker." Make enough boxes to place all main navigation link titles in the Chart. </p><p>3/ 8/ 2005 Frost and Pike 17</p><p>Finish Organization Chart Continue in the same manner until all main navigation links are included in the organization chart. </p><p>3/ 8/ 2005 Frost and Pike 18</p>