The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

Background image fade/blend to solid colour help

  • # October 29, 2008 at 2:15 pm

    Hi all,
    Still pretty new to designing sites on Photoshop and I cant figure out how to fade, blend, merge how ever you want to describe it an image to a solid colour. If you look at the examples below, it makes it clear. – wood effect fades and blends to a solid brown – brick effect fades and blends to a solid white – wood effect fades and blends to a solid brown – slate concrete effect fades and blends to black

    All the above examples show the exact same thing, a background image fading nicely to a solid colour to finish the site off. Is this a trick of the eye or can you do this in photoshop? If so how? Any help would be much appreciated.

    # October 29, 2008 at 2:42 pm

    the last one was done using a light render. you just have whatever background you want then go to filter – render – lighting effects. This image was made with the lighting down style

    the others could be made using a mask. you apply a layer mask to the layer, have your background below the layer, then use the gradient tool to erase the layer.


    read this article. it will tell you how i made the images above … ayer-mask/

    # October 29, 2008 at 2:57 pm

    Thank you cybershot, just what I needed :D .

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed