tags:

views:

2775

answers:

4
+7  A: 

I can explain that effect in graphic terms.

  1. Create an image around 3* the size of the icon.

  2. Within this image, create a circle where (the height of the icon) < radius < 2*(the height of the icon).

  3. Fill the circle with an alpha blend/transparency (to white) of say 10%.

  4. Crop that circle image into a new image of equal size to your icons, where the center of the circle is centered outside the viewing area but upwards by 1/2 the height of the smaller image.

If you then superimpose this image onto the original icon, the effect should look approximately like the above icons. It should be doable with imagemagick if you're keen on that, or you could go for one of the graphics API's depending on what language you want to use. From the steps above it should be straightforward to do programatically.

devinmoore
+2  A: 

Here's a photoshop tutorial that shows the process

Eric Lathrop
+15  A: 
Michael Stum
Very nice indeed.
TraumaPony
Is it just me or is there a slight alpha bloom on the bottom middle edge of some of those tiles?
davenpcj
On the last icon in the first row (i think it's MySpace), there is a little "gradient" or however you want to call it. Same for the RSS i believe. That is part of the base icon i think, but it maybe an exercise to create that programatically :)
Michael Stum
+3  A: 

Responding to the C# code ... Overall, good job on getting the imaging going. I've had to do similar things with some of my apps in the past.

One piece of advice, however: All graphics objects in .NET are based on Windows GDI+ primitives. This means these objects require correct disposal to clean up their non-memory resources, much like file handles or database connections. You'll want to tweak the code a bit to support that correctly.

All of the GDI+ objects implement the IDisposable interface, making them functional with the using statement. Consider rewriting your code similarly to the following:

// Experiment with this value
int exposurePercentage = 40;

using (Image img = Image.FromFile("rss-icon.jpg"))
{
    using (Graphics g = Graphics.FromImage(img))
    {    
        // First Number = Alpha, Experiment with this value.
        using (Pen p = new Pen(Color.FromArgb(75, 255, 255, 255)))
        {
            // Looks jaggy otherwise
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

            int x, y;

            // 3 * Height looks best
            int diameter = img.Height * 3;
            double imgPercent = (double)img.Height / 100;
            x = 0 - img.Width;

            // How many percent of the image to expose
            y = (0 - diameter) + (int)(imgPercent * exposurePercentage);

            g.FillEllipse(p.Brush, x, y, diameter, diameter);

            pictureBox1.Image = img;
        }
    }
}

(Bear in mind, unlike most of my samples, I haven't had a chance to compile and test this ... It's meant more as a sample of structuring the code for ensuring that there are no resource leaks, not as a finished product. There are probably better ways to abstract/structure that anyway. And strongly consider doing so -- toss this in a graphics library DLL that you can just reference in any project which needs these capabilities in the future!)

John Rudy
Very good point! I've changed my example code.
Michael Stum