Often you will want elements within your image positioned relative to each other.  To align elements, such as a series of buttons or type you have two options, using Guides  or using the Grid .

Using Guides
To create Guides  you must make the Rulers  visible.  Select View/Show Rulers.  The units of the Rulers depend on the setting you selected in File/Preferences /Units & Rulers.  Because you’re developing for the Internet, it’s a good idea to select Pixels  as the basic unit.  Make a guide by passing the pointer over either the horizontal or vertical Ruler and {Click}, hold, and drag the Guide  over the image.  {Release} to drop the Guide at the desired point.  By default, the Guide is blue in color.  Change the color by selecting File/Preferences/Guides & Grid .”  Make sure Snap  to Guides is enabled by selecting View/Snap To/Guides.

Open toys from the chapter006 folder and create a Vertical Guide  at 50 pixels from the left of the image.  Create two Type Layers , one with the text “Japanese Souvenirs” and one with the text “Children’s Toys”  Select the “Japanese Souvenirs” Type Layer  and drag it toward the Guide.  Notice how the edge the letter “J” snaps against the Guide.  Guides  ignore the transparent areas of a Layer and use image data to snap too.  Select the “Children’s Toys” Type Layer and drag it toward the Guide, just below the “Japanese Souvenirs” type.  Now both Type Layers are perfectly aligned.

To discard a Guide  {Click} and drag the Guide off the image. To move a Guide hold the [CTRL] key over the Guide and drag whenever you are using a tool other than the Move Tool .  Holding [CTRL] and [ALT] simultaneously switches the orientation of the Guide from vertical to horizontal or horizontal to vertical.  You can use multiple Guides .  To discard all Guides select View/Clear Guides.

Using the Grid
The Grid  works in a similar fashion to Guides  in that the content of your Layers  will snap to the lines of the Grid.  Select View/Show/Grid to display the Grid.  Make sure that Snap  to Grid is also enabled under View/Snap To/Grid.”  A light gray Grid covers the image.  To adjust the Grid setting select File/Preferences /Guides & Grid.

By now it should be evident to you that Photoshop  is a very powerful and complex program that is easy to use.  Because there are numerous image editing options and many different ways to achieve imaging goals first time users might find the program overwhelming.  We’ve reviewed the fundamental elements you’ll need to put into practice when creating images for the Internet.  We’re going to use most, if not all, of these fundamentals in the chapters ahead to create actual images for the web, including static images, buttons, navigation bars, banners, and animated GIFs.

Exercises

1. Open the gate image from the chapter006 folder.
   
   

2. Use the Selection Tool or Selection Tools of your choice to select the red fence.  (Hint:  Use Select Color Range  and adjust the Fuzziness control.  Use Quick Mask  Mode  and the Airbrush Tool  to erase any Selections  outside of the gate.)

   

   In Quick Mask  Mode  the Red Fence is clearly selected.

   

   The Quick Mask  has been made blue in the Options  dialog box

3. Change the color of the Fence using the Hue /Saturation control.  If you drag the Hue slider to 34 and the Saturation slider to -11 the fence turns yellow

          The Hue /Saturation dialog box adjusted for the image.

         

         The Gate turned Yellow