Photoshop Drop Shadow
For Web Site Images

When I was building my first site, Theme Party Queen.com, I spent most of my time early on writing content and uploading pages to the web.

I did not spend much time thinking about the quality of my web site images, but once I started attracting a fair amount of visitors, I began re-working some pages. In my opinion, the look of my site changed dramatically just by adding a Photoshop Drop Shadow around my most important images like this wine decanter.

To learn how I did it, you can either read step by step instructions or watch my Photoshop drop shadow tutorial below.

Photoshop Shadow Written Instructions

• Open image in Adobe Photoshop and fix as needed (crop, color correction...)
• Size Image. Choose Image-Image Size, input desired width and height under pixel dimensions and check "Constrain Proportions" at bottom. Click OK.
• In the Layers Palette, change the name of the image layer to anything other than "Background"
• Create Stroke (fine white border between image and shadow; creates a 3D appearance). Choose Edit-Stroke, input width of 1 px and color matching the background of where the image will reside (white, in my wine decanter example).
• Create Photoshop Drop Shadow. Double click on the image in the Layers Palette to open the Layer Style dialog box. Check the box next to "Drop Shadow" in the upper left corner and then double click on the checked box to change the options in the middle of the screen. Use these settings to achieve the look above and click OK:
  
  
  • Blend Mode = Multiply
  • Opacity = 75%
  • Angle = 122°
  • Distance = 7px
  • Spread = 0%
  • Size = 7px
  
  
• Create a New Document that is at least 25 px all the way around larger than your image. The document should match the color of the background where the image will reside (white, in wine decanter example)
• Move the Image with the Photoshop Drop Shadow onto the new document by grabbing it from the Layers Palette. Position the image in the top left corner of the new document.
• Crop Excess Space around image being very careful not to come too close to the shadow.
• Save and Upload as usual.

Photoshop Drop Shadow Tutorial--Watch Now

Visit Our Other Image Webpages

	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.