Question

I’m currently building an intranet engine for a project I’ve got on the go at the moment, and I’d like to save myself a little time by generating header images from code where possible, however, I’d like it to match our concept image.

What I’d like to achieve is below:

My issue is I’ve not the faintest how to create that from code. I can do the absolute basics but that’s about it.

I start to fall down when it comes to the gradient background and the drop shadow on the text. I can get away with positioning the text on the larger header image, so if it’s not possible to generate the exact gradient I have there, then I have a work around for that, but what I really want to achieve is the text with the font and drop shadow.

I’d say it’s safe to assume that to use a “non-standard” font, I’d merely need to install it on the web server?

Thanks for any help in advance.

Answer 1

Here’s code to perform the task but it’s for WinForms. It shouldn’t be difficult to apply it to a web server:

Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.windows.Forms

Public Class Form1

    Sub Form1_Paint(ByVal sender As Object, _
                    ByVal e As PaintEventArgs) Handles MyBase.Paint

        'g is the graphics context used to do the drawing.'
        'gp is the path used to draw the circular gradient background'
        'f is a generic font for drawing'

        Using g = e.Graphics, gp As New GraphicsPath(), _
              f As New Font(FontFamily.GenericSansSerif, 20, FontStyle.Bold)

            'add the ellipse which will be used for the '
            'circular gradient to the graphics path '
            gp.AddEllipse(Me.ClientRectangle)

            'then create a path gradient brush from the graphics path '
            'created earlier to do the drawing on the background      '

            Using pgb As New PathGradientBrush(gp)
                'set the center colour '
                pgb.CenterColor = Color.White
                'and then make all the colours around it a different colour '
                pgb.SurroundColors = New Color() {Color.LightSteelBlue}

                'fill a rectangle with the border colour of the gradient brush'
                g.FillRectangle(Brushes.LightSteelBlue, Me.ClientRectangle)
                'and then draw the gradient on top'
                g.FillRectangle(pgb, Me.ClientRectangle)

                'The secret to shadowed text is that the shadow is drawn first'
                'and it is usually offset to the lower right of the main text '
                'so we draw the shadow with a shade of grey                   '
                g.DrawString("SOME TEXT", f, Brushes.Gray, 12, 12)
                'after which we draw the text itself'
                g.DrawString("SOME TEXT", f, Brushes.Black, 10, 10)
            End Using
        End Using
    End Sub
End Class

The code above draws onto the form directly.
If you’d like to draw to an image instead, modify the code as follows:

Function GetImage(....) As Image
    Dim bmp As New Bitmap(200,200) 'you may use any size here'
    Dim bmpRect As New Rectangle(Point.Empty, bmp.Size)

    Using g = Graphics.FromImage(bmp), ...
        .....
    End Using

    return bmp
End Sub

And be sure to use bmpRect instead of Me.ClientSize.

I hope this works because this is entirely WinForms.