8 Replies Latest reply: Apr 7, 2012 4:13 AM by Trevor.Dennis RSS

    How do I make a solid Background Transparent?

    Prodigy9 Community Member

      Hi All...

       

      I'm trying to make an image I have which has a solid background (and a few other details inside it) transparent? so I can still see behind the graphics in the image yet the background at the same time...  I know I've seen it before where the image sort of floats above the background...  But I don't know how to accomplish this in photoshop.

       

      Anyone?

       

      Thanks!

        • 1. Re: How do I make a solid Background Transparent?
          Trevor.Dennis CommunityMVP

          Is this to use outside of Photoshop, like on a web page?  If so, then save as a PNG or GIFF file with transparrent background.

          If you want the image to 'float above the background' then that just means a drop shadow.

           

          If you can give more info about what you are after and where you want to use it, it would help.

           

          [EDIT]  I am also wondering if it was a 3D image you saw, with an object floating above a groundplane?

          • 2. Re: How do I make a solid Background Transparent?
            Prodigy9 Community Member

            Hi...

             

            I'm trying to take a square logo I'm planning to use on a web page.  The logo itself is fine however the "square" portion of the image is blue and I want it to be clear/transparent so I can see the background and give the effect it's floating above the web page.

            • 3. Re: How do I make a solid Background Transparent?
              the_wine_snob Community Member

              Can you attach the Image w/ the logo, that you are using, showing where you want the Transparency?

               

              Upon reading your reply, it sounds like you just need to Select that "background," and Delete it, leaving Transparency, but maybe I am missing what you want to do.

               

              Per Trevor's comments, you will want to Save_As in a format, like PNG, that supports Transparency.

               

              Good luck,

               

              Hunt

              • 4. Re: How do I make a solid Background Transparent?
                Prodigy9 Community Member

                catlogo_bl.png

                I want the blue background to be transparent.  How can I do this?  It's in .png format.

                • 5. Re: How do I make a solid Background Transparent?
                  Trevor.Dennis CommunityMVP

                  Just in case...   You need to be working with an RGB image, and not an indexed colour GIF. If you are able to add layers, then you are good to go.  If not, then go Image > Mode > RGB Color, and select the background colour and delete it.   Then save as a PNG as previously advised.

                  • 6. Re: How do I make a solid Background Transparent?
                    Trevor.Dennis CommunityMVP

                    OK. Our posts crossed over there.   Is this a layered image with the text on a separate layer?  If not, then the selection process is going to mess up the text, so best to recreate it.

                     

                    • Draw a circle with the Eliptical Marquee tool.  Hold down the Shift to make it round, and make it's radius fit just inside the text.
                    • Go to the paths palette, and click on the icon that says, 'Make work path from selection'
                    • Select the text tool, and hover over the highest part of the path, and start typing.
                    • Double click the type layer to select the text, and adjust font and size to suite.

                     

                    Then select the blue with the magic wand, and invert the selection so you just have the fish.

                    Use refine edge (if you have CS5) to clean up the selection.

                    Copy the selected fish to a new layer, and delete the background layer

                     

                    You will now have the fish nd text over a transparent layer.  Save as a PNG with preserve transparency.  Job done.

                     

                    BTW  If you want bubbles, then search for Photoshop bubble brushes

                    http://www.brusheezy.com/brushes/1283-bubble-brushes-for-photoshop

                    • 7. Re: How do I make a solid Background Transparent?
                      Prodigy9 Community Member

                      Trevor...  Hi...  Sorry for the delay on this!  I learned a couple of tricks with your advice.  But the I really don't understand why the circle doesn't quite fit inside the text...  Some parts are inside the text and other parts of the circle go straight through the text.  So far I'm still going with the "Solid Blue" Background...  Any more advice would be appreciated.

                       

                      Thanks!

                      • 8. Re: How do I make a solid Background Transparent?
                        Trevor.Dennis CommunityMVP

                        Sorry.  That was my mistake.  I assumed that the text was on a perfect circle, but it is in fact on an elipse.

                         

                        I worked through to make sure I had not made other eronious assumptions!

                         

                        • The first thing I did was add some canvas because the text was so close to the edge.  Easy enough to trim afterwards.
                        • Then I used the Magic wand to select the blue.  I did not care about the text as I was going to replace it.
                        • I inverted the selection so the fish was selected (Ctrl/Cmd Shift i)
                        • Then refine Edge.  Get close, then use the Expand selection slider to get as much of the fish as you can, and make sure you click on Decontaminate Colors to remove any trace of blue.
                        • Copy the fish to a new layer (Ctrl/Cmd j)
                        • Add another layer above the fish.  Ctrl/Cmd click the fish layer to select it, and go Edit > Stroke with one pixel black inside.  (If the original is larger than the one you posted, you may need a thicker stroke.

                         

                         

                        OK you now have a nice crisp fish with a good solid black outline.

                         

                        • use the eliptical Marquee tool, and drag to get as close to the inside the text as you can.  You can use the space bar to move while dragging.  if all else fails, you can Transform Selection to improve the fit.
                        • Go to the paths panel and choose 'Make work path from Selection.
                        • Select the type tool (I used Bradley hand ITC at 5.2mm) and click at the top of the path and insert your text.

                         

                         

                        I left a couple of steps out for clarity.  I erased the old text, for instance, but while adding the new text, I inserted a layer between the type layer and original background layer and filled it with white so I could see the new text more clearly.  Then I deleted it when finished.

                         

                        I didn't add the bubbles, but it is really easy to do so with brushes I linked to further up this thread.  I hope thatclears it all up.

                         

                        Fish.jpg

                         

                        BTW  The one on the right has a transparent background.  Other than the fish, the rest of the image on the left was created from scratch.