Using Alpha in PNG to Make a Magic Card

• Download demo project - 64.5 KB
• Download source - 132.87 KB

Introduction

This is a funny tool. It will help you to generate a PNG file that has 2 layers, different layers have different text, so you can hide your message into the image, send it to your friend and ask her or him to guess.

Background

This idea was for the birthday card I sent to my girlfriend (now she's my wife). I wanted to DIY some gift for her, but you know, I'm an IT guy, hand made is hard for me, so I thought of designing an E-card. When I worked on Photoshop, I created 2 layers for black and white background, and put text on it. Fortunately, I found some interesting effects and finally I created a Web page with JavaScript effect to change the background color from white to black, and the image displayed in different text.

Recently, my wife asked me to do this again for her friend, so I finally wrote this program for this article.

Using the Code

There is one function to generate the image, the rest mostly is the UI and I will not focus on that.

The function is as given below:

private void GenerateImage()
{
    //get the graphics from image, image is created in the constructor
    Graphics g = Graphics.FromImage(m_Image);

    //if the image is not free, just clean and redraw
    g.Clear(Color.Empty);
    int area = m_Image.Width * m_Image.Height;
    float x = -1;
    float y = -1;
    int alpha = -1;
    int size = -1;
    SolidBrush brush = new SolidBrush(this.ForeColor);
    PointF position = new PointF(m_Image.Width / 2, m_Image.Height / 2);
    Random rand = new Random();
    StringFormat format = new StringFormat();
    format.Alignment = StringAlignment.Near;
    format.LineAlignment = StringAlignment.Near;

    //set the back text color as white
    brush.Color = Color.FromArgb(150, Color.White);
    g.DrawString(m_BackText, this.Font, brush, position, format);

    //draw some star at the background
    for (int i = 0; i < area * BACK_STAR_AREA; i++)
    {
        x = rand.Next(m_Image.Width);
        y = rand.Next(m_Image.Height);
        alpha = rand.Next(MIN_STAR_ALPHA, MAX_STAR_ALPHA);
        size = rand.Next(MIN_STAR_SIZE, MAX_STAR_SIZE);
        brush.Color = Color.FromArgb(alpha, Color.LightYellow);
        g.FillEllipse(brush, x - size / 2, y - size / 2, size, size);
    }

    //set the front text as black
    brush.Color = Color.FromArgb(180, Color.Black);
    g.DrawString(m_FrontText, this.Font, brush, position, format);

    //draw some star at the background
    for (int i = 0; i < area * FRONT_STAR_AREA; i++)
    {
        x = rand.Next(m_Image.Width);
        y = rand.Next(m_Image.Height);
        alpha = rand.Next(MIN_STAR_ALPHA, MAX_STAR_ALPHA);
        size = rand.Next(MIN_STAR_SIZE, MAX_STAR_SIZE);
        brush.Color =Color.FromArgb(alpha, Color.Black);
        g.FillEllipse(brush, x - size / 2, y - size / 2, size, size);
    }

    //dispose and cleanup
    brush.Dispose();
}

Points of Interest

32 bit alpha image is very interesting, to get a better idea you can work on it. A static image with dynamic effect becomes a different image. Now you don't need to prepare N images and JavaScript effect for changing the image. Just change the background and get a different visual effect. Work on it now and give a surprise to your friend.

Web Browsers

Web browsers supporting 32 bit PNG: Internet Explorer 7, Firefox, Safari.
Internet Explorer 6 or earlier versions are not supported - the user will see the background color is changing and the image remains the same.

History

• 12th October, 2007: Article created