SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Shadows & Web Page Width

    I am working on a new web site for a client and it's more complex than what I have done before.

    He wants a couple things that I'm not sure how to do.

    First, he wants four different photos on the home page with a drop shadow behind them.

    I figure if I create them in Photoshop I can just put a shaded box behind them to look like a shadow. The problem is when I place them on the web page, if I use any background other than white, the notch in the corners where the photo overlaps on the shadow will show white. Someone suggested that one way to get this effect would be to actually create a background for the webpage and place the shadows right on the webpage as part of the background then place the picture right on top of the shadows. Seems like getting them to line up will be hard. Any ideas for creating this layered effect?

    The second challenge...he wants a graphic on the homepage that is multi-layered composed of several pictures. It needs to span the entire width of the webpage. I can probably create this graphic in Photoshop. But how do I know how wide to make the picture so it is the same width as the webpage? I am using FrontPage to design because he wants to be able to update his own pages and that is the program he will use. Can someone tell me the standard width of a webpage and how to regulate those specs? My other concern is that a graphic that large will slow down the load time of the webpage. Any ideas for what resolution I should save the finished picture as in order to keep it from bogging things down?

    My last question is regarding getting a background not to repeat. If I put the shadows on the background they will repeat. Is there some command I can put in to keep the repeat from happening?

    Thanks

    Teena Stewart

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Lancaster, PA
    Posts
    3,019
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Teena,

    Crazy question, but why not create an image with a drop shadow for each one that you want to have on your homepage?
    Are the photos all a certain dimension, and will they all be grouped together? Sorry, I'm just having a hard time trying to picture the look you're going for. Have you seen any similar sites using similar features? Adding a drop shadow to a rectangular photo or an odd shaped one should be fairly straight forward though, take a look at This tutorial or you can search and find many others on the web (and probably on Sitepoint too!)

    As far as webpage widths are concerned, It really all depends on the resolution people are using. 1024x768 and 800x600 are the most popular, but I really can't see the benefit in designing a site with an image that spans the width of the whole page. You're right to be concerned about the download time of the page too, and in order for a large graphic to look good, I think it's gonna be a big one.

    Take a look at the Yale Style Guide for some excellent design advice, and I'd say stay away from any kind of shadows on the background of the page.

    Hope this helps you some, but feel free to ask any other questions if you'd like.

    Cheers,
    Steve
    Web Designer or Small Business Owner?
    Need More Leads and More Clients?
    Get Free Marketing Tips, Tricks and Ideas Here!

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right. if you want a drop shadow, the only thing you could do is create the picture with the background it will be laying on.
    as far as the full-screen piece is concered, i'd tell him that it would be impossible, or at least, irrational to expand a picture because of:
    1) it you make a picutre at 1024x786, it would look bad if you dithered it to 800x600 and vice versa.
    2) if you want to make it completely compatible, you more than likely would be making 3 different pages: 800x600, 1024x768,1152x8(smething).
    its just irrational to do this. I would recommend making a seperate pop-up window or an i-frame, but with so many pop-up-stoppers, it would be hard,AND i-frames are not supported *yet* with some browsers.
    InQuE

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This isn't going to help much, but with PNGs and full alpha transparency, this would be a doddle. For instance, see http://www.libpng.org/pub/png/pngs-img.html - the three toucans should have nice drop shadows.

    UNFORTUNATELY, Internet Explorer for Windows doesn't support PNG/alpha properly (so if you visit the above page, you'll need to use mozilla or IE/Mac to see it in all its glory - failing that, you can look at the screenshots of working browsers)

    So you'll have to do as suggested above - do the drop shadow in photoshop, against the background colour you want on the page.


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
  •