This comprehensive tutorial will give you the information you need to create a
push-button graphic effect for your website.You will need Photoshop 6 or
higher and a HTML editor such as Visual Web Developer Express.
Demo - Click on image:
Photoshop tutorial.
Open an 800px x 600px new image with white background on the base layer.
Double-click base layer to unlock it.
Add a new transparent layer on top of base layer.
Choose a medium color for foreground.
Draw a wide rectangle with a round rectangle tool (U).
Drag the layer of the rectangle to make a copy.
Select the "Move" tool (V) while the top rectangle layer is highlighted.
Move the rectangle with up the arrow key until the rectangle is above the lower rectangle and no white space is visible.
Select the upper rectangle layer:
Select "Layer", "Layer Styles", "Bevel and Emboss"
Style: Inner Bevel
Technique: Smooth
Depth: 100%
Direction: Up
Size: 10px
Soften: 0px
Angle: 120 degrees
Global Light: checked
Altitude: 30 degrees
Gloss Contour: linear
Anti-aliased: unchecked
Hightlight Mode: Screen
Opacity: 75%
Shadow Mode: Multiply
Color: Black
Opacity: 75%
Select the lower rectangle layer:
Everything the same as upper rectangle except - Size: 7px
Select "Color Overlay"
Blend Mode: Difference
Opacity: 10%
Drag the base layer to the trash can icon to create a transparent background.
Merge all layers.
Select "Layers", "Merge Visible" or Ctl-Shift-E.
Select "Image", "Trim...":
Based on: "Transparent Pixels"
Trim Away: "Top, Bottom, Left, Right" check boxes selected
Select "Image", "Image Size":
Height: 96px
Scale Styles: checked
Constrain Proportions: checked
Resample Image: Bicubic Sharper
Select "Crop Tool" (C).
Click from the outside of the upper left-hand corner of the cropped image and drag right and down to select a few pixel left of the right-hand edge of image.
Select "File", "Save for Web...":
Preset: PNG-24
Interlaced: Unchecked
Transparency: checked
Click "Save" and choose image folder for web site.
Select "Window", "History" and select one step above the latest action.
Select "Crop Tool" (C).
Click from outside of the upper right-hand corner of the cropped image and drag left and down to select a
few pixels of the right hand image.
Select "File", "Save for Web...":
Preset: PNG-24
Interlaced: Unchecked
Transparency: checked
Click "Save" and choose image folder for web site.
HTML/CSS tutorial.
Create a button on the HTML page.
Example:
Create a style sheet that will utilize a "Sliding Doors" effect. Click ((
here)) for a good explanation of this effect.
Example:
Thee CSS code can be tweaked to suite different size buttons.
Click
((here)) for the project code.