Photoshop CS6 Section Notes 03

Transcription

1 Photoshop CS6 Section Notes 03 by Dr. Jim Watrous Objectives Converting Grayscale Photoshop file to RGB color files Creating and Saving a Separate Set of Color Swatches Loading and Using a Saved Color Swatch file to Recolor a Grayscale file Capturing Print Screens in Photoshop and using the Color picker to create a Color Swatch file for the Captured Print Screens Reviewing Three Similar Web Sites and evaluating their Color Schemes based on Jason Beaird's textbook Chapter 2 J. Watrous Page 1 of 14 version 5

2 Section 3 Adobe Photoshop CS6 for Web Design Spring 2014 Part A 1) Re-open your grayscale layout from Chapter 1 of Beaird s textbook (2nd or 1st edition). Choose Image > Mode > RGB Color. When this Window appears, make sure that you choose the Don t Merge choice. Do a Save As and change the file name to FloridaTileLayout_RGB.psd. 2) The following images are from Jason Beaird's first edition (Pages 62 through 66.): Image of Jason Beaird's "The Principles of Beautiful Web Design", 1st ed., 2007, Sitepoint Pub., page 62. J. Watrous Page 2 of 14 version 5

3 Section 3 Adobe Photoshop CS6 for Web Design Spring 2014 Image of Jason Beaird's "The Principles of Beautiful Web Design", 1st ed., 2007, Sitepoint Pub., page 63. J. Watrous Page 3 of 14 version 5

4 Image of Jason Beaird's "The Principles of Beautiful Web Design", 1st ed., 2007, Sitepoint Pub., page 64. J. Watrous Page 4 of 14 version 5

5 Section 3 Adobe Photoshop CS6 for Web Design Spring 2014 Image of Jason Beaird's "The Principles of Beautiful Web Design", 1st ed., 2007, Sitepoint Pub., page 65. J. Watrous Page 5 of 14 version 5

6 Image of Jason Beaird's "The Principles of Beautiful Web Design", 1st ed., 2007, Sitepoint Pub., page 66. For the image of Jason Beaid's page 65 above, the Gallery area will be left as it is in the grayscale without an image at this time. However, the general background behind the White Gallery background is to be changed from the current gray color to the deep blue color swatch as shown on page 9 in this note section 03. Also, note that I wrote color scheme values in decimal form on the bottom of page 4 image from Jason Beaird's book. 3) Go to Edit > Preset Manager > and set the Preset Type to Swatches. Select the swatch in the upper left corner. Then hold down the Shift Key and select the last swatch in the last row. Press the Delete button in this window to remove all color swatches. This leaves the Swatch window empty. Press the Done button. This procedure allows us to fill the Swatch panel with specific colors. Once we have filled the swatch panel with all the colors wanted, we can save this swatch group as a special file to preserve the colors selected. Currently, the swatch palette is empty and appears as shown below. J. Watrous Page 6 of 14 version 5

7 In this example, the file is grayscale and we are going create the colors on page 64 of Beaird s textbook (1st edition - see above). In part B below, we are going to use the color picker to select the color of an existing Web design and put them in the swatch palette. Click on the Foreground color in the Toolbox to bring up the Color Picker. J. Watrous Page 7 of 14 version 5

8 Enter the one of the Hexadecimal colors listed at the bottom of page 64 in Beaid s textbook as indicated in the figure above. Click the Add to Swatches button in the Color Picker Window. This brings up a Window for naming the Swatch just created. Click the OK button to set this color in the Swatch Palette. Now enter the second Hexadecimal color on page 64. Click the Add to Swatches button and name it #7F3432 a deep maroon color. Click the OK button on the name window to set this second color. Click the Swatch Palette menu in the right hand corner indicated by the red circle to bring up its menu, which is displayed on the right. First select the Large List choice to display your swatch panel with the large color thumbnail and its name as shown below. Next, go back to this menu and select the Save Swatches choice. In the window that comes up browse to the Part A of the Assignment folder and Save the Swatches. J. Watrous Page 8 of 14 version 5

9 Part A Next, use the colors in the swatch palette to color each part of the web design as seen on page 65 in Beaird s textbook. Do not add an image to the design as Jason did on page 65. To this gallery area complete the following modifications: 1) Select the white boarder with the magic wand tool; 2) add a layer above the Gallery Bkgd layer; 3) select the new layer and name it Gallery boarder; 4) hit the D key to set default colors for the foreground and background colors to black & white and then press the Ctrl Key & hit the Backspace key to fill the selection with white; 5) select the Gallery Bkgd layer (in the layer panel) & Ctrl click the layer thumbnail to select this rectangle of black color; 6) select the rectangle marquee tool; 7) hold down the shift key & position the start location for the Marquee tool at (2600, 800); 8) drag up and to the left edge at (0,500); 9) release mouse button to make a larger rectangle (increasing the original size of the Gallery Bkgd) 10) in the swatch panel select the deep blue color; 11) press the Alt key & hit the Backspace key to fill the gallery bkgd with the deep blue color. Open the Estimator group and select the form Bkgd. Ctrl click the layer thumbnail to select the form bkgd color. In the Swatches panel select the sand color and then hold down the Alt key & hit the backspace key to fill this area with the sand color. Next, add a stroke to each of the White boxes in the Estimator form by pressing the fx button at the bottom of the layer panel and selecting the Stroke effect. Set the stroke size to 2 px and color to black. Make sure that you select the Outside option and click OK. Once an effect has been placed on a layer, the effect can be copied to all the other layers with white rectangles for entry bkgd. Hold down the Alt key, click the mouse button and drag the effect fx to a new layer. Repeat this operation until all white entry bkgd layers have this effect. J. Watrous Page 9 of 14 version 5

10 In the content group, select the content image layer. Next, Ctrl click the layers thumbnail to create a selection around the gray color. Hit the D key to set the default colors (B/W). In the Swatches panel select the deep blue color. In the Tool Box select the Gradient tool. While holding down the shift key, drag from the top of the rectangular selection to the bottom of the rectangular selection. This will create a blue to white gradient in the Content image area. Save your colored Florida Tile file in part A of assignment 03. When you complete Part A, it will contain the Florida file in color and the swatch file of six colors. Save all work in a sub folder label Part A that is inside the folder named YourLastName_ A03 on your Flash data drive. J. Watrous Page 10 of 14 version 5

11 The following figures are the new color results. All layers are shown in the set of layer palettes (panels) pictures below. J. Watrous Page 11 of 14 version 5

12 J. Watrous Page 12 of 14 version 5

13 Part B 1) Find three Web sites that ONLY sell Flowers and Flower Arrangements in our local region. Do not select chain flower shops. For the first Web site do a Print Screen. 2) Start Photoshop and select File New. In the File New window make sure that the Preset is set to Clipboard. This will set the canvas size to the size of the desktop for the current selected resolution of the display monitor. This is shown in the figure below. Add a group folder and name it the same name as the domain name of the first Web site you are capturing. Add a layer and name it Home Page. Go back to the Browser of this first Web site and J. Watrous Page 13 of 14 version 5

14 do a Print Screen again. Return to Photoshop and do Edit > Paste (or Ctrl + V). Add another layer and name it Product Page. Return to the Browser and go to its product page. Do a Print Screen of the Product page. Return to Photoshop and Ctrl + V to paste the Product page on the Product page layer. Close the group folder and add a second group folder. Name this second group folder the same name as the second home page of the second Web site. Add a layer and name it Home Page. Return to the Browser and do a Print Screen of the Home page for the second Web site. Return to Photoshop and do Ctrl + V to paste its home page on the Home Page layer. Add a layer and name it Product page. Return to the Browser and go to the product page of this second site. Do a Print Screen of the Product page. Return to Photoshop and do a Ctrl + V to paste its product page on the Product Page layer. Close this second group folder and add a third group folder. Repeat the above steps to capture the Home and Product pages. You have one Photoshop file and three group folders in which each group folder has two layers. For each layer (Web Page) clear the color swatch panel of all colors using the Edit > Preset Manager - Swatches. Select and delete all colors present as was done in part A for the first Web site. (Keep in mind that the color swatch palette can be reset to the default set of colors by using the Swatch Panel Menu or cleared out again to create a new set of colors. For the first design pick the main colors that represent the design for that page using the foreground color picker. However, this time the colors will be selected with the eye-dropper. When you move the mouse out of the color picker window, it becomes an eye-dropper. Do not select colors from images on the Web page, but the general colors of the page itself and text color. Once you have clicked on a color (such as the background in the content area), click the Add to Swatches button and give it an appropriate name starting with the hexadecimal color number for that color. This name should include an approximate color name and location of the Web site page. For example, the name of a color swatch could be "#FFFFFF - White - Bkgd color". Affer you have selected all the appropriate colors in the design, Save this color swatch to the Part B sub folder of this assignment. Make sure that the Save-In box at the top of the Save As window is directed to your Part B sub-folder in your assignment folder of your Flash data drive and not the Hard disk label C:\ drive. The name of the Swatch file must be the name of the Web site chosen. Also, clear the color swatch panel each time (Using the Preset Manager) before picking another set of colors for the next web page. 3) In a word document discuss the color schemes used for each Web site, as discussed in Chapter two of the textbook by Jason Beaird. Compare in terms of the list on page 49 (1st edition) or page 55 (2nd edition) and the examples listed on pages 49 through 58 (1st edition) or pages 55 through 70 (2nd edition). 4) What do think would improve each of these Web sites? 6) Print out your word document with the discussion for each Web site. Also, save this Word document in part B of this assignment. Follow the instructions in the Assignment 03 for the details of what and how to turn in your work. J. Watrous Page 14 of 14 version 5