The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

APPLYING SHADOW EFFECTS TO PHOTOS & WEB DESIGN ELEMENTS USING FIREWORKS CS3PS: I used FWCS3, however, as the tutorial does not use any commands or filters that are not already found in most versions of FWs,
you should be able to achieve the same results regardless of version used :-)

This is what we are going to create and I’ll show a couple of other variations along the way...-------------------------------------
Step 1:
Create a new document – I used a 300px x 300px canvas.Place the image you want to use onto the canvas.

---------------------------------------Step 2:
Draw a square over the image... Colour Fill #666666I usually use a box 20px less in width than the image used... height can be anything as long as it’s no higher than the image used.
This box is going to be the shadow under the photo. See Image below:

---------------------------------------Step 3:Move the box layer under the photo image via the layers panel [drag the box layer under the photo layer].

--------------------------------------- Step 4:
You can align the layers so that the grey box is perfectly centered under the photo.
Select both the Bitmap image (photo) and the box by clicking on the layers panel.Once they are both selected, use CTRL +ALT+2 .
You can leave the box where it is (as long as it’s sitting under the photo, as it can always be moved at a later stage if needed.

---------------------------------------Step 5:Select the box in the layers panel. Using the keyboard arrow keys, move the box so that it sits about 5px below the photo....
This of course is a personal preference, play around with the placement of the box once you have added the ‘shadow effect’.

------------------------------------ Step 6:
With the box still highlighted, go to the property inspector and from the Edge dropdown, select Feather and give it a depth...
I like the default 10 setting. See image above for settings.

That’s it if you want that particular shadow look, which looks quite good and is very popular effect at the moment.However, stay with me and I’ll show you another effect.
------------------------------------------------------------------------Step 6: Left & Right Corners 'lifted off the page' effect

Select the Box layer so that it’s highlighted. Select the Pen Tool. Place the pen tool at the center of the bottom of the box so that a new point is created (see above).
Deselect the pen tool. Click on the new point that was created and holding it down, move it up so that it is under the photo as below.This gives the impression that both the left and right edges of the photo are ‘lifting off the page’.

You can also darken the ‘shadow’, to give a higher lift, the following images shows that I’ve moved the shadow ‘down’ a touch (using the keyboard arrow keys) and changed the colour of the box to #333333.

Play around with the feathering and the colours to get just the effect you are after.

------------------------------------------------------------

Step 7 : One Corner 'lifted off the page' effect

Another effect is to have only one corner ‘lifting’ off the page. Easy, using the sub-selection tool, select one corner point of the shadow box and move it up under the photo.. see below.

Finished photo:

Finishing up:I’ve shown you 3 different shadow effects for photos. You can also apply this effect to various elements on a web page....

Here’s a sample of a similar effect added to a a Newsletter Sign up box from a web page.Original png file for your playing pleasure is available here. [right click and 'save as']

Nice tutorial. I've always hated that type of shadow though and don't think designers should use it. It creates two undesirable effects: 1. It makes the image/div/object look warped by mental perception. This is especially distracting for photos and text. 2. It makes the "surface" the "image" is resting on look curved or warped. This is bad for websites because it gives an unstable, physically-impossible type look, especially if lots of weird angles are used. Since the image obviously isn't at an angle, the mind perceives the surface behind it as distorted. It's all mental perception, but it makes the website feel less stable.