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

MarcLister · 15 Mar 2015 at 20:02

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

Mynight · 15 Mar 2015 at 20:43

Use png? I'm not sure why'd you'd use gif. Png should solve the issue as it's pretty lossless.

and

(needed to be 108x150 to keep dimensions.

Good enough?

Edit: Missed a bit when erasing.

MarcLister · 15 Mar 2015 at 20:59

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.

Mynight · 15 Mar 2015 at 21:11

Yeah sorry about that. Its kinda low res and I think I cut it a bit too close but if I was on the right lines I would have cleaned it up.

Hmm there shouldn't have been any colour change :confused:

.

MarcLister · 15 Mar 2015 at 21:25

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.

Mynight · 15 Mar 2015 at 21:32

A larger version would be much easier.

Just remove the white from the outside (eraser) then select the image and add a stroke select colour and px.

If you have a larger version I'll happily do it save me faffing around with a smaller version(always could do with practice).

Side note: To satisfy my curiosity with the colour issue has paint saved it in an 8bit colour depth?(properties and details). Just when I added mine to the site the colour was the same :confused:

.

MarcLister · 15 Mar 2015 at 22:19

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.

Mynight · 15 Mar 2015 at 22:25

Now that sort of res is a blessing

. Best of luck

.

Hmm I have no idea about the colours then. Maybe my laptop screen isn't up to displaying the difference. I'll have a look on my desktop tomorrow.

MarcLister · 15 Mar 2015 at 22:28

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.

RoyMi6 · 16 Mar 2015 at 12:04

Easiest thing to do with this is just re-vector it - especially if you're using it on such a small scale on the website.

5 minutes work - Not sure on the font for the "S" along the top so quickly just make it looks somewhat similar, looks better smaller.

Let me know if you want the vector.

MarcLister · 16 Mar 2015 at 20:23

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.

RoyMi6 · 16 Mar 2015 at 21:31

Yeah, just traced it with pen tool.

Fired it off to your trust.

MarcLister · 16 Mar 2015 at 21:49

RoyMi6 said:
Yeah, just traced it with pen tool.

Fired it off to your trust.

Cheers, received and replied!