Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating a shiny Graphic/Gloss Effect

Tags:

.net

image

I would like to programmatically create a gloss effect on an Image, kinda like on the Apple-inspired design that the Web has adopted when it was updated to 2.0 Beta.

Essentially this:

example icons http://nhc.hcmuns.googlepages.com/web2_icons.jpg

Now, I see two approaches here: I create one image which has an Alpha channel with the gloss effect, and then I just combine the input and the gloss alpha icon to create this.

The second approach: Create the Alpha Gloss Image in code and then merge it with the input graphic.

I would prefer the second solution, but I'm not much of a graphics person and I don't know what the algorhithm is called to create such effects. Can someone give me some pointers* for what I am actually looking here? is there a "gloss algorhitm" that has a name? or even a .net Implementation already?

*No, not those type of pointers.

like image 829
Michael Stum Avatar asked Sep 20 '08 23:09

Michael Stum


1 Answers

Thank you, Devin! Here is my C# Code for implementing your suggestion. It works quite good. Turning this into a community owned Wiki post, If someone likes to add some code, feel free to edit this.

example

(Example uses different values for Alpha and exposure than the code below)

Image img = Image.FromFile("rss-icon.jpg");
pictureBox1.Image = AddCircularGloss(img, 30,25,255,255,255);

public static Image AddCircularGloss(Image inputImage, int exposurePercentage, int transparency, int fillColorR, int fillColorG, int fillColorB)
{
    Bitmap outputImage = new Bitmap(inputImage);
    using (Graphics g = Graphics.FromImage(outputImage))
    {
        using (Pen p = new Pen(Color.FromArgb(transparency, fillColorR, fillColorG, fillColorB)))
        {
            // Looks jaggy otherwise
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.CompositingQuality = CompositingQuality.HighQuality;
            int x, y;

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

            // How many percent of the image to expose
            y = (0 - diameter) + (int)(imgPercent * exposurePercentage);
            g.FillEllipse(p.Brush, x, y, diameter, diameter);
        }
    }
    return outputImage;
}

(Changed after John's suggestion. I cannot dispose the Bitmap though, this has to be done by the caller of the function)

like image 84
5 revs, 2 users 99% Avatar answered Sep 30 '22 00:09

5 revs, 2 users 99%