3-D Buttons In Three Steps

Let's make a button It is the Corel Palette Shape again. Just follow the three steps given below.

First Step: Create the basic elements Open the Corel Draw "Palette Shape.TIF" in Photoshop. Relabel Background to Palette Shape. Create the Gray Background layer (Layer 1). Click on the "Create New Layer" Icon. Relabel "Layer 1" to Gray Background. Select the entire layer (Ctrl + A). Fill the selection with 50% gray (Edit > Fill... > Use: 50% gray) Create layer 2. Duplicate Palette Shape ("Click, drag, and drop" the Palette Shape Background on the "Create New Layer" icon). Move the Palette Shape copy to the top layer position (click, drag, and drop). Relabel "layer 2" to Button Face (Double click on "layer 2" to open the "Layers Option" Dialog Box). Create the Button Face color. Click on the the Foreground "Color Patch" in the Toolbox to open the "Color Picker" and reset the HSB values as follows: H: value set to 262 S: value set to 100 B: value set to 90 Fill the Button Face with the new Foreground Color. Select the "Paint Bucket Tool" (K key). Click the cursor tip inside the Button Face shape.

Your Layers Palette should be looking similar to the sample to the right.

Second Step: Add the 3D elements Duplicate the Button Face layer twice (Drag the Button Face layer to the "Create New Layer" Icon twice). Move the Button Face layer above the two copy layers (click, drag, and drop). Relabel the top copy Highlight (Double click on the layer to open the "Layers Options"). Relabel the other copy Shadow (Double click on the layer to open the "Layers Options"). Colorize each to their proper values. Click on the Highlight layer. Colorize the highlight to white (Image > Adjust > Hue/Saturation...). Check select Preview. Set Lightness value to +100. Click on the Shadow layer. Colorize the shadow to black (Image > Adjust > Hue/Saturation....) Check select Preview. Set Lightness value to -100 Position the Highlight and Shadow. Activate the Highlight layer. Nudge up and to the left by 1 click each.(Arrow key up and arrow key left by 1 click while holding down the Ctrl key). Activate the Shadow layer. Nudge down and to the right 1 click each.(Arrow key down and arrow key right by 1 click while holding down the "Ctrl key"). Soften both the Highlight and Shadow for realism. Activate the Highlight layer. Add a slight blur (Filter > Blur > Gaussian Blur > Radius: value .03 Pixel). Activate the Shadow layer. Add a slight blur (Filter > Blur > Gaussian Blur > Radius: value .03 Pixel). Recolor the Highlight for harmony. Change the foreground color to H:247, S: 42, and B: 100. Select the "Paint Bucket" from the Toolbox. Select the Highlight layer. Click the "Paint Bucket" tool tip in the "button shape".

Your Layers Palette should be looking similar to the sample to the right.

Third Step Create an Intermediate Shadow and Highlight layers to add to the realism. The final layers palette will look like this multi-layered sample to the right. Compare this against the previous sample.

Notes On The Previous Action

Mixing colors using reduced Opacity is a sure fire way to make colors and images work together harmoniously.

Click Next for Button continuation, Drop Shadow.

Real World Example File Formats
Introduction to Web Design with Adobe Photoshop | Table of Contents
Drop Shadow