4 Easy Ways To Make Text Stand Out Using Photoshop


Photoshop is a powerful tool for Photography and Graphic Design. It actually took me a long time to figure out how to get text to stand out – so in reading this you’re getting an extreme shortcut in your learning curve. Or how to do it the easy way πŸ˜‰

In order to use Photoshop to make text stand out effectively YOU MUST understand how layers work. I wrote a post about how I Cartooned myself, which includes an explanation of layers. Would recommend looking at the layers part if you don’t know what layers are.

There is actually ONLY ONE WAY to make text stand out on any photo or graphic design. So we’ll start with that and add to your toolbox until we’ve given you 4 ways. From this you can build combinations and easily master making text stand out using Photoshop.

DO have patience with Photoshop – it’s an incredibly powerful tool. The downside of having that much power is that it sometimes seems very complex. Persistence and patience will pay off I can promise you that.

These examples are designed to build your knowledge, so please start at the beginning and work your way through – there is an order of learning that will help you πŸ˜€ Or in other words skipping a step will slow down your learning, or you won’t learn anything.

Web designers need to know about these techniques, especially if you they’re doing their own graphic design. These techniques can be used to help enhance an “average” website into one that’s outstanding. So please PAY ATTENTION if you want to learn how to produce better websites, blogs or just about anything that has text on it …

DonCharisma.com-logo-4Sponsor message – IF you’d like a web designer to help you with your project – please contact us DonCharisma.com we’re pleased to help on commercial projects of any size.

Without further ado – here’s my guide on how to make text stand out using only the power of Photoshop … please do feel free to follow the examples if you want to learn the techniques. It’s pretty simply bread and butter stuff to be honest πŸ˜€

1. Contrast

Virtually all methods of making text stand out using Photoshop (or any other Photo/Design software), are levering the same principle – contrast. We all understand contrast, whether knowingly or not. Without it we wouldn’t be able to read or write.

letters-newspaper-pixabay-57266-DonCharisma.org-1024LE

Black letters on a white page for instance …
code-text-computer-screen-file5241268569989-morgueFile-661649-DonCharisma.org-1024LE

OR the old school computer text on a display …

These are both examples of contrast being leveraged to make text stand out. The same principle applies in Photoshop. So how do we do it in Photoshop ?

Well let’s take this stock photo as an example :

cityscape-darling-harbour-pixabay-313216-DonCharisma.org-1024LE

Very simply:

  1. Use the text tool on the tools panel (left hand side) to draw a text box.
  2. Type the text you want to make stand out
  3. Use the character bar (top) to change Font/Size/Colour – Mine is Arial Bold 250pt White. Please note for large text sizes you may need to type the size in the box !

Here’s what it looked like on my screen (highlight boxes for the tools mentioned) :

Making-Text-Stand-Out-Contrast-DonCharisma.org-660x

2. Stroke

Another very simple technique for making text stand out is to put a “stroke” around the text. There’s a special panel in Photoshop called the “Layer effects and styles” panel. Adobe have help on it here. Let’s call it “the effects panel” for short.

Making-Text-Stand-Out-Layer-Style-Panel-DonCharisma.org-660x

How I usually access this panel is to create the text box first, type my text and then double click just to the right of the layer name in the layers panel. Don’t worry if you didn’t get that I’ll highlight the exact place in my example.

Very simply :

1. As you did in the example above, create text box with text you want to highlight.

2. Double click just the right of the layer name to bring up the effects panel.

3. Click on the “Stroke” style and adjust the size to suit. In my example it’s a basic black stroke 10pt.

This is what it looks like without the stroke :

Making-Text-Stand-Out-Without-Stroke-DonCharisma.org-660x

The problem that is without doing something with the text it tends to blend with what’s behind. So adding a stroke here, will make it stand out.

Making-Text-Stand-Out-With-Stroke-DonCharisma.org-660x

This is my Photoshop window – I’veΒ highlighted the place to double click for the effects panel (in dayglo yellow!). You won’t see the words “fx” until after you’ve added the stroke, by the way πŸ˜€

3. Overlay

This is a very commonly used technique to alter what’s behind the text in order to increase the contrast. Commonly used overlays are black and white (text in the opposing colour).

Very simply :

  1. Create text box with text the size and colour you desire. I will continue with white text to keep it simple.
  2. Use the rectangle tool to create a black rectangle that covers the text, and a bit more to provide a “border”. Try to keep things “symmetrical” – ie the same size gaps at the left, right and bottom. This helps to keep it pleasing to the eye, trust me on this …
  3. Drag and drop the rectangle’s layer, so that it appears behind the text. It should be between the text layer and the background layer.
  4. Adjust the “opacity” of the rectangle layer to around 50% ish.

Here’s what my Photoshop window looks like afterwards :

Making-Text-Stand-Out-Overlay-DonCharisma.org-660x

I’ve highlighted where the shape tool is (left hand side) for drawing the rectangle. Also the position of my rectangle layer between the text layer and the background layer (right hand side). And lastly the opacity box to change opacity to around 50%, in this case it’s 56%.

Tip – I also quite often put a black or white rectangle to cover the entire photo, either to increase or decrease contrast of the entire image – it’s a quick way to do it, gives a nice washed out effect or in the other direction can make it look later in the day than it actually is πŸ˜€

4. Drop Shadow

This is a neat effect, can lend a “3D” feel to the text popping up from the photo. Basically we’re putting what looks like a shadow behind the letters.

Very simply :

  1. Create a text box – to your desired size, colour and font as you’ve done in the other examples.
  2. Double click on the text layer to bring up the effects panel.
  3. Navigate to “Drop Shadow” and adjust the sliders for “Distance”, “Spread” and “Size”. Mine are 23, 65 and 10 respectively in this example. The rest of the settings are the defaults.

This is what my Photoshop window looks like :

Making-Text-Stand-Out-Drop-Shadow-DonCharisma.org-660x

And what I call “the effects panel”, and Adobe call “Layer Style” :

Making-Text-Stand-Out-Layer-Style-Panel-DonCharisma.org-660x

Summary And Closing Notes

Contrast is the main tool used to make text stand out on a photo or graphic design, using Photoshop (or any other graphics package).

I’ve explained the techniques of basic contrast, stroke, overlay and drop shadow. These techniques can be built upon (and combined) to form more sophisticated methods of making text stand out.

DonCharisma.com-logo-4Sponsor message – At DonCharisma.com we have all the skills to put together outstanding web sites of any size for any purpose. Please contact us if you have a commercial project.

You should pay particular attention to what I call “the effects panel” – as this is where most of the clever stuff goes on with making text stand out (or look visually appealing for that matter). I do spend a lot of time here. It’s a seemingly small number of tools, which do actually do offer a bewildering array of options for pretty’fying text πŸ˜€

Experiment with the use of colour for text, strokes, overlays and drop shadows. High contrast are things like black/white and red/yellow, but there are obviously more subtle contrasts for subtler effects. Red/yellow is often used for instance in before and after photos.

Happy Photoshop’ing … as a bonus, if you want to share links here to your creations, then I’d love to see what you come up with !

Cheers

Don Charisma


Don Charisma’s Examples

Randomly’ish selected to show off what can be done πŸ˜€

DonCharisma.org Thank You - Wishing You Health Wealth, Happiness and Inspirtation

Stroke and overlay.

DonCharisma.com, Don Charisma, Magnum Force A Man's Got To Know His Limitations

Pure overlay.

Team-Charisma-DonCharisma.org-1024x

The entire photo has a black overlay to make the metallic writing stand out.

DonCharisma.org-Most-Influential-Blogger-Award-Woman

Stroke used on main text. Outer glow (similar to drop shadow) used for superman badge.

DonCharisma.org-don-vs-ATB

Stroke used on lettering with high contrast colours. Logo has an outer glow.

DonCharisma.com-Solutions-2

The entire image uses a white overlay. The text has a black stroke.

Same for the following six which were all created for our commercial site.

DonCharisma.com-Seo-Promoting-4 DonCharisma.com-Sell-3 DonCharisma.com-Grow-2 DonCharisma.com-Design-2 DonCharisma.com-Contact-Us-3 DonCharisma.com-Build-3

DonCharisma.com Trolls-R-Us The Axe Muderer

Here (from memory) I used embossing with a drop shadow.

DonCharisma.com, Don Charisma, Five Trolls-R-Us

Again embossing with a drop shadow that makes the text appear to be “floating above” the photo.

That’s all folks – have a dig around my blog for more examples πŸ˜€


Charisma-How-Tos-Banner-DonCharisma.org-1024x512


Comments are invited

Comments are often welcomed, provided you can string a legible, relevant and polite sentence together. In other cases probably best shared with your therapist, or kept to yourself.



29 thoughts on “4 Easy Ways To Make Text Stand Out Using Photoshop

  1. Well said. After being in graphic arts for so many years I too have used similar techniques to make text stand out until know it is just second nature. Contrast, drop shadow, emboss, and stroke are some of my favorite tools. Also, highlight when i have a pretty busy background.

    1. Thanks … and it’s actually simple stuff isn’t it ? … just amazes me how long it took me to learn … still c’est la vie, now I have a pretty good toolkit for text … I’m still struggling with Illustrator, like to do more with it because of the vector graphics being scalable to any size … I’ll keep at it, eventually I’ll crack it πŸ˜€

  2. I wouldnt suggest using a drop shadow for a website though. I dont know, seems like an old look to me. Stroke and overlay look much more clean, much more professional (and its what I use anyways-that and contrasting).

    1. If one wants to follow current trends in flat design, then I’d agree. However this wasn’t a post specifically about web design. My overall idea was to convey (easy) techniques to increase text’s readability, fashion wasn’t part of the equation (well not that much!). Also my posts stick around on Google for months/years, and as fashion changes nearly as often as people change their underwear, for me it’s fair to include the technique. Today’s flat design is tomorrow’s 3d with drop shadows. Just as today’s single breasted suit is tomorrow’s double breasted suit.

      1. You’re probably right on that too, flat design will have it’s day, until the next trend arrives … maybe it’ll be all drop shadows, or might be all outer glows … who knows !

  3. I use photoshop a lot and have been experimenting with glows, drop shadows, bevels… you name it πŸ˜‰ It’s all good fun though !! Thanks for the enlightening post πŸ™‚

  4. Thanks for the tips. I have photoshop and play with it now and then, My daughter is really into it though and can do some really cool/scary stuff with photos & videos

    1. I use it all the time for photo editing and graphic design … and yes scary things are very possible … I really want to get to grips with Illustrator, but seems a steeper learning curve than Photoshop, so I’ll keep chipping away at it πŸ˜€

Leave a Reply for Don Charisma

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s