How to Create a Web Page Shadow Using Photoshop Slice Tool and HTML Coding
Create the larger of two documents in Photoshop (or another image editor)., Create the smaller of two documents in Photoshop., Add a Photoshop Drop Shadow to the smaller document., Drag the smaller document on top of the larger document to create...
Step-by-Step Guide
-
Step 1: Create the larger of two documents in Photoshop (or another image editor).
Width is the same as your website template (ex. 950 pixels).
Height does not matter but should be big enough to easily use Photoshop Slice Tool (ex. 250 pixels).
Color should be the same as your website body. -
Step 2: Create the smaller of two documents in Photoshop.
Width should be smaller than the larger document (ex. 800 pixels).
Height should be smaller than the larger document (ex. 100 pixels).
Color should be the same as your content area. , In the Layers Palette, double click on the word "Background" and change it to any other name.
This will free up functionality and allow you to easily add a drop shadow.
Open the Layers Style dialog box, click on "Drop Shadow" and set the variables as follows:
Opacity 75% Angle
-90 degrees Distance 0 px Spread 35% Size 35 px Color #7B7979 (gray shadow) , Using the examples above, this image will be 950 pixels wide by 250 pixels high with the smaller, shadowed image embedded on top of it. , Grab the Photoshop Slice Tool from the Tool Palette.
In the top toolbar, set the Style to "Fixed Size" to ensure exact proportions.
Using the 950px X 250px example, input width and height as follows:
Top slice equals 950px X 100px Middle slice equals 950px X 50px Bottom slice equals 950px X 100px You now have one document sliced horizontally into 3 smaller images. ,, Upload the 3 gif images as usual. , The first row in your table contains the top shadow gif, the middle row contains your middle shadow gif and content and the last row in your table contains the bottom shadow gif. -
Step 3: Add a Photoshop Drop Shadow to the smaller document.
-
Step 4: Drag the smaller document on top of the larger document to create one image.
-
Step 5: Slice the document into 3 smaller images horizontally.
-
Step 6: The next step is to "Save For Web" and upload each image as a separate GIF.
-
Step 7: In the "Save For Web" dialog box
-
Step 8: save each slice separately by clicking on the slice and naming it.
-
Step 9: Create a table in the body section of your HTML document to hold the shadow gif images and your content.
Detailed Guide
Width is the same as your website template (ex. 950 pixels).
Height does not matter but should be big enough to easily use Photoshop Slice Tool (ex. 250 pixels).
Color should be the same as your website body.
Width should be smaller than the larger document (ex. 800 pixels).
Height should be smaller than the larger document (ex. 100 pixels).
Color should be the same as your content area. , In the Layers Palette, double click on the word "Background" and change it to any other name.
This will free up functionality and allow you to easily add a drop shadow.
Open the Layers Style dialog box, click on "Drop Shadow" and set the variables as follows:
Opacity 75% Angle
-90 degrees Distance 0 px Spread 35% Size 35 px Color #7B7979 (gray shadow) , Using the examples above, this image will be 950 pixels wide by 250 pixels high with the smaller, shadowed image embedded on top of it. , Grab the Photoshop Slice Tool from the Tool Palette.
In the top toolbar, set the Style to "Fixed Size" to ensure exact proportions.
Using the 950px X 250px example, input width and height as follows:
Top slice equals 950px X 100px Middle slice equals 950px X 50px Bottom slice equals 950px X 100px You now have one document sliced horizontally into 3 smaller images. ,, Upload the 3 gif images as usual. , The first row in your table contains the top shadow gif, the middle row contains your middle shadow gif and content and the last row in your table contains the bottom shadow gif.
About the Author
Douglas Harvey
Committed to making practical skills accessible and understandable for everyone.
Rate This Guide
How helpful was this guide? Click to rate: