PDA

View Full Version : apple website - background subtle color fade - how?


dreamweaver beginner
09-26-2009, 01:51 AM
Hello,

This is my first post here, so I'm excited to be here!:)

I've read about 1 1/2 books on Dreamweaver, but I'm still having some difficulty putting the ideas all together.:confused:

I've noticed a subtle design trend on websites: a subtle background color fades from dark to light as you go down the page, and the "real" web information is placed on top of this background... sort of like a piece of paper sitting on top of a desk. Also, this main box area of the website (where you place the content) seems to have the corners rounded off. they even do some tricks like there is a shadow at the bottom of the main box area, so it looks like its above the background a bit.

For example: www.rim.net (http://www.rim.net)
http://store.microsoft.com/home.aspx?WT.mc_id=mscomhp_storenav_popular

(I put apple in the title of this post, but saw that it wasn't as good an example as the above two)

What I really like about this design idea is you can create a fixed pixel size "main area", and then any left over area gets taken up by the subtle fading color background.

I saw an older post from Rob Che, where he described creating a one-pixel-wide background image in Photoshop, and then having that repeat horizontally across the page. I was hoping people could take a look at these pages (the fades and how the main area has rounded corners) and maybe guess at how some of this stuff is done.

If Rob's pixel trick is the go-to way to do this, I hope it can be done in Photoshop Elements (because then I only have to spend about $99 instead of something like $400).

Thanks for any ideas

Corrosive
09-26-2009, 07:16 AM
OK, the only way you will achieve this kind of effect cross-browser is to use images. Rob's post is correct that you create a thin gradient image and then repeat it 'x' in the body tag. For rounded corners on pages, see the top post from Ricky55 in the FAQs...
http://www.dreamweaverclub.com/forum/showthread.php?t=28741

Here's the really frustrating part though. CSS3 can create all of these effects in some way or another with NO IMAGES at all but it just isn't supported by the likes of Internet Explorer. You may find these two articles interesting...

http://corrosiveonline.co.uk/tutorials_css3_tricks.php
http://corrosiveonline.co.uk/tutorials_css3_apple_menu.php

I use these CSS3 effects on my site but I couldn't care less about IE users and the effects I have chosen don't interfere with the site itself. These techniques are for the future though. You may have to buy Photoshop (or possibly elements) in the meantime or ask one of us and we'll create the images for you.

dreamweaver beginner
09-26-2009, 07:38 PM
Thanks for the information! I'm going to study those links.

I did a trial version of what Rob Che indicated, and it worked! I sort of guessed at it using Microsoft Office to create a tall, narrow colored rectangle with a shading effect. Then I saved it as a gif. The Microsoft program only allowed for measurements in inches, so I saved it as 1/100th of an inch wide rather than pixels. It actually worked (I wasn't sure if the inches specification was going to create pixel gaps).

The Microsoft programs aren't very artistic, but they have a way of making themselves useful.

d a v e
09-26-2009, 08:58 PM
surely a jpeg would have been better for a gradient? did it come out smooth as a gif??

dreamweaver beginner
09-26-2009, 10:43 PM
Hello Dave,

I believe gifs are the correct format when you have limited amounts of colors. It looks very smooth.

d a v e
09-27-2009, 05:43 AM
but a gradient blend like the one on the apple site would most likely be beyond the limitations of a 256-colour palette? well without seeing yours i can't say ;) i would have though as well that a jpeg would be also smaller filesize...

domedia
09-27-2009, 04:42 PM
It's very easy to find out 8)
Save for Web-> compare the JPG and GIF side by side and look at file size as well.