Defining the Web Page

Let’s access some of the images you’ve created up to this point in the book. We’ll use them to piece together the home page of Jonathan Bing’s website.

1. Fire up Photoshop. Then, open the following images you’ve created so far:

   • Bing_logo.psd

   • Bing_titlebar.psd

   • Bing_webheader.psd

     Note 

     You can find these files in the Chapter 7 folder of the downloadable files, available at www.wordware.com/files/webdesign.

     
     Figure 7-1: Using some of your images for the Bing website

2. In Photoshop, go to File4New. Create a new image that is sized for your web page. Let’s size for an 800x600 screen dimension. Thus, define your new image as follows, shown in Figure 7-2:

   • Width: 775 pixels

   • Height: 420 pixels

   • Resolution: 72 pixels/inch

   • Color Mode: RGB Color 8 bit

   • Background Contents: Transparent

     
     Figure 7-2: Defining a web page for 800x600 screen resolution

3. Click the OK button. This is the image onto which you’ll drag all other images, as shown in Figure 7-3.

   
   Figure 7-3: Defining the Bing home page

Adding a Watermark to your Images

Surf the web and you’ll probably find several sites that use water- marks. This is especially true for sites dedicated to white-collar type businesses such as the one that belongs to our attorney Mr. Bing.

Watermarks are translucent designs. You’ve probably seen them mostly on fancy letterhead. We can reproduce watermark effects within Photoshop to give your website an air of professionalism.

1. Click on the Bing_webheader.psd image. Then, create a new layer within this image. Call this new layer watermark.

2. A great way to make watermarks in Photoshop is through the Wingdings font. If it’s not open already, access the Character palette by selecting Window ▶Character.

3. In the Character palette, define the following settings:

   • Font Family: Wingdings 2

   • Font Size: 72 pt

   • Color: RGB = 13, 31, 1244.

     
     Figure 7-4: Defining the character for your watermark

4. Select the Text tool. Click the watermark layer and then type the characters ab in lowercase. You should see two curly leaf characters display, as shown in Figure 7-5.

   
   Figure 7-5: Creating a watermark

5. With the watermark layer still selected, change the Blending Mode drop-down field from Normal to Overlay, as shown in Figure 7-6.

   
   Figure 7-6: Changing the layer’s blending mode from Normal to Overlay

   Notice the watermark now appears transparent.

6. With the watermark layer still selected, press Ctrl+T to transform your image. Hold down the Shift key and stretch your watermark so it fills most of the page.

7. Rotate your watermark by placing your cursor near one of the corners of the Transform box that surrounds your image. Your cursor turns into a curved arrow. Click and drag your mouse to the right or left to rotate your image, as shown in Figure 7-7. Press Enter to complete the transformation.

   
   Figure 7-7: Transforming and rotating your watermark

8. To remove the areas of watermark that are not overlaid, you’ll first need to rasterize your text. Right-click in the watermark layer. Then select Rasterize Layer.

9. Select the web header layer. Then, select the Magic Wand tool.

10. In the options bar, change the Tolerance to 100. Tolerance defines the areas Photoshop will select depending on the difference shades of color. A low tolerance means Photoshop is picky. A high tolerance (like 100) means Photoshop is not picky in its selections.

11. Select the web header layer. Click somewhere within the web header area of your image, as shown in Figure 7-8.

    
    Figure 7-8: Selecting an area within your layer

12. Click on the watermark layer. Then, select Select ▶Inverse from the menu bar, as shown in Figure 7-9.

    
    Figure 7-9: Selecting the inverse of a selection

    Caution 

    In Photoshop CS2, users can no longer select an image within a layer by holding down the Control key and clicking. You’ll now need to use the Magic Wand tool to perform this action. If you’re familiar with older versions of Photoshop, this new method may seem a little foreign. Don’t worry, though. You’ll get used to it.

13. Once you’ve selected Inverse, hit the Delete key on your keyboard. Notice the unwanted portion of your watermark is now gone, as shown in Figure 7-10.

    
    Figure 7-10: Finishing up your watermarked web header

14. Save your web header. Then, combine all layers together by pressing Shift+Ctrl+E (or selecting Layer ▶Merge Visible from the menu bar).

Adding Duotone Tinting to Images

Duotone tinting is where images use only two colors, such as two shades of blue. The images in our Bing_titlebar.psd file are perfect candidates for a duotone effect. Perform the following steps to add duotone to this image:

1. Select the Bing_titlebar.psd image. Merge all visible layers together by pressing Shift+Ctrl+E.

2. Create a new layer in this image. You can call this new layer duotone.

3. Double-click on the Foreground color. The Color Picker dialog box displays.

4. Enter an RGB color of 13, 31, 124, then press OK.

5. Select the Paint Bucket tool. Select the duotone layer, then click within your image. The entire image should fill with your blue color, as shown in Figure 7-11.

   
   Figure 7-11: Defining your duotone layer

6. In the duotone layer, change the Blending Mode drop-down field from Normal to Color, as shown in Figure 7-12.

   
   Figure 7-12: Changing the blending mode for your duotone tinting

7. Notice your image now has a blue duotone tint to it, displayed in Figure 7-13. However, it looks a little dark. Let’s lighten it up a bit.

   
   Figure 7-13: Adding duotone tinting to your image

8. You can lessen the duotone effect by clicking on your first layer (not the duotone layer), and then selecting Image ▶Adjustments ▶Desaturate. This removes color from your image, resulting in a lightened effect, as shown in Figure 7-14.

   
   Figure 7-14: Lessening duotone tinting through desaturation

9. We don’t need this entire image, though. First, merge all visible areas of this image by pressing Shift+Ctrl+E.

10. Select the Elliptical Marquee tool. In the options bar, change Feather to 50 px. Then, draw an elliptical selection around your image, as shown in Figure 7-15.

    
    Figure 7-15: Creating a selection around your duotone image

11. From the menu bar, choose Select ▶Inverse. Then hit the Delete key. Your screen should look like Figure 7-16.

    
    Figure 7-16: Deleting unwanted areas from your image

12. Save your changes. We’re now ready to pull all our images onto a single web page.