1 Reply Latest reply on Mar 3, 2012 6:08 AM by Noel Carboni

    How to create a halo gradient for web 'master page'

    blubadobe7

      Working with PS CS5.5.
       
      I am needing to create a 1000px x 650px background image for a web application. I would like the resulting file size (PNG) downloaded by the web-site to be in the 50kb realm.
       
      What is the general strategy for creating a gradient like the attached file?
       
      Should I start with a solid background color and overlay the solid with a white gradient layer (center being less transparent) ... this in my mind would result in the smallest file size given that I could decrease the resolution (of the exported PNG file) without any visible effects on the web-page.
       
      Please advise,
       
      Bradbg.jpg

        • 1. Re: How to create a halo gradient for web 'master page'
          Noel Carboni Level 8

          There may be many ways to do it, but you could render a round radial gradient fill layer, adjust it to taste, then save as PNG and just resize it to whatever dimensions you like in the HTML, which could get you the oval shape.  Or you could rasterize it in Photoshop and save as a "squashed" version for a possible small savings in file size.

           

          MakingGradient.jpg

           

          The above 500 x 325 pixel gradient saved as a PNG is about 50 kb.

           

          BlueGradient.png

           

          This one was cropped, rasterized and squashed vertically, and takes only 26 kb on disk.

           

          BlueOval.png

           

          -Noel