Adding transparent text to an image on Photoshop

As we continue working on website designs, we find that sometimes it’s easier to manipulate images on Photoshop and then use them on our websites instead of creating that particular look with CSS. If we want to create fancy navigation bars with little images, or even an image for our home page, we can do this on Photoshop! In this tutorial, I’m going to demonstrate how to add transparent text to an image. This idea is great for a home page image, or even to add captions on images in your image gallery.

Step 1: To begin, open your desired image on Photoshop. You can do this by clicking on File > Open. (Or Command+O). I’m using this image of the skyline of Paris that I found on Google.Image

Step 2: Next, add a new blank layer. You can do this by clicking on Layer>New>New Layer (or Shift+Command+N). You can also do this by clicking the “create a new layer” shortcut icon at the bottom of the layers panel.

Image

Step 3: Fill the new layer with white. To do this, click on Edit in the Menu bar. Edit> Fill (or Shift+F5). In the Fill dialog box, choose the color white and make sure the opacity is at 100%.

Image

Image

Step 4: From the layers panel, adjust the opacity of Layer 1 to 70%

Image

This is what your image looks like now:

Image

Step 5: To add text, select the Type tool from the left side tool bar. (Or press T on your keyboard). Type in the text you want, making sure that the font color is black. You can change the font and the color from the top of the workspace.

Image

Step 6: Now you can change the size of the text using the Free Transform tool. Go to the Menu bar, click Edit>Free Transform. (Or Command+T). Just drag the corners until you are happy with the size of your text!

Image

This is how my image looks now:

ImageStep 7: Next, add the Text layer and Layer 1 to a group. To do this, select both the layers from the layers panel, next go to the layers menu on the Menu bar, and choose Group. (Or Command+G).

Image

Image

Step 8: Now go into the Group and select the text layer. Click on the small menu icon on the top right corner of the layers panel. From the menu that appears, choose Blending Options

Image

Step 9: In the blending options dialog box, under Advanced Blending, choose “shallow” for the knockout, and change the opacity to 0%. Click ok.

Image

This is how your image looks now:

Image

Step 10: Now Select Layer 1, and using the Free Transform tool (Edit>Free Transform or Command+T), resize the white background by dragging the corners. Your image looks like this now:

Image

Step 11: You might want to adjust the opacity again, depending on how light or dark you want your “white” area to appear. Making sure Layer 1 is still selected, adjust the opacity on the Layers panel. For my image, I made the opacity 45%.

Image

And that is all! You are done! Here is your final image:

Image

-Vidushi

Advertisements

~ by vs1085 on October 4, 2013.

 
%d bloggers like this: