Skip navigation
blubadobe7
blubadobe7
Currently Being Moderated

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

Mar 3, 2012 5:07 AM

Tags: #gradients #photoshop_cs5.5

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

322 Views   1 Reply   Latest reply: Noel Carboni, Mar 3, 2012 6:08 AM
 
Replies
  • Noel Carboni
    21,316 posts
    Dec 23, 2006
    Currently Being Moderated
    1. Noel Carboni,
    Mar 3, 2012 6:08 AM   in reply to blubadobe7
    Report

    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

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points