11 Replies Latest reply: Oct 18, 2013 8:50 PM by Alek Davis RSS

    How to create transparent text on a solid color background?

    Alek Davis Community Member

      I want to create a transparent text on a solid color backround, and I need text transparency to go all the way to through the image (i.e. do not show the solid color background). I have the transparent background layer, the solid rectangle layer that occupies part of the image, and the text layer (with text element) on the top of the solid rectangle layer. How do I make text transparency to go all the way through? Here is a similar example for Photoshop CS, only in my case, the backround layer is transparent (i.e. there is no picture): http://www.photoshopessentials.com/photo-effects/transparent-text-area/. Basically, I need to make the letters see through, so they show the backround color on which the image will be placed. Is it possible to do in Photoshop Elements? I'm using version 9 on Windows 7. Thanks.

        • 1. Re: How to create transparent text on a solid color background?
          99jon MVP

          Hi Alek

           

          In Elements I would start a new document:

          Make a note of the width of your photo.

          File >> New >> Blank File

          Set your dimensions and background color to white.

           

          My photo  was 1920 px wide so I set the dimensions to 1920 px X 200 px and resolution 72 – then click OK.

           

          Select the text tool and type with black on your white background – use the move tool to position and re-size if necessary. Click the green checkmark when done.

           

          On the top menu choose Select >> Flatten Image

          Select the magic wand and click on part of the white background to select all – then press Ctrl+J to create a new layer.

          In the layers panel select (highlight) the background layer and delete it.

           

          Choose your main image from the project bin or use File >> Open to locate it. When it shows in the main editing window, select your text image in the project bin and drag and drop it on to the photo. Position and adjust opacity, then save.

           

          night.png

          • 2. Re: How to create transparent text on a solid color background?
            hatstead MVP

            I suggest this to you:

             

            1. Open picture file
            2. Type your message with the text tool
            3. Open the Effects palette>Bevels in dropdown>Simple inner
            4. Still in Effects palette>Visibility in dropdown>Hide
            5. Double click the f on the text layer to bring up the Style settings dialog, then fine-tune the bevel.

             

            farmhouse copy.jpg

            • 3. Re: How to create transparent text on a solid color background?
              99jon MVP

              You could also use the magic wand to select the individual black letters, for a more precise selection. Click on the first letter, then choose add to selection in the tool options and click on each letter separately.

               

              night2.png

              • 4. Re: How to create transparent text on a solid color background?
                hatstead MVP

                I think that a bevel adds to the presentation, vs. flat letters. Fielder's choice.

                 

                Sent from my iPad

                • 5. Re: How to create transparent text on a solid color background?
                  99jon MVP

                  Maybe hatstead, if he wants a watermark, but Alek gave a specific example of what he wanted and that's what I followed. But it's always good to have a choice

                  • 6. Re: How to create transparent text on a solid color background?
                    Alek Davis Community Member

                    Thank you all for the suggestions, especially 99jon. 99jon's walktrhough is helpful, but I was hoping to find a workaround that would allow keeping transparent text that goes all the way through all other layers to transparent background as a text level, but once I flatten the image, I'd lose the text layer, so I cannot make any changes to it (like slightly change the font, size, style, face, etc). Let me clarify a bit what I'm trying to do to see if there is an even better option.

                     

                    Say, I need to have a 300x300 pixel image that (forget about photos) consists of a solid-color circle (circle can be white, black, red, blue, or any solid color, or gradient, does not matter) on a transparent background, and inside of this circle I'd like to cut out a word (say, the word "TEST" with no bevels or other decoration, just flat font) all the way to the transparent background. I just need a circle with text cut out and showing around the circle and through the word "TEST". So if a circle is white and I place the image on a blue background, the word "TEST" would be in blue (so would be the area around the circle).

                     

                    Is there a way to set it up to allow changing the color of the circle (say, from white to black, or blue, or red) and keep smooth edges of the text (and circle) blending with the background (i.e. avoid jagged edges) without redoing every color variation from scratch? Like, getting some master file which would define size and position of the elements,a s well as font, etc, and from this master file, use simple adjustments to change the color.

                     

                    Ideally (in my dream world), there would be an option for the text element to be of transparent color that would go through all layers below it. But there must be a not too complex way to do this, right?

                    • 7. Re: How to create transparent text on a solid color background?
                      99jon MVP

                      I will give it some thought Alek but at the moment I’m scratching my head. It would be easier in CS6 where it would be possible to create a droplet but it’s more complex in PSE. I wil let you know if I come up with something and I’m sure others will chip in if they can.

                      • 8. Re: How to create transparent text on a solid color background?
                        nealeh Community Member

                        So where are you planning to use these graphics? I'm trying to understand what your final image format will be as there are limited formats with transparency.

                         

                        If your aim is to have a template couldn't your workflow be to have the text visible in a unique colour and then, just before output to a final format, flatten the image and erase the text, leaving it transparent? For web use you could then save it as a gif or png file.

                         

                        Cheers,
                        --
                        Neale
                        Insanity is hereditary, you get it from your children

                        • 9. Re: How to create transparent text on a solid color background?
                          Alek Davis Community Member

                          The graphics is intended for a website. It will most likely be in a transparent PNG file. I just want to have the minimal number of files to blend with various backgrounds. I'm pretty sure, I'll need one for white backgrounds (with black foreground) and one for black/gray backgrounds (with white foreground). I may also need more than two foreground colors (in addition to black and white). And I'm not sure how transparency blending will work with different background colors, e.g. would I need a separate file intended for various shades of blue (backgrounds)? Just trying to achieve consistent results (i.e. same size, same positioning of elements, smooth edges) with the minimal amount of work and fewer image files.

                          • 10. Re: How to create transparent text on a solid color background?
                            nealeh Community Member

                            OK, png's don't store layer information so I suggest you try my earlier suggestion - leave your text in the PSD version as a solid. Then before saving your PNG (a) flatten the image, (b) erase the text leaving your transparent background displayed (c) save the png version. Your PSD version remains ready for you to edit for your next graphic.

                             

                            Cheers,

                            --

                            Neale

                            • 11. Re: How to create transparent text on a solid color background?
                              Alek Davis Community Member

                              This part (no layers in PNG) I do understand. :-) That's what I'll probably have to do. I was hoping that there would be a better (smarter) alternative.