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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- question info troy high school
- how to write resolutions
- icc letter size typing template
- running head apa typing template
- what is computer hardware components definition
- recreate google s homepage by copy pasting its logo
- how to make a class website
- digital signature guide veterans affairs
- icc a4 typing template cryocooler
Related searches
- free women s catalogs by mail
- free men s catalogs by mail
- percent bachelor s degree by state
- best children s books by age
- children s books by age
- google find song by lyrics
- how to find someone s address by name
- men s inseam by height
- u s deficits by president
- copy pasting in excel
- google book search by author
- world s population by country