SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    APPLYING SHADOW EFFECTS TO PHOTOS & WEB DESIGN ELEMENTS USING FIREWORKS CS3

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Nadia that's another good tutorial that is easy to follow and quite effective

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice tutorial Nadia!
    James Padolsey
    –––––––––––––––––––––––––––––––––––––––
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys ! Hope you can make use of the tutorial at some point :-)

    Nadia

  5. #5
    Non-Member DelvarWorld's Avatar
    Join Date
    Jul 2004
    Location
    Baloney
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good tutorial Nadia
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  7. #7
    SitePoint Evangelist kooshin.com's Avatar
    Join Date
    Dec 2003
    Location
    http://kooshin.com
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that was a good tutorial.how about a photoshop one Nadia?

  8. #8
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Nice tutorial. You look happy in that photo.

  9. #9
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kooshin.com View Post
    that was a good tutorial.how about a photoshop one Nadia?
    I don't do Photoshop - sorry :-D

    Primary reason I did 2 tuts so far is because there are so many PS tutorials here at SP and elsewhere of course, but not so many FWs ones...

    Nadia

  10. #10
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by conradical View Post
    Nice tutorial. You look happy in that photo.
    You flatterer ! :-)

    I'm probably old enough to be her ... hmmm..... 'older sister'

    Nadia

  11. #11
    SitePoint Zealot phillipus_rex's Avatar
    Join Date
    Jan 2007
    Location
    Silicon Holler
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's awesome!

    Fireworks is SOOO underrated. It's amazing what all can be done with that single application.
    "Be kind, for everyone you meet is fighting a
    hard battle." -Plato

  12. #12
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That's a really neat effect, and looks good in combination with the small white border on the photo.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff


Bookmarks

Posting Permissions

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