How to remove whitespace around logo but keep a thin white outline for image smoothness and disctinc

[MarcLister]

I'm constantly looking for ways to improve the site I run for the school I work at. I don't have to worry about content as my boss and other colleagues are always sending me stuff to add to the site. This leaves me to want to improve the 'look' of the site. I make no claims about how good the site is and I know we can improve a lot.

The current logo on the site is a simple JPG with a white background. It was made for us about 4 years ago when we had a new school sign made and the sign maker 'tidied' up the old school logo for us and cleaned the image up and made it look more professional. Obviously the rectangular-ness of the logo looks crap and it's something I've been wanting to sort out for a while now. I've had a go this evening with Paint.NET at removing the white border and saving the new logo as a GIF to preserve the transparency. Unfortunately I'm getting an awful jagged edge to the curved part of the logo which looks rubbish so I've reverted to the original JPG. I was editing a 268x400 version of the logo which looked good but when I resized it to 100x150 the jagged edges came in. I tried repeating this on a smaller 134x200 version of the logo but on the site the grey jagged edges are still visible.

I would like to remove most of the whitespace on the outside of the logo and make that transparent so that the logo looks better on the site. With my efforts this evening I've realised that the logo would look better with a think white edge all the way around the logo to help distinguish it from the blue background of the site. On the top edge and on the straight side edges there is a thin 2 px white border that I would like to keep. How can I do this? I'm guessing Paint.NET can't do this very easily? If anyone could give me some advice and pointers I'd be very grateful.

The current logo is 80x120px and I think that it would look better if it were at least 100x150 to make the logo a bit more obvious and noticeable on the site.

The website: http://www.shaftesbury.harrow.sch.uk/
The current logo as a JPG: http://www.shaftesbury.harrow.sch.uk/wp-content/uploads/2013/08/school_logo1.jpg
The better, but not perfect, logo as a GIF: http://www.shaftesbury.harrow.sch.uk/wp-content/uploads/2015/03/logo.gif

 

[MarcLister]

Hi Mynight. I've converted the image to PNG. The colour seems to have gone a bit purple-blue. The background of the site is meant to be the same colour as the logo and I can see the PNG looks a bit more purple than it should.

Your logo looks good, it's a bit small and the white edges look a bit wonky.

 

[MarcLister]

I've made some progress in understanding what I need to do. I've got some larger versions of the logo that I can play with which might be easier to sort out a thin border with. Thanks Mynight.

 

[MarcLister]

I'll try the stroke select colour tomorrow. I'll see what I can do with my largest version (2142x3200) and let you have a copy as well if I don't think I've got close enough to what I want.

As for Paint.NET it was in auto-detect mode for the colour depth and the file itself is saying 32 bit colour depth.

 

[MarcLister]

Thanks. I'm wondering if we still have the details of the guy who did the logo for us in the first place to see if I can get him to do a transparent version for us. I don't think my precedessor asked for a website version of the logo; the versions we have are all for our school letterhead.

I'll see if I can get a screenshot of the PNG version of the logo with the purple tint. It's only very slight but still noticeable.

 

[MarcLister]

Hi RoyMi6. What do you mean by re-vector it? Re-draw it? The logo looks fantastic. Could I have a copy of it? Cheers.

 

[MarcLister]

Yeah, just traced it with pen tool.

Fired it off to your trust.

Cheers, received and replied!