ITP 101 Project 2 - Photoshop

ITP 101 Project 2 - Photoshop Project Objectives Learn how to use an image editing application to create digital images. We will use Adobe Photoshop for this project. Project Details To continue the development of your business plan, this week you will create graphics for your company website. Photoshop is a powerful tool to create impressive graphics both for the web and for print. Applications range from animated gifs, banners, backgrounds and logos to print advertisements. There are two parts to this project. In Part 1, you create a header image for your website. In Part 2, you create navigation images for your website. You will be using these images in your next lab assignment which is making a website using Dreamweaver. Here is an example website: If at any time you make a mistake during this project, you can use the history palette to go back to a previous step. To undo only the previous action, use CTRL+Z on a Windows machine, use COMMAND+Z on a Mac machine. To undo multiple actions, use CTRL+ALT+Z on Windows, COMMAND+ALT+Z on a Mac, or the toolbar Edit Step Backward option. Page 1 of 8

Instructions 1. Create a new folder on your flash drive and name it lastname_firstname_photoshop. 2. Start Photoshop CS6 (or CS5) by using Spotlight in the upper right-hand corner to search for Photoshop or Adobe Master Collection. 3. Explore the Photoshop interface. If the interface is not set as Essentials, please set it now (in the upper right-hand corner of the template). The image below is CS5. Toolbar Tool Options Menu Images display area Layers window Header Image Create a Header Image displaying the Name of your company/website: 4. From the top main menu, select the File New... options. Page 2 of 8

5. In the New window, Enter header in the Name textfield. Enter 960 pixels in the Width textfield. Enter 150 pixels in the Height textfield. In the Resolution textfield, enter 72 pixels/inch. Make sure the Color Mode is set to RGB Color and 8 bit. For the Background Contents, select Background Color. Click the OK button. Save your document: 6. In the main menu, select the File Save As option. 7. In the Save As window, enter header for the name. Browse to the lastname_firstname_photoshop folder. The Format should be set to Photoshop. Click the Save button. 8. While you continue to make changes to your image, make sure to save your document often. You may select the File Save option. If you are on a Mac machine, you can press the COMMAND+S keys at the same time. If you are on a Windows machine, you can press the CTRL+S keys at the same time. Embed info into the document: 9. In the main menu, select the File File Info option. 10. In the header.psd window in the Description tab, enter ITP 101 Lab 2 for the Document Title. For the Author, enter your name. The information you add is embedded in the file using XMP (extensible Metadata Platform). Create guides to help layout the text and graphics: 11. If the ruler is not visible around the image, from the main menu select the View Rulers option. 12. Right click on the ruler and select pixels. We want to use pixels instead of inches. 13. From the main menu, select the View New Guide option. 14. In the New Guide window, select Vertical for the Orientation and enter 480 px for the Position. Click the OK button. 15. Create a horizontal guide at 75 px by utilizing the same option. Select Horizontal for the Orientation and enter 75 px for the Position. Set the background color: 16. In the Toolbar, click on the Set Foreground Color square (the left-hand square on the duel-box overlay, bottom of the toolbar). 17. In the Color Picker window, select a color. Use a web safe color, for ease of integration to your website. When done, click the OK button. 18. In the Toolbar, click on the Paint Bucket Tool. If you do not see it, then right click on the Gradient Tool (middle of the toolbar; a shaded rectangle) and select the Paint Bucket Tool. Page 3 of 8

19. When you move your mouse over your image, you will see that the cursor changes to a paint bucket. Click on your image, and the background color will change. Add words: 20. In the Toolbar, click on the Set Foreground Color square towards the bottom of the Toolbar. 21. In the Color Picker window, select a color for the text you are going to add and click the OK button. If you used a dark color for your background, then choose a light color (like white) for your text color. If you used a light color for your background, then choose a dark color (like black) for your text color. 22. In the Toolbar, click on the Horizontal Type Tool (it looks like a capital T). 23. In your image, click and start typing the name of your company. If you don t see anything, then your foreground color is the same as your background color (hit CTRL-A, and select a new foreground color in the box). 24. In the Tool Options Menu at the top of the pane, change the font, style, size and anything else you would like to change. The size should be around 48 pt (bigger or smaller depending on the font). 25. You can warp text by clicking on the Create warp text icon (slanted T with an curved arrow under it in the top options menu). In the Warp Text window, select the Style you want to use and change the Bend. When done, click on the OK button. Move Tool Create warp text icon Checkmark icon 26. When you are done changing your text, click on the Checkmark icon on the far right of the Tool Options Menu. 27. To move your text around, use the Move Tool in the Toolbar (top icon, left-hand side). You can use the guides to help you. Use the guide at 480 to center your text. 28. Notice that the Type Tool created a new layer for you in the Layers panel (lower righthand corner of the application window). 29. To enhance the text, from the main menu select the Layer Layer Style Blending Options option. 30. In the Layer Style window, select different Styles and options for those styles. Try using the Drop Shadow and Bevel and Emboss options. When done, click on the OK button. Page 4 of 8

Example after adding words: Add graphics: 31. We want to add at least one graphic to this image. You can use your own images or download public domain images. (Do not use images with copyrights or images that have logos or text embossed on them.) 32. Open the image in Photoshop by selecting the File Open option from the main menu. It will open in another tab. 33. In the Toolbar, select the Magic Wand Tool or the Quick Selection Tool to select part of the image. We want the image and not the background color. You can hold down the Shift key when you click to add sections together. You can also select the background of the image, and then select the Select Inverse option on the main menu. 34. Once you have selected the part of the image you want, select the Edit Copy option on the main menu. (An alternate way to do this is to click the CTRL+C keys on Windows machines or click the COMMAND+C keys on Mac machines.) 35. Click on the header.psd tab to go back to editing your header image. 36. On the main menu, select the Edit Paste option. (An alternate way to do this is to click the CTRL+V keys on Windows machines or click the COMMAND+V keys on Mac machines.) 37. Notice that it created another layer in the Layers panel. Rename the layer by right clicking on it in the Layers panel and selecting the Layer Properties option. 38. In the Layer Properties window, enter icon as the Name. 39. Resize the new image to fit within your header image. From the main menu, select the Edit Free Transform option. To maintain the proportion of the image (aspect ratio), click on the chain link icon in the Tool Options Bar or hold the shift key down while dragging the resizing handles (the small boxes outlining the image). When it is the size you want, click on the Checkmark icon on the far right of the Tool Options Menu. 40. To move your image around, use the Move Tool in the Toolbar. You can use the guides to help you. 41. You may duplicate this image layer by right clicking on it in the Layers panel and selecting the Duplicate Layer option. You can move it to the other side of the text. If you want to flip it, select the Edit Transform Flip Horizontal option. 42. You may also add more images to your header such as one on each side of the text. Saving your image: 43. Save your image as header.psd. 44. You need to save your image to a file format that web browsers can read. On the main menu, select the File Save for Web option. 45. In the Save for Web & Devices window, select the PNG-24 option for the Preset (top of the window). Click the Save button. 46. In the Save Optimized As window, enter header.png for the filename. Click the Save button. Page 5 of 8

Example header image called header.png: Navigation Images Create Navigation Images for your company website: 47. From the top main menu, select the File New... options. 48. In the New window, Enter navbar in the Name textfield. Enter 320 pixels in the Width textfield. Enter 50 pixels in the Height textfield. In the Resolution textfield, enter 72 pixels/inch. Make sure the Color Mode is set to RGB Color and 8 bit. For the Background Contents, select Transparent. Click the OK button. 49. You may make the window larger than the image by dragging the bottom right corner. It makes it easier to select. Save your document: 50. In the main menu, select the File Save As option. 51. In the Save As window, enter navbar for the name. Browse to the lastname_firstname_photoshop folder. The Format should be set to Photoshop. Click the Save button. 52. While you continue to make changes to your image, make sure to save your document. You may select the File Save option. If you are on a Windows machine, you can press the CTRL+S keys at the same time. If you are on a Mac machine, you can press the COMMAND+S keys at the same time. Embed info into the document: 53. In the main menu, select the File File Info option. Page 6 of 8

54. In the navbar.psd window in the Description tab, enter ITP 101 Lab 2 for the Document Title. For the Author, enter your name. The information you add is embedded in the file using XMP (extensible Metadata Platform). Create guides to help layout the text: 55. Add a vertical guide at 160 px for center alignment. Add first navigation item: 56. Set your foreground color as described before. 57. Using the Horizontal Type Tool, add text such as the word Products. 58. Change the font and size to fit inside the image. 59. Enhance the text, by using the Layer Layer Style Blending Options option. Select your own blending options. Add second navigation item: 60. Since you want your navigation items to look the same, we will just copy this layer and edit it for our second navigation item. 61. In the Layers panel, right click and select the Duplicate Layer option. 62. In the Duplicate Layer window, change the name of your second navigation item to Location. 63. In the Layers panel, click on the eye icon for the Products layer such that the eye disappears. This means that the layer is currently not visible. (We can make it visible again by clicking on that same spot, and verifying that an eye appears again.) 64. Make sure you have selected your new layer (it will be highlighted blue). 65. Use the Horizontal Type Tool to change the text to a word(s) for your navigation item, change it to Location. 66. Use the guides to left align the words or to center align them. Add third navigation item: 67. Duplicate one of the layers and add a layer for your third navigation item, which could be Contact. 68. Make the other layers invisible. 69. Change the text to a word(s) for your navigation item such as the word Contact. 70. Align it. 71. You may add more navigation items. Create rollover images: 72. For each of your navigation items, we need to create rollover images for them. To do this, duplicate each layer and append the word _rollover to the name of each layer. 73. In the Layers panel, you should now have at least 6 layers. If you choose the same names as the examples in this document, you have Products, Products_rollover, Location, Location_rollover, Contact, and Contact_rollover. 74. For the first rollover navigation item (Products rollover), use the Horizontal Text Tool and/or Blending Options to change the text. Some ideas are to change the color of the text, warp the text, put a stroke about the text, and put a glow. You can also change the background color. Saving your images: 75. Save your file as navbar.psd. 76. You need to save each of the layers as an image. 77. Using the eye icon in the Layers panel, make the first navigation item (Products) visible and the rest of them invisible. 78. On the main menu, select the File Save for Web & Devices option. Page 7 of 8

79. In the Save for Web & Devices window, select the PNG-24 option for the Preset. Click the Save button. 80. In the Save Optimized As window, enter nav1.png for the filename. Click the Save button. 81. Using the eye icon in the Layers panel, make the rollover layer for the first navigation item (Products rollover) visible and the rest of them invisible. 82. On the main menu, select the File Save for Web & Devices option. 83. In the Save for Web & Devices window, select the PNG-24 option for the Preset. Click the Save button. 84. In the Save Optimized As window, enter rollover1.png for the filename. Click the Save button. 85. Repeat this for the other navigation items just changing the number accordingly. Here are examples of navigation files: Nav Nav Nav Image Item Filename Rollover Image Rollover Filename Products nav1.png rollover1.png Location nav2.png rollover2.png Contact nav3.png rollover3.png Submitting the project 86. In your photoshop folder (lastname_firstname_photoshop), you should have a minimum 9 files: header.psd header.png navbar.psd nav1.png nav2.png nav3.png rollover1.png rollover2.png rollover3.png 87. Compress your entire photoshop folder to lastname_firstname_photoshop.zip. On the Mac side, right click on the folder or click on the Action pulldown (the icon looks like a gear). Select the Compress "lastname_firstname_photoshop.zip" option. On the Windows side, right click on the folder. Select the 7-Zip --> Add to "lastname_firstname_photoshop.zip" option. 88. Submit your project on Blackboard (http://blackboard.usc.edu) under Assignments. Make sure you submit the lastname_firstname_photoshop.zip file. Page 8 of 8