| For an easy-to-implement web page effect, add a | | | | Shadow" and set the variables as follows: |
| Web Page Shadow all the way around your | | | | - Opacity 75% |
| webpages using the Photoshop Slice Tool and HTML | | | | - Angle -90 degrees |
| coding. Doing so not only adds visual interest but also | | | | - Distance 0 px |
| gives your website a professional look. Read these | | | | - Spread 35% |
| step by step instructions or watch a video tutorial | | | | - Size 35 px |
| and follow along with a PDF supplement. | | | | - Color #7B7979 (gray shadow) |
| High Level Process: | | | | Drag the smaller document on top of the larger |
| - Create 2 blank documents in Photoshop, one smaller | | | | document to create one image. Using the examples |
| than the other | | | | above, this image will be 950 pixels wide by 250 |
| - On the smaller one, add a Photoshop drop shadow | | | | pixels high with the smaller, shadowed image |
| all the way around image | | | | embedded on top of it. |
| - Drag the smaller document on top of the larger one | | | | Slice the document into 3 smaller images horizontally. |
| to create one flattened image | | | | - Grab the Photoshop Slice Tool from the Tool |
| - Use the Photoshop Slice Tool to slice the image into | | | | Palette. In the top toolbar, set the Style to "Fixed |
| 3 smaller images and upload as 3 separate gif's | | | | Size" to ensure exact proportions. Using the 950px X |
| - Create a table in your HTML document within the | | | | 250px example, input width and height as follows: |
| body to hold gifs and content | | | | - Top slice equals 950px X 100px |
| Step By Step: | | | | - Middle slice equals 950px X 50px |
| - Create the larger of two documents in Photoshop | | | | - Bottom slice equals 950px X 100px |
| (or another image editor). Width is the same as your | | | | Now you have one document sliced horizontally into 3 |
| website template (ex. 950 pixels). Height does not | | | | smaller images. The next step is to "Save For Web" |
| matter but should be big enough to easily use | | | | and upload each image as a separate gif. In the |
| Photoshop Slice Tool (ex. 250 pixels). Color should be | | | | "Save For Web" dialog box, save each slice |
| the same as your website body. | | | | separately by clicking on the slice and naming it. |
| - Create the smaller of two documents in Photoshop. | | | | Upload the 3 gif images as usual. |
| Width should be smaller than the larger document | | | | Create a table in the body section of your HTML |
| (ex. 800 pixels). Height should be smaller than the | | | | document to hold the shadow gif images and your |
| larger document (ex. 100 pixels). Color should be the | | | | content. The first row in your table contains the top |
| same as your content area. | | | | shadow gif, the middle row contains your middle |
| - Add a Photoshop Drop Shadow to the smaller | | | | shadow gif and content and the last row in your |
| document. | | | | table contains the bottom shadow gif. |
| - In the Layers Palette, double click on the word | | | | Creating a web page shadow using the Photoshop |
| "Background" and change it to any other name. This | | | | Slice Tool and HTML coding ensures that you do not |
| will free up functionality and allow you to easily add a | | | | end up with a jagged, unprofessional looking shadow. |
| drop shadow. | | | | If you use this process, you will undoubtedly achieve |
| - Open the Layers Style dialog box, click on "Drop | | | | the results you are looking for. |