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.
    http://www.imenestrelli.it/ – wood effect fades and blends to a solid brown
    http://sycfuk.com/ – brick effect fades and blends to a solid white
    http://www.cyclo.ps/about/ – wood effect fades and blends to a solid brown
    http://designreviver.com/ – 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.
    Thanks

    # 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
    [img]http://i435.photobucket.com/albums/qq75/portlandwebdesign/wood.jpg[/img]

    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.

    [img]http://i435.photobucket.com/albums/qq75/portlandwebdesign/wood2.jpg[/img]

    read this article. it will tell you how i made the images above

    http://www.sitepoint.com/article/photos … 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.

*May or may not contain any actual "CSS" or "Tricks".