[an error occurred while processing this directive]

Register with psptips.com Home   Email   Glossary   Links   Membership   Message Board   Filters       PICO       Installing       Filter FAQ   Product Reviews   Free Stuff   Wallpaper Works ------------ Seventh Dimension ------------ Sixth Dimension    Effects    Photo Manipulation    Text    Tools ------------ Fifth Dimension   Basic Tools   Layers   Photo Retouching   Readers Tips   Text Effects   What's New   Web Effects ------------ Fourth Dimension   Basic Tools   FAQ   Image Effects   Photo Manipulation   Readers Tips   Text Effects   Web Effects

Open the image you plan to use for the left edge and top border.

Open a new window, making it the same dimensions as your image. Make sure the background color is as close to the background color of your webpage as possible. Remember, drop shadows don't display well on multi-colored background, so if you intend to use a multi-colored background it might be wise to skip the drop-shadow step.

Useing the Freehand or Point to Point Selection tool, select the area of the image you plan to use for the left edge and top banner. Have anti-alias unchecked. (If you leave anti-alias checked, there will be a white edgeing between your image and it's dropshadow).

Press CTRL + C to copy your selection.

Ativate the new window.
Press CTRL + L to paste the clipboard contents as a new layer. The image may not be positioned properly, so holding the mouse button in, move the image to the top left corner of the window

With the Magic Wand select the white area of the image. Press CTRL + SHIFT + I to invert the selection.

Add a drop shadow.

Drop shadow specs.:

• opacity 65
• blur 13
• offset Horizontal:7 Vertical:7

Add a new layer. Press CTRL + D to clear any selections.

With the Rectangular Selection tool select the area for your first button.

Floodfill with white.

Settings

• solid
• tolerance 20
• opacity 25
• blend mode (under options on the Control Palette) exclusion

Apply a Chisel effect (Image | Effects | Chisel)

Settings:

• size 2
• background color

The Second Button

• Press CTRL + C to copy the button.
• Press ctrl + E to paste the button as a transparent selection.
• Position the new button. You may not be able to see the button at all if it pops up in the white area. Move the pasted button over top of the image to see it.
• Apply the Chisel effect again using the same settings.

• Press CTRL + C to copy the second button.
• Press CTRL + E to paste it as the third button.
• Repeat for as many buttons as you need ( Starting with button three, subsequent buttons will pop up with the chisel effect intact).

Add Text

Since this is not a text tutorial, I'll just give you a simple text effect to add to the image. You can add your favorite text effect and bypass the following steps completely.

Add Text from a Different Tutorial

• Add a new Layer
• Be sure you've saved the text image with a transparent background, no drop shadow.
• Select the text, copy and paste into the new image using CTRL + L
• Add a dropshadow or cutout.

Create This Text

• Add another new layer.
• Add your text to this layer using white as your foreground color. Have anti-alias and floating checked in the text box.

  Add a drop shadow - twice.

  Settings

  • Opacity: 100
  • Blur:13
  • Offset:
    horiz.: 1
    vert.: 1

• Deselect the selected area.
• On the Layer Palette, set the blend mode of this layer to Overlay
• Add button texts in the same manner.

Prepare the Image for the Web Page

On the menu bar, select Layers | Merge | Merge All

With the Rectangular Selection tool, select the entire left side of your image. Be sure to watch the co-ordinates and start the selection at 0:0.

Press CTRL + C to copy your selection and press CTRL + V to paste it to a new window.

Press CTRL + SHIFT + I to invert the selection and repeat the copy/paste prodecure.

Activate the window that contains the portion of the image that will be Header banner.

• Select the top half with the Cropping tool. Be careful to not crop off part of your drop shadow, nothing looks worse than a poorly cropped image with a portion of the drop shadow cut off.
• When your selection is complete, double click inside the selected are to remove excess white area.

Great, now you've got two images, but what do yo do with them? Why not stop over here and find out how to piece them back together again on your webpage.