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!

Making Titles Pop More


MarcT

New Member
Messages
4
Likes
1
Hello,

Have what I think may be a simple question, hoping one of you experts may know a trick.

I'm trying to make my h1 tag stand out from a background image. Its for a slider so I cant really alter the text, so my only option is to altar the image.

Its a white background with dark text...sounds easy enough, But the background is slightly busy and the text disappears in a few spots. Anything I can do?

I noticed it appears Squareup.com seems to blur the image behind the text, even looks like they used some sort of lighting effect.

Thank you in advance
 

Helios

Well-Known Member
Messages
196
Likes
326
Hi Marc,

Without screenshots of what you are working on, or similar examples, it is difficult to provide specific advice. Squareup.com doesn't appear to have any busy or textured backgrounds behind its text, either (if I'm looking at the right page).

As a general rule, your text will stand out better if the background doesn't contain any colours that are the same or very similar lightness and shade to the text colour. This can be achieved simply by lightening or darkening the background image slightly - it sounds like you need to lighten. There are many ways to do this in PS, most simply using the brightness/contrast adjuster found under the Adjustments menu.

Again though, without visual examples of your problem, or information about your PS version and level of ability, it's difficult to be more specific. Hope the above helps you, anyway. :)
 
Last edited:

MarcT

New Member
Messages
4
Likes
1
I think I figured it out..Seems the dodge tool is doing the trick. Gotta play with it a bit to perfect it, but you can see i lose the text a little in the window and counter top.

Thank you for the help

test.gif
 

Helios

Well-Known Member
Messages
196
Likes
326
Aaah ok, didn't realise you meant it was a whole photograph as the background. Yes, lightening that with just the brightness/contrast would probably just make it looked washed out, I guess, but making the whole image a bit lighter might still help the text pop satisfactorily.

A recent thread was in part talking about how to do this with a more natural looking end result, I don't know if it will help: https://www.photoshopgurus.com/forum/photoshop-newbies/55856-whats-cooli-effect-called.html

This is not to say dodging and blurring won't help, of course. But the two together might work quite well.
 
Last edited:

MarcT

New Member
Messages
4
Likes
1
Aaah ok, didn't realise you meant it was a whole photograph as the background. Yes, lightening that with just the brightness/contrast would probably just make it looked washed out, I guess, but making the whole image a bit lighter might still help the text pop satisfactorily.

A recent thread was in part talking about how to do this with a more natural looking end result, I don't know if it will help: https://www.photoshopgurus.com/forum/photoshop-newbies/55856-whats-cooli-effect-called.html

This is not to say dodging and blurring won't help, of course. But the two together might work quite well.


Its coming along... a little practice should do it :thumbsup: Thank you
 

Eggy

Retired Moderator
Messages
5,313
Likes
5,085
I'm not sure dodging the background is the right solution. Dodging some colors will sometimes result in weird colors.

Creating a faint white shadow behind the black text seems more appropriate.

Type your black text, duplicate the layer, rasterize the lowest text layer.
Select it (ctrl+click the thumbnail.)
Go to select --> modify --> expand and expand the rasterized text layer a few pixels (depending on the size of the image)
Fill it with white and apply gaussian blur until satisfaction.

You'll get something like this:

kitchen.jpg

You'll see that the black text is well visible on a black part of the background.
 

IamSam

Administrator
Staff member
Administrator
Messages
22,765
Likes
13,269
Open your document.
Screen Shot 2015-11-20 at 8.07.16 AM.png

Duplicate the main layer.
Convert the duplicated main layer into a smart object.
Add a Gaussian Blur Smart Filter. We use SF so we can go back and increase or decrease the blur if needed.
Click on the Smart filters layer mask and invert it, so it's black.
Screen Shot 2015-11-20 at 8.07.27 AM.png

Add in your text layer and center.
Screen Shot 2015-11-20 at 8.07.54 AM.png

Select the SO Gaussian Blur layer mask by clicking.
Choose whatever tool you would like to use, I used the Rectangular Marquis Tool with a 6px feather. You can use any method to make the selection around the text.
Create a selection around the text.
Screen Shot 2015-11-20 at 8.08.25 AM.png

Fill the selection with white.
Screen Shot 2015-11-20 at 8.18.32 AM.png

Screen Shot 2015-11-20 at 8.19.30 AM.png
 

MarcT

New Member
Messages
4
Likes
1
While I appreciate both responses, I can only manipulate the image. The text is added in a WP theme and my text options are very limited.
 
Messages
4,145
Likes
6,072
To place text over important parts of the image is a No Go for designing an ad.
Another way is to place white textboxes over unimportant parts of the image.

Screen Shot 2015-11-20 at 8.07.16 AM_Textboxes.png
 

dv8_fx

Retired Administrator
Messages
13,761
Likes
4,789
While I appreciate both responses, I can only manipulate the image. The text is added in a WP theme and my text options are very limited.


I agree with what chris just said. But since you say you can only edit images and that the text is added in the WP theme, is there an option to select where the text is positioned? If so, add the blur area or text box in the chosen area. In this way important parts of the image are not obscured or affected.....
 

IamSam

Administrator
Staff member
Administrator
Messages
22,765
Likes
13,269
While I appreciate both responses, I can only manipulate the image. The text is added in a WP theme and my text options are very limited.
It really makes no difference where the text is located or the text options. Just add the effect to the image behind the text (wherever it's located) and the effect works just the same.
 

Top