Create Web Page

Mobile Services

How To Create A Web Page Shadow Using Photoshop Slice Tool And Html Coding

For an easy-to-implement web page effect, add a Web Page Shadow all the way around your webpages using the Photoshop Slice Tool and HTML coding. Doing so not only adds visual interest but also gives your website a professional look. Read these step by step instructions or watch a video tutorial and follow along with a PDF 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

Step By Step:

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.

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.

Add a Photoshop Drop Shadow to the smaller document.

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)

Drag the smaller document on top of the larger document to create one image. 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.
Slice the document into 3 smaller images horizontally.

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

Now you have one document sliced horizontally into 3 smaller images. The next step is to “Save For Web” and upload each image as a separate gif. In the “Save For Web” dialog box, save each slice separately by clicking on the slice and naming it.
Upload the 3 gif images as usual.
Create a table in the body section of your HTML document to hold the shadow gif images and your content. 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.

Creating a web page shadow using the Photoshop Slice Tool and HTML coding ensures that you do not end up with a jagged, unprofessional looking shadow. If you use this process, you will undoubtedly achieve the results you are looking for.

About the Author:
Visit where you can watch a Video Tutorial showing step by step instructions on How To Create a Web Page Shadow.

Also download a Free PDF Supplement showing Photoshop Slice Tool screen prints and copy the exact HTML Drop Shadow coding required to create this web page effect.


10 thoughts on “Create Web Page”

  1. what is the simplest way to create web page where you can order things and pay for them?
    My friend(graphic designer) asked me for a web page where you can order his work and pay for it. It will not be a huge complex webpage but something simple with about 15 things to sell on it. Is there any way to do it without PHP, MYSQL knowledge. I know html, css and flash. Heeeelp!

  2. How to create a web page?
    Create web page, launch it and keep it in the top ten of first page when people key in search engines.

  3. The launch is very easy: You need a domain and a web host and you are ready to go.

    Personally, I would recommend you check out E2 web hosting. They offer great hosting for a very affordable price.
    You get a site builder and you can install most of the popular website scripts with one single click. Install for example Concrete5 and you will be able to create a nice looking website in only a few minutes.

    Here’s a link to check them out:

    I host most of my sites with them and I’m very satisfied with their service.

    Hope this helps.

  4. How can I create a dynamic web page?
    I need to create web page based in database information that may change.

  5. It depends on many factors: the platform you will run your site being the most important. Then there is what languages you (or your employees) already know. Then the performance/scalability issue.

    My choice for the servers on the Windows platform is using C# in ASP.NET pages.
    For Linux/UNIX I have seen excellent results with PHP but Perl has better performance.
    Then there is Java with JSP which has a very poor performance and scalability issues, but the language is very popular and arguably “tends” to let you write more dependable code.

  6. How do I create a web page that has a rating system and comment board?
    I’m trying to create a page where people can login as themselves under their own User ID/password and information, possibly creating their own profile, then using the aforementioned ID to rate a rateable item and comment. Basically how does with their user reviews and rating system, because I want the ratings to come together in a separate universal rating. A star rating like that of Amazon’s is kind of what I’m looking for. How do they do that? A link to a tutorial is even a sufficient answer. I’m trying to avoid spending a ton on books, but if you have a good recommendation, I am not above that. I am not new to basic web design, but clearly new to the advanced aspects.

  7. What you’re asking for is done, in some ways, in a number of pre-canned solutions.

    One option would be to use OSCommerce — but hack it up so it doesn’t allow people to buy the things you list; it simply lists products and lets people rate them / make comments.

    You can get help with modding OSCommerce from

  8. best software to use to create a web page?
    I want to create a simple but a attractive website for someone, but I havent done it before.. I was wondering what is the best and easy to learn software for creating web pages.. Any recommendations welcome 🙂

  9. try joomla. the best CMS.. 🙂 its a free and open source thing that can be installed to your host andonce installed you can change your website in any browser. (of course you should have the admin password). to make a simple website you only need a walkthrough of about 2 or 3 hours. no need to learn HTML CSS JS or PHP. try it.

    ps-scroll doen and see who uses joomla. much more easier and cheaper than dreamveawer

Comments are closed.