What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

How do I achieve this darkened effect?


jromer

New Member
Messages
2
Likes
1
Hi gurus, new member here. I decided to look for a PS forum after failing to find answers to my questions on YouTube.

I'm learning web design and a crucial skill to have in my tool belt is Photoshop.

Long story short, the objective for today is darkening a photo in order to use it as a background on a website page and place white text in the section.

Screen Shot 2017-06-27 at 1.22.07 PM.png

This is a screenshot from http://www.cmbuyshouses.com, if you need to take a closer look. That cool-temp darkened effect is what I'm trying to achieve. Attached below is one of my attempts.

cm-home-page-header-02.jpg

I applied and tried messing around with a sharpening layer, black & white layer, exposure layer and color curves.

I'm assuming it's pretty simple to achieve that darkened effect but I'm lost. If someone could describe the steps to take to accomplish this effect, I would greatly appreciate it!

Thanks,

jromer
 

MrToM

Guru
Messages
3,595
Likes
3,321
...I'm learning web design and a crucial skill to have in my tool belt is Photoshop...
Not necessarily.

A more important skill is to use the tools available to you, for free, to establish how web pages are constructed.

I appreciate you are still learning but If you take a little time to investigate the page in question you'll discover that the whole effect you desire is in fact created entirely with CSS, no photoshop required...

The image has an ID of "home_page_banner" and the overlying div an ID of "banner".

the_darkening_MT_01.png


I appreciate you may want to know how to do this in PS as well but to be honest you should concentrate on web design first and PS as a last resort.

The effect in the page is nothing more than a <div> element with that image as a background below another <div> element with a solid colour background of 19, 32, 47 RGB and its opacity set to 0.8...

the_darkening_MT_03.png


The same effect in Photoshop would be the image as the 'background' layer, with a filled layer above it of colour 19, 32, 47 RGB and at 80% opacity...

the_darkening_MT_04.png


For comparison here are the two side by side...

the_darkening_MT_02.png


Regards.
MrToM.
 
Last edited:

jromer

New Member
Messages
2
Likes
1
Wow, that was excellently explained. Thank you for the detailed explanation, MrToM.
 

Top