Recreate Google’s homepage by copy pasting its logo ...



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.

[pic]

[pic]

|[pic] |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. |

| | |

| |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. |

|[pic] |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. |

| | |

| |The red box in the image on the right shows about how large |

| |the box must be. This region will be captured into SnagIt. |

| | |

| |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. |

|[pic] |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. |

| | |

|[pic] |Maximize your workspace and close unnecessary window you are |

| |able to dedicate most of your work space to the document |

| |window. |

| | |

| |Paste the Google image you copied from SnagIt. It will create|

| |a new layer. Name the layer Guide. |

|[pic] |First we will recreate the multicolored Google logo using the|

| |Text Tool and a matching font. |

| | |

| |We found that the Garamond font at 72 point size comes |

| |closest to the font used in the logo. |

| | |

| |Select the text tool, and pick the suggested font and size |

| |from the Options bar. |

| | |

|[pic] |Create a text box over the logo, and type Google. |

|[pic] |Select one letter at a time and change its color to match the|

| |color used in the logo. |

|[pic] |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. |

| | |

| |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. |

|[pic] |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. |

|[pic] |Select the check boxes for Drop Shadow and Bevel & Emboss, |

| |and click OK. |

| | |

|[pic] |This should complete the logo. Now you may reduce the opacity|

| |of the Guide layer. |

|[pic] |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.|

| | |

| |Draw a box exactly over the text entry box in the guide |

| |layer. |

|[pic] |Next we will make the buttons using the Rounded Rectangular |

| |Tool. Select this button from the Toolbar as shown. |

|[pic] |In the Options bar, change its radius to 5 pixels. Draw the |

| |areas over the buttons. Name the layers appropriately. |

|[pic] |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. |

|[pic] |In the Layer Style dialog box, check Bevel and Emboss and |

| |uncheck Stroke. Click OK. |

|[pic] |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. |

| | |

| |Draw a box over the links area, and type in all of the text. |

|[pic] |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. |

| | |

| |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. |

|[pic] |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. |

| |Move all layers to place them so they fit as close as |

| |possible to what the Guide later looks like. |

| |Turn off the visibility of the Guide Layer and save the file.|

| | |

| | |

| |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. |

| | |

| |Next, you will create a site map of the CoB website. |

|[pic] |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. |

|[pic] |At the end of your L1 document, choose Insert > Diagram. |

|[pic] |Select Organization Chart. |

|[pic] |Click on top box and type "College of Business Home". |

| |Click on lower (subordinate box) and add subtitles starting |

| |with "About the College". |

|[pic] |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. |

|[pic] |Continue in the same manner until all main navigation links |

| |are included in the organization chart. |

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download