Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Drop Shadow

April 1, 1998

Make It Float

Bonus Image Do it with a drop shadow.

Resize The Canvas

The current Photoshop canvas size is too small to encompass the drop shadow area. Increase it by approximately 10% and put the size increase to the right and bottom of the image (Image > Canvas Size >).

  • Width: Approximately +10%.
  • Height: Approximately +10%
  • Anchor: Top left corner.
Bonus Image

Continuation: Use the sample as a guide
  • Change the Gray Background to white.
    • Click activate the Gray Background layer.
    • Select the entire layer (Ctrl + A).
    • Fill the selection with white (Edit > Fill > Use: White).

  • Place the Palette Shape Layer above the new White Background.
Bonus Image
  • Duplicate the Palette Shape layer. ("drag" it to the "Create New Layers" Icon.

  • Relabel the layer to Shadow (Double click on the copy layer to open the "Layers Options").

Turn the new Shadow into the Drop Shadow Layer.
  1. Relabel Shadow to Drop Shadow.

  2. Nudge the Drop Shadow into position.
    • Press and hold the "Ctrl" key.
    • Press both the "down" and the "right" arrow keys seven times.
    • Press the down key 3 more times.
    • Release the "Ctrl" key.

  3. Blur the Drop Shadow image to soften the lighting.
    • Filter > Blur > Gaussian Blur... set to value 2.5.

  4. Lower the "Layers Opacity" to 44%. This works especially well with texture backgrounds. It allows the texture to show through the shadow creating a very believable drop shadow.

Bonus Image


Click Next to learn about creating a frame with Bevel.


3-D Buttons In Three Steps
Introduction to Web Design with Adobe Photoshop | Table of Contents
Beveled Frame Part 1


Up to => Home / Authoring / Graphics / Tools / Photoshop




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers