Creating A Logo For An MRSA Website
by admin on 16/04/09 at 6:26 pm
I recently had to create a logo for a website about MRSA symptoms. I had two initial ideas about what style the design should be:
- based on an image of the MRSA bacteria
- a vector not associated with MRSA at all
To tell the truth, I'm not that keen on logos that use photos, so the image of the MRSA bacteria was out. Instead, I thought I would create a very simple logo that sampled the colours already used on the site. What I'll do now, is show you the method I used. The important point is that you can replicate the process, so the precise pixel level details aren't so important.
MRSA Symptoms Logo - The Features
I decided that the logo would incorporate the following features, and simply from these bullet points you could probably go away and reproduce this logo:
- a rounded rectangle (those MRSA sufferers can do without nasty sharp corners!)
- a linear gradient that runs vertically
- colours of the gradient would be taken from the existing colour scheme used for the site. Doing this would ensure that the logo blended well.
- light coloured text
- the font would be a little 'different' but not too fancy. I wanted to capture the seriousness of the subject. MRSA is no laughing matter and has been dubbed a superbug. If not treated, it can kill. I digress.
So with those requirements in mind, let's get to work.
Working Within The Existing Environment
The website uses a WordPress installation with a theme from Woo Themes. Here is the original (if you demo it, you can change the theme to be blue like the MRSA site). To minimise disruption to the web page design, I decided to keep the size of the new logo the same as the current one. And how do we determine the size of the current logo? Easy: on the web page right click on the logo image and select properties. I was using Firefox as my browser, but you would have to do something very similar if you use a different browser. The dimensions are 384px × 100px so my creation will need to be similarly sized.
Step 1: Create A New Document
I created a document sized 400px x 400px. This is larger than we need, but we're going to crop it later. It's large enough so that we can see what we're doing. The background should be white, because that's the background colour of the page it will appear on.
Step 2: Create A Rounded Rectangle
Create a rectangle around 140px x 70px. Make the rectangle roundedness something like 20. Apply a linear gradient and orient it vertically. Now this is the interesting bit. We need to sample the colours on the existing MRSA site, so what I did was visit the site and take a screenprint of the page (use the Prt Scr button). Back in Fireworks, press Ctrl-V and you'll past the screen print into your document. Press Ctr-Shift-Down Arrow to position the bitmap at the bottom, so you can see what you're doing. Now, select your rounded rectangle, click the fill colour swatch and apply some colours to the gradient. To do this, simply hover the mouse over the colours on the screen print that you like. For my gradient I played around with blue at one end and white at the other.
Step 3: Create The Text
The text is pretty straightforward - MRSA pedia. The font I used was Agency FB. Although you might not be able to detect it, there is a subtle linear gradient (vertical) on the text, using white and a very light grey.
Hey presto! One MRSA symptoms logo.
