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.
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 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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With