Ambiance Pro Demo Photos

[jsavage]

Hello,

Can someone please direct me to a photoshop tutorial that explains how to achieve the same effect in photos included in the Ambiance Pro demo?

The main aim is to replicate the style of photo in the demo whilst ensuring that the white text appears over any photo without getting drowned out by any white in the background.

Thank you,

http://www.japanbnl.com/

[paulsibley]

Not sure what to suggest for the photographic style; maybe look for vintage/retro tutorials as a starting place.

A couple of suggestions to try and stop white text from being drowned out by any white in the background:

I'm a long long way from being an expert with this stuff, so please bear that in mind if you make changes based on my suggestions - backups would be a good idea.

I've added a drop-shadow effect on mine, which works nicely, but may not be fully cross-browser compatible.

Look for this CSS:

.ambiance-grid .entry-title a,
.ambiance-grid .entry-title a:hover {
	color: #fff;
	display: block;
}

Add this:
text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.7);

Or you could try adding an opaque background:

Same CSS, but add this instead:
background: rgba(0, 0, 0, 0.5);

The latter of those might be more cross-browser friendly; but I much prefer the neater drop-shadow - and I think it will only be IE that has a problem with it.

---

http://www.paulsibley.net/

[Author]

Posts