Here’s How To Add Text To Photos [Design Tutorial]

Adding text over photos, whether calligraphy or script is a pretty big trend in the lettering community. Have you ever wondered how to create these stunning pictures with your own hand-lettering as an overlay? Or maybe wondered how others easily add text to photos? In this tutorial, we’ll guide you through from scanning your lettering to adding it into a creative program like Pixlr or Photoshop.

Here's How To Add Text To Photos [Design Tutorial]

What You’ll Need

– A text or lettering piece
– Scanner or camera
– Creative programs like Pixlr, or Photoshop if you have it

Let’s get started!

Scan your lettering

The first step you need to make is to scan your lettering. You can either scan your piece of lettering or take a picture of it with your camera (even your phone camera will work). We used a scanner for this because we already have one, but a photo will do just fine as well.

Here's How To Add Text To Photos [Design Tutorial]

We already had this piece that was done completely by hand using only a pencil. The good thing about the pencil work is that when we tweak it in Photoshop, it will add a little bit of the pencil texture in it.

How to Add Text Over Photos:

Open it in Photoshop

Open your scanned lettering piece in Photoshop. You can either go to File > Open (Ctrl + O) or you can drag the picture from your folder directly into Photoshop.

Tweak the levels

We can now play with the levels of the lettering to make it more black. Open the Levels windows by going to Adjustments > Levels (Ctrl + L).

Select the eyedropper that’s on the left and click on any part of your lettering. You can play around by selecting different parts of your lettering so you can see which one looks better. By doing this, you’re choosing what part of your lettering will be the darkest point and that will set the tone for the whole piece.

Here's How To Add Text To Photos [Design Tutorial]

Create an action to delete the background

In this part of the tutorial, we’ll teach you how to create an action to delete the white background of your lettering piece. In Photoshop, you can create actions to automate this kind of process. By creating an action, it will record everything you do in Photoshop until you press the stop button. This is going to come in handy because you won’t have to repeat the same steps over and over again to delete the white background of any lettering piece.

Open the Actions panel by going to Window > Actions (Alt + F9). Create a New Set and name it Remove Background or whatever you want to.

Here's How To Add Text To Photos [Design Tutorial]

Before you start recording the action, make sure to flatten the image. Go to Layer > Flatten Image. It will create a Background Layer, which will work better for our action. Inside this new set we just created, click on the “Create New Action” button to start recording the action.

Here's How To Add Text To Photos [Design Tutorial]

Press the Record button and now everything we do inside Photoshop will be recorded into this Action. Select the whole image by going to Select > All (Ctrl + A).

Here's How To Add Text To Photos [Design Tutorial]

Open the Channels panel (Window > Channels) and click on the first button that says “Load channel as selection” to select the all the black areas.

Here's How To Add Text To Photos [Design Tutorial]

Now click on the button that says “Save selection as channel” to create a new Alpha channel.

Here's How To Add Text To Photos [Design Tutorial]

The next step is to select the new Alpha channel that Photoshop just create. On the Channels panel, click on the Alpha 1 channel while holding Ctrl on your keyboard. It will select all the white background.

Here's How To Add Text To Photos [Design Tutorial]

Now we need to invert the selection, so the selection is around the black lettering. Go to Select > Inverse (Shift + Ctrl + I).

Here's How To Add Text To Photos [Design Tutorial]

Go to the Layers panel, create a New Layer (Shift + Ctrl + N) and hide the background.

Here's How To Add Text To Photos [Design Tutorial]

Make sure your foreground is set to black by resetting the swatches. You can either click on the little two swatches on the tools panel or just press “D” to reset them.

Here's How To Add Text To Photos [Design Tutorial]

You can now add color to your lettering layer. Go to Edit > Fill (Shift + F5), make sure the contents are set to Foreground Color.

Here's How To Add Text To Photos [Design Tutorial]

Deselect your selection by going to Select > Deselect (Ctrl + D). You can now select the Background Layer and delete it.

Here's How To Add Text To Photos [Design Tutorial]

You can now stop recording your action by pressing the stop button on the Actions panel. And that’s it, you’ve created a new action to remove the background of your lettering pieces.

Open a new document

Open a new document by going to File > New or simply press Ctrl + N. We created a new square document with the dimensions 1080px x 1080px because it’s the size of an Instagram post. But you can choose other dimensions if you’re not going to use it for Instagram.

Here's How To Add Text To Photos [Design Tutorial]

Drag a photo of your preference into the new document. We used this photo by contributor Sasa Mihajlovic from the 123RF library.

Here's How To Add Text To Photos [Design Tutorial]

Copy your lettering from the other document and paste it over the photo.

How to Add Lettering Over Photos in Photoshop 123RF Blog

Resize your hand-lettering layer by going to Edit > Free Transform (Ctrl + T) to make it fit the size of your document.

Here's How To Add Text To Photos [Design Tutorial]

On the Layers panel, create a new Solid Color layer and select the color of your choice. We decided to go with white to match the colors of our chosen image.

Here's How To Add Text To Photos [Design Tutorial]

Right-click on the Color Fill layer and click on “Create Clipping Mask”, so the white will cover the lettering only, and not the entire document.

Here's How To Add Text To Photos [Design Tutorial]

While still on the Layers panel, add a Drop Shadow to your lettering layer. It will make your lettering stand out more!

How to Add Lettering Over Photos in Photoshop 123RF Blog

These are the settings we used for our Drop Shadow:
Opacity: 30%  |  Angle: 90º  |  Distance: 1px  |  Spread: 5%  |  Size: 10px

How to Add Lettering Over Photos in Photoshop 123RF Blog

But you can always play around with these numbers and see what works better for your lettering and the photo you chose.

How to Add Lettering Over Photos in Photoshop 123RF Blog

You can now start to make some interactions between the lettering and the photo. Create a new Layer Mask on the layer that contains your lettering. Select the Brush tool (B) and make sure your foreground color is black. Start brushing over to delete selected parts of your lettering to integrate it with your chosen photo.

Here's How To Add Text To Photos [Design Tutorial]

You can now add some enhancements to the photo so your lettering can stand out even more. On the Layers panel, create a new adjustment layer and select Hue/Saturation. Put the saturation at -100.

How to Add Lettering Over Photos in Photoshop 123RF Blog

Change the Blend Mode to Soft Light and put the Opacity at 80%.

How to Add Lettering Over Photos in Photoshop 123RF Blog

Create a new Exposure adjustment layer and play with the Exposure and Offset setting to see what looks better. These are the settings we used:

How to Add Lettering Over Photos in Photoshop 123RF Blog

That’s about it, pretty simple, right? You are now able to create amazing photos that integrate your lettering, which you can share on Instagram or any other social media platform. You can also make it as an art print and hang it on your wall!

Here's How To Add Text To Photos [Design Tutorial]

That wraps up our simple guide on adding lettering over images. Don’t let your learning capacity stop there. Discover how you can create a quick and easy burlap canvas quote piece, or check out how you can design your own retro 3D text effect.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *