How do I achieve this darkened effect?

[jromer]

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.



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.



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

 

[IamSam]

Hello and welcome to PSG.

I think the most simple way would be to use a color fill adjustment layer, set to multiply and with a lowered opacity.

 

[chrisdesign]

1. Make a new layer on top of the original image.
2. Fill it with black.
3. Set the blend mode to multiply.
4. Reduce opacity to 70% on this layer.

 

[gedstar]

There's also HDR Toning

View attachment 75600

View attachment 75601

 

[MrToM]

...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".




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 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...




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




Regards.
MrToM.

 

[jromer]

Wow, that was excellently explained. Thank you for the detailed explanation, MrToM.

 

[MrToM]

Wow, that was excellently explained. Thank you for the detailed explanation, MrToM.

No worries.

Regards.
MrToM.