Erstellen einer glänzenden Grafik/Glanzeffekt

Question

Ich möchte programmgesteuert einen Glanzeffekt auf ein Bild erstellen, ähnlich wie auf dem Apple-inspirierten Design, das das Web angenommen hat, als es auf 2.0 Beta aktualisiert wurde.

Im Grunde diese:

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

Jetzt sehe ich zwei Ansätze hier: ich ein Bild, das einen Alpha-Kanal mit dem Glanzeffekt hat, und dann auf das Symbol kombiniere ich nur den Eingang und den Glanz alpha um das zu schaffen.

Der zweite Ansatz: Erstellen Sie das Alpha Gloss Image im Code und führen Sie es dann mit der Eingabegraphik zusammen.

Ich würde die zweite Lösung bevorzugen, aber ich bin nicht viel von einer Grafik Person und ich weiß nicht, was der Algorithmus heißt, solche Effekte zu erstellen. Kann mir jemand ein paar Hinweise geben * für das, was ich hier eigentlich suche? Gibt es einen "gloss algorhitm", der einen Namen hat? oder schon eine .net Implementierung schon?

* Nein, nicht those type von Zeigern.

Answer 1

Ich kann diesen Effekt in grafischen Begriffen erklären.

1. Erstellen Sie ein Bild um 3 * die Größe des Symbols.

2. In diesem Bild erstellen Sie einen Kreis, wo (die Höhe des Symbols) < Radius < 2 * (die Höhe des Symbols).

3. Füllen Sie den Kreis mit einer Alpha-Mischung/Transparenz (zu weiß) von zB 10%.

4. Schneiden Sie das Kreisbild in ein neues Bild gleicher Größe zu Ihren Symbolen, wobei der Mittelpunkt des Kreises außerhalb des Ansichtsbereichs zentriert ist, aber um 1/2 der Höhe des kleineren Bilds nach oben.

Wenn Sie dann dieses Bild auf das ursprüngliche Symbol überlagern, sollte der Effekt aussehen etwa wie die oben Symbole. Es sollte mit imagemagick machbar sein, wenn Sie daran interessiert sind, oder Sie können für eine der Grafik-APIs abhängig von der Sprache, die Sie verwenden möchten, gehen. Von den obigen Schritten sollte es einfach sein, programmatisch zu tun.

Answer 2

Danke, Devin! Hier ist mein C# -Code für die Umsetzung Ihres Vorschlags. Es funktioniert ganz gut. Verwandeln Sie diese in einen Community-eigenen Wiki-Beitrag. Wenn jemand gerne etwas Code hinzufügen möchte, können Sie ihn gerne bearbeiten.

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 nach John Vorschlag (Beispiel unterschiedliche Werte für Alpha und Belichtung als der Code unten verwendet). Ich obwohl die Bitmap nicht verfügen kann, muss dies durch die getan werden Aufrufer der Funktion)

Answer 3

Reagieren auf den C# -Code ... Alles in allem gute Arbeit, um die Bildgebung in Gang zu setzen. Ich musste in der Vergangenheit mit einigen meiner Apps ähnliche Dinge tun.

Ein Ratschlag jedoch: Alle Grafikobjekte in .NET basieren auf Windows GDI + -Primitiven.Das bedeutet, dass diese Objekte korrekt entsorgt werden müssen, um ihre nicht speicherbaren Ressourcen zu bereinigen, ähnlich wie Dateihandles oder Datenbankverbindungen. Sie sollten den Code ein wenig optimieren, um dies korrekt zu unterstützen.

Alle GDI + -Objekte implementieren die IDisposable-Schnittstelle, so dass sie mit der using-Anweisung funktionieren. Betrachten Sie den Code umschreiben ähnlich wie die folgenden:

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

(Beachten Sie, im Gegensatz zu den meisten meiner Proben, ich habe noch keine Gelegenheit gehabt zu kompilieren und dies zu testen ... Es ist mehr als eine Probe der Strukturierung gemeint der Code, um sicherzustellen, dass es keine Ressourcenlecks gibt, nicht als ein fertiges Produkt.Es gibt wahrscheinlich bessere Möglichkeiten, dies zu abstrahieren/zu strukturieren.Und überlege es dir sehr - toss dies in einer DLL der Grafikbibliothek, auf die du in jedem verweisen kannst Projekt, das diese Fähigkeiten in der Zukunft benötigt!)