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 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.
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%.
Step 4: From the layers panel, adjust the opacity of Layer 1 to 70%
This is what your image looks like now:
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.
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!
This is how my image looks now:
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
Step 9: In the blending options dialog box, under Advanced Blending, choose “shallow” for the knockout, and change the opacity to 0%. Click ok.
This is how your image looks now:
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:
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%.
And that is all! You are done! Here is your final image:
~ by vs1085 on October 4, 2013.