7 Replies Latest reply: Jan 13, 2011 12:57 PM by Noel Carboni RSS

    Fade To Transparent Edge On Web Image

    Suntower Community Member

      Hi,

       

      We've got a website with an image that we'd like to fade cleanly into the background image. The current swing at this is: http://jchmusic.com

       

      I'm -relatively- happy with it BUT the left and right margins above the tree should fade more cleanly into the green at the top (above the tree). Any suggestions on doing this? I did try using the Gradient Tool to fade to transparent it just isn't 'random' enough. ie. it always seems to create some sort of 'shape' when I do it rather than just being a smooth 'dodge' (if that's the right term.)

       

      ALSO: There is the issue of -size-. I want the img to be as small as possible. I tried rendering it as a GIF and here is the result: http://jchmusic.com/index-gif.php

       

      The pixellation actually looks kinda cool to us, but then we run into the problem of various parts near the left edge having transparent 'pinholes' where we don't want them.

       

      Your thoughts?

       

      TIA,

       

      ---JC

        • 1. Re: Fade To Transparent Edge On Web Image
          Noel Carboni Community Member

          Only the PNG format supports partial transparency and is compatible with web browsers.  PNG can also carry "true color" imagery, where GIF cannot because it is using 256 indexed colors.

           

          -Noel

          • 2. Re: Fade To Transparent Edge On Web Image
            Suntower Community Member

            Thanks for that info. Any thoughts on making the edges smoother in either format?


            • 3. Re: Fade To Transparent Edge On Web Image
              Community Member

              You can't simply convert GIF to PNG24 as the GIF image has been trashed with the limit of 256 colors. You need to go back your original PSD file, edit the edge transparency to your taste, and then make the PNG24 file.

              • 4. Re: Fade To Transparent Edge On Web Image
                Suntower Community Member

                I understand that. I -am- working with the original.

                 

                Apparently, I've created confusion by putting two issues in one 'discussion'. Sorry.

                 

                I want to know how to get the fades smooth using the original PSD. I'll worry about the final format after I get that sorted.

                 

                Can you help with the transparent fade part of the equation?

                 

                TIA,

                 

                ---JC

                • 5. Re: Fade To Transparent Edge On Web Image
                  Noel Carboni Community Member

                  What is it you're feeling is wrong with that web page?  It looks pretty nice from here.  Are you concerned with the edges or the tree branches?

                   

                  How are you doing the transparency ("fades") now?  Do you have a layer mask?  Have you cleared the data on the layer with Delete or Edit-Clear?

                   

                  If you're seeing the edges, make the method you used to make it partially transparent more aggressive - i.e., Make the layer mask more extreme, or delete more (e.g., with a fuzzy brush).

                   

                  Or are you asking for artistic advice here?

                   

                  -Noel

                  • 6. Re: Fade To Transparent Edge On Web Image
                    Suntower Community Member

                    I'm trying to get the left and right edges to fade into the green background so that you can't -see- the edges at the top third. One can still see that nagging little whisp of vertical line near the top.

                     

                    Where you wrote:

                     

                     

                    "How  are you doing the transparency ("fades") now?  Do you have a layer  mask?  Have you cleared the data on the layer with Delete or Edit-Clear?"

                     

                    ---I simply used the background eraser. I tried using a mask and it was too hard to 'see' the effect I was creating. I also tried using the 'dodge' tool and that seemed great, until I realised  that what it does is reduce the colour to -white-; not transparent. The main thing is that it's tough to 'see' what the resultant transparency will be.

                     

                    "If  you're seeing the edges, make the method you used to make it partially  transparent more aggressive - i.e., Make the layer mask more extreme, or  delete more (e.g., with a fuzzy brush)."

                     

                    ---What is a 'fuzzy brush'? That sounds promising.

                     

                    ---JC

                    • 7. Re: Fade To Transparent Edge On Web Image
                      Noel Carboni Community Member

                      Aha!  Photoshop excels at doing things with brushes.  There's a whole realm of brush stuff you'll want to get to know.

                       

                      • Activate the Eraser tool in the Tools panel.
                      • Up at the top of the Photoshop main window look for Mode and set it to Brush if it's not already set.
                      • There will be a brush selector.  Click it and select a round brush, and make the Hardness 0% (i.e., fuzzy).

                       

                      SoftRoundBrushSelection.jpg

                       

                      With this brush selected, you can erase things and leave them with varying opacity.

                       

                      Another approach would be to add a layer mask to the layer with the image, then paint on the layer mask with the brush tool and a fuzzy brush.  This has the advantage of your being able to adjust opacity either way, by painting black, gray, or white.

                       

                      And then there's Airbrush mode...

                       

                      Yep, you'll definitely want to learn about brushes. 

                       

                      -Noel