Tạo hiệu ứng đồ họa/bóng sáng bóng

Question

Tôi muốn tạo lập hiệu ứng bóng trên một hình ảnh, giống như trên thiết kế lấy cảm hứng từ Apple mà Web đã áp dụng khi nó được cập nhật lên 2.0 Beta.

Về cơ bản này:

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

Bây giờ, tôi thấy hai cách tiếp cận ở đây: Tôi tạo ra một hình ảnh trong đó có một kênh với hiệu ứng bóng Alpha, và sau đó tôi chỉ cần kết hợp các đầu vào và biểu tượng bóng alpha để tạo ra điều này.

Cách tiếp cận thứ hai: Tạo hình ảnh Alpha Gloss trong mã và sau đó hợp nhất nó với đồ họa đầu vào.

Tôi thích giải pháp thứ hai, nhưng tôi không phải là một người đồ họa và tôi không biết thuật toán được gọi là gì để tạo ra các hiệu ứng như vậy. Ai đó có thể cho tôi một số gợi ý * cho những gì tôi thực sự đang tìm kiếm ở đây không? có một "algorhitm bóng" có một cái tên? hoặc thậm chí một thực hiện .net đã?

* Không, không phải those type con trỏ.

Answer 1

Tôi có thể giải thích hiệu ứng đó theo thuật ngữ đồ họa.

1. Tạo hình ảnh khoảng 3 * kích thước biểu tượng.

2. Trong hình ảnh này, hãy tạo hình tròn (chiều cao của biểu tượng) < bán kính < 2 * (chiều cao của biểu tượng).

3. Điền vào vòng tròn có độ pha trộn/độ trong suốt alpha (màu trắng) là 10%.

4. Cắt hình ảnh vòng tròn đó thành hình ảnh mới có kích thước bằng nhau cho biểu tượng của bạn, trong đó trung tâm của vòng tròn nằm ở giữa khu vực xem nhưng cao hơn 1/2 chiều cao của hình ảnh nhỏ hơn.

Nếu bạn sau đó chồng lên hình ảnh này lên biểu tượng gốc, hiệu ứng sẽ trông giống như các biểu tượng trên. Nó có thể được thực hiện với imagemagick nếu bạn đang quan tâm về điều đó, hoặc bạn có thể đi cho một trong các API đồ họa tùy thuộc vào ngôn ngữ mà bạn muốn sử dụng. Từ các bước trên, việc lập trình phải đơn giản.

Answer 2

Cảm ơn bạn, Devin! Đây là Mã C# của tôi để thực hiện đề xuất của bạn. Nó hoạt động khá tốt. Biến điều này thành một bài đăng trên Wiki của cộng đồng, Nếu ai đó thích thêm một số mã, hãy chỉnh sửa điều này.

(Ví dụ sử dụng giá trị khác nhau cho Alpha và tiếp xúc hơn vào mã bên dưới)

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

(Đã thay đổi sau khi đề nghị của John. Tôi không thể vứt bỏ các Bitmap tuy nhiên, điều này đã được thực hiện bởi các người gọi chức năng)

Answer 3

Trả lời mã C# ... Nhìn chung, hãy làm tốt việc chụp ảnh. Tôi đã phải làm những việc tương tự với một số ứng dụng của tôi trong quá khứ.

Một lời khuyên, tuy nhiên: Tất cả các đối tượng đồ họa trong .NET đều dựa trên nguyên tắc Windows GDI + nguyên thủy.Điều này có nghĩa là các đối tượng này yêu cầu xử lý đúng cách để làm sạch các tài nguyên không nhớ của chúng, giống như các tệp xử lý hoặc các kết nối cơ sở dữ liệu. Bạn sẽ muốn tinh chỉnh mã một chút để hỗ trợ chính xác.

Tất cả các đối tượng GDI + triển khai giao diện IDisposable, làm cho chúng hoạt động với câu lệnh sử dụng. Xem xét viết lại mã của bạn tương tự như sau:

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

(Gấu trong tâm trí, không giống như hầu hết các mẫu của tôi, tôi đã không có cơ hội để biên dịch và kiểm tra điều này ... Nó có nghĩa là nhiều hơn như một mẫu cấu trúc mã để đảm bảo rằng không có rò rỉ tài nguyên, không phải là một sản phẩm hoàn chỉnh.Có lẽ có nhiều cách tốt hơn để trừu tượng/cấu trúc mà anyway.Và mạnh mẽ xem xét làm như vậy - quăng điều này trong một thư viện đồ họa DLL mà bạn chỉ có thể tham khảo trong bất kỳ dự án cần những khả năng này trong tương lai!)