创建闪亮的图形/光泽效果

Question

我想以编程方式在Image上创建一个光泽效果,有点类似于Web在更新到2.0 Beta时采用的Apple设计.

基本上这个:

示例图标http://nhc.hcmuns.googlepages.com/web2_icons.jpg

现在,我在这里看到两种方法:我创建一个具有光泽效果的Alpha通道的图像,然后我只是组合输入和光泽alpha图标来创建它.

第二种方法:在代码中创建Alpha Gloss Image,然后将其与输入图形合并.

我更喜欢第二种解决方案,但我不是一个图形人,我不知道算法是什么来创造这样的效果.有人可以给我一些指示*我实际上在这里看到的是什么吗？有没有一个名字的"光泽算法"？甚至是.net实现了吗？

*不,不是那些类型的指针.

Answer 1

谢谢你,德文!这是我的C#代码,用于实现您的建议.它的效果非常好.将此转换为社区拥有的Wiki帖子,如果有人喜欢添加一些代码,请随时编辑.

(示例使用Alpha和曝光的不同值,而不是下面的代码)

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;
}

(在John的建议之后改变了.虽然我不能处理Bitmap,但这必须由函数的调用者来完成)

Answer 2

我可以用图形术语来解释这种效果.

1. 创建一个图像大小3*左右的图像.

2. 在此图像中,创建一个圆圈(图标的高度)<radius <2*(图标的高度).

3. 用10%的alpha混合/透明度(白色)填充圆圈.

4. 裁剪将图像圈成与图标大小相同的新图像,其中圆的中心位于查看区域之外的中心,但是向上移动较小图像的高度的1/2.

如果您将此图像叠加到原始图标上,效果应该与上面的图标大致相同.如果你热衷于imagemagick它应该是可行的,或者你可以选择其中一个图形API,具体取决于你想要使用的语言.从上面的步骤,它应该是直接以编程方式进行.