SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Threaded View

  1. #1
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    NSW Australia
    0 Post(s)
    0 Thread(s)

    [TUTORIAL] FWCS3 - Photo Shadow Effects and Web Elements Shadow Effects


    PS: 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 #666666

    I 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']

    Go for it, and let me see how you add a shadow effect !

    Hope you enjoyed this Fireworks CS3 tutorial.

    Last edited by Nadia P; Nov 11, 2008 at 19:46.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts