Home : Web Page Shadow

How To Create a Web Page Shadow
Using Photoshop Slice Tool and HTML

Creating a web page shadow around your pages adds a professional, 3D effect to any site. There are many ways to accomplish this task, but the technique that I am going to demonstrate is pretty easy for a beginner to execute. I recommend that you first:

Read the high level process below
Download the video supplement and then
Watch the video and follow along with the printed supplement.

High Level Process

Create 2 blank documents in Photoshop, one smaller than the other
On the smaller one, add a Photoshop drop shadow all the way around image
Drag the smaller document on top of the larger one to create one flattened image
Use the Photoshop Slice Tool to slice the image into 3 smaller images and upload as 3 separate gifs
Create a table in your HTML document within the body to hold gifs and content

Video Supplement--Read as you Watch

I created this supplement in Powerpoint for you to use as you watch the video. It should help you better understand the process and give you something to take notes on as you go.

The supplement has several screen prints showing dialog boxes in Photoshop with the exact settings visable as well as screen prints of HTML documents showing the code that you will use to create the shadow.

Click here to download your free copy of How To Create a Web Page Shadow.

Web Page Shadow Video Tutorial--Watch Now

Create An Web Page Shadow in Photoshop

Learn how to create an HTML drop shadow all the way around your web pages for a professional, 3D web page effect. I'll show you step by step how to do it using Photoshop and HTML.

For more information, read my article on How To Create an HTML Drop Shadow.

HTML Drop Shadow Code

Once you get your shadow gif images ready, you will need to pull them into your HTML document. Feel free to copy the code below and update as needed.

<body style="background-color: #ffffff"> <TABLE width="950" cellspacing="0" cellpadding="0" align="center"> <tr> <td> <img src="http://www.your-domain-name.com/images/your-top-shadow-name.gif" align="center" border="0" alt="Keyword Rich Description"> </td> </tr> <tr style="background-image: url(http://www.your-domain-name.com/images/your-middle-shadow-name.gif)"> <td align="center"> <p>This is the content area of your site.</p> <p>This is the content area of your site.</p> <p>This is the content area of your site.</p> <p>This is the content area of your site.</p> </tr> <tr> <td> <img src="http://www.your-domain-name.com/images/your-bottom-shadow-name.gif" align="center" border="0" alt="Keyword Rich Description"> </td> </tr> </table> </body>

People Interested in Web Page Graphics Also Viewed:

	How To Position Images Learn all about positioning images so you can get them exactly where you want them on your webpages. Find the exact code for all of your image positioning challenges including wrapping text and objects around images and lining them up in a row or column.
	How To Size Images As you build out your site, you will need web page graphics ranging from tiny 16 pixel by 16 pixel (for favicons, buttons or table images) all the way up to large http graphics that are the entire width of a webpage. Learn how to get your images to the perfect size for the intended spot on your site.
	Creating Image Links If you are going to go to the trouble of placing web site images on your site, you might as well make them into image links whenever possible. Learning how to make image links and using them often will greatly improve site navigation for your visitors and help your monetization efforts.
	Why Tag Images? If a webmaster has used the html image alt tag properly, you will see a small box of text appear when you hover your mouse over an image. A huge number of visitors find my site because I purposely add a keyword-rich alt tag to every single web site image that I place on my sites. Learn how here.
	Shopping Images Not all website graphic sources are created equal. Read my recommendations on where to find free web site images, on buying images inexpensively and on where to find a great selection of clipart. Also, watch a video tutorial on scanning images.