Friday, July 30, 2010

Creating a Watermark Layer

Just because the San Simeon Software group wants a minimalist website doesn’t mean this site has to be boring. Let’s create a watermark effect that will run up and down the navigational bar.
  1. Create a new layer called watermark 1.

  2. Select the Elliptical Marquee tool from the toolbox. In the options bar, make sure the Feather text box is set to 0 px.

  3. With the watermark 1 layer selected, draw an oval, as shown in figure below.


  4. In the options bar, select the Add to Selection icon. Then, click the Rectangular Marquee tool.

  5. Draw a rectangle that does not extend past the right side of the oval. Then, drag your rectangle downward. You’ve created a new watermark shape, as shown in figure below.
  6. Double-click on the foreground color from the toolbox. The Color Picker dialog box displays. Change the foreground color to white (RGB = 255, 255, 255), then press OK.
  7. Choose the Paint Bucket tool from the toolbox. Click within the watermark selection.

  8. In the watermark 1 layer, change Opacity to 20%.
  9. Press Ctrl+T to transform your watermark. Grab the right side and pull it so it’s flush with the right edge of the navigational bar, as shown in figure below.

  10. Press Ctrl+D to deselect the watermark layer.
  11. Let’s add a couple more watermarks. Right-click on the water- mark 1 layer and select Duplicate Layer. The Duplicate Layer dialog box displays.
  12. Change the name of your duplicate layer to watermark 2, then press OK. Your first watermark layer is duplicated.
  13. Select the Move tool from the toolbox. Make sure you are in the watermark 2 layer.
  14. Hold down the Shift key, then press the Down Arrow key on your keyboard 10 times. You screen should look like figure below.
In this tutorial:
  1. Designing a Modern Web Page Style
  2. The Simeon Software Group
  3. Creating the Navigation Bar Layer
  4. Creating a Watermark Layer
  5. Adding Menus to the Navigational Bar
  6. Creating Colored Menu Selections
  7. Adding Photos to Your Web Page
  8. Editing your Web Page in Dreamweaver 
  9. Creating Background Images
  10. Silver and Backgrounds

1 comment: