Openlibrary: Create Vectorized Open Library Logo

[mekarpeles]

Right now our logo is fuzzy and we don't really have an assortment of resolutions which can be used by the press. @jeansaung, do you know anyone who may be willing us breath some life into our logo?

[mekarpeles]

cc: @evanminto so you can track

[salman-bhai]

I'd like to do this if it's possible. Can I know the fonts that are used in the logo.

[salman-bhai]

None of the images were of good quality to recreate a vectorised version of the logo.

[salman-bhai]

Can something more be added to this, a more elaborate description as to what exactly is needed wrt "assortment of solutions"?

[seabelis]

I may be able to help with this. Do you just need the current logo recreated as a vector graphic?

[mekarpeles]

@seabelis yes! We'd love your help vectorizing the current logo: https://openlibrary.org/static/images/openlibrary-logo.png.

I believe the fonts are trajan pro and helvetica rounded bold (or google cinzel)

@salman-bhai helped get us started by vectorizing our previous logo: http://svgur.com/s/5t1 (which has some of the fonts/assets, in case it helps)

We're also open to your artistic liberties / touches if we happen to have violated any design principles in the process of making this logo :)

[seabelis]

Do you happen to know the PMS# for the blue? If not, I can use the eyedropper tool.

[seabelis]

Here's an initial re-creation. I don't think the font is helvetica rounded as the letters of "open" don't seem to be rounded at the ends (though the png is pretty blurry). The closest thing I have is Helvetica 65. Also, my Trajan font did not quite line up to the one in the logo (for example, the L is not as wide) so maybe it was a similar font or the original designer may have had a version of the font with alternate letters. The spacing was also manipulated it seems. I've tried to match it as best I could, however it looks to me like the gap between the R and the A is too wide. I'd be inclined to try some other options there. But first, I'll take any other feedback on the draft.

[mekarpeles]

Fantastic, this is much better than what we currently have! A few minor points of feedback, (a) the word OPEN may be aligned a bit too high on the sign, (b) we may want the sign to have slightly more rounded corners, and (c) I do think the OPEN sign is rounded (it is really pixelated) -- here's a png + svg of our old designs which we may be able to re-incorporate:

http://svgur.com/s/5t1 or https://fthmb.tqn.com/5xq2Tvw0itvRVm2OhNLYDbt5DTI=/300x0/open-library-logo-5980eddcc4124400106726d8.PNG

[seabelis]

Oh, yes. That's rounded. I don't suppose you have the font files?

[tfmorris]

More comments from the peanut gallery:

• the old R had a straight foot. The extended curved foot of the new one exacerbates the RA spacing problem (which was bad to start with).
• I'd be tempted to play with negative kerning to even have the RA overlap to see if that's less visually annoying than the current gap (hard to tell w/o experimentation)
• the lines for the sign's "string" are too heavy. I think the same weight as the horizontal lines would be good (and that appears to be what the old design used)
• making the string "tighter" so it takes up less vertical space might help the logo fit places better
• I agree with @mekarpeles that Open should be centered in a rounded cornered sign

[tfmorris]

Actually, the default Trajan Pro kerning looks fine. It's kerned to overlap by default:

[mekarpeles]

@seabelis, here they are! https://drive.google.com/drive/folders/0B1AvV6Nqk7TkRHUwVWFuZHdKYms?usp=sharing :)

[seabelis]

@tfmorris Agreed. I also prefer the native spacing. I was trying to match the current logo as best I could, but I see on the .svg file of the older logo, the native spacing was used.

[seabelis]

The fonts are for Mac, so my system does not recognize them. I've used Arial Rounded as a substitute. Here I have the Arial font applied to OPEN and I've returned LIBRARY to its native spacing. I've included the overlay view to illustrate the differences.

I've also noticed a slight difference in the blues used in the svg file and what my eyedropper detected in the png file. Was this an intentional change? Is there an official blue?
I've not yet adjusted the space between the "tack" and the open sign, but that's possible.
The string thickness seems to match the newer .png version, but is surely thinner in the old .svg version - let me know if you want further adjustment.
The shades of gray appear different in the newer .png version but the same in the old .svg version. Presumably, these should match, but please confirm, and again with PMS# if there is one.

[LeadSongDog]

That's a huge improvement. It might be even better by adopting the same colour for the string as for the bars over and under the "Library". Can the "OPEN" be vertically centred in the sign?

[bfalling]

This is looking really nice! It'd be great to see it at a few different sizes to see how well it scales up and down.

[seabelis]

I've created everything as a vector (Illustrator), so you can make it as big as you want.

[seabelis]

Oh, also, I've got Trajan in bold here, so maybe it's too heavy. Everything looks thicker on the pixelated graphic than in the old svg logo, so let me know which is preferred.

[seabelis]

Here I have made some slight adjustments. The OPEN text is nudged down ever so slightly. I've reduced the stroke weight of the lines and string and matched the color. I've changed the Trajan font to regular weight.

[mekarpeles]

@seabelis this is looking fantastic

[mekarpeles]

@seabelis I'd love to call this issue closed -- is there a place we can access the svg and/or illustrator file (or whatever format was used to create the svg)?

[seabelis]

Sure thing. I'll finalize the file in the AM and pack it up.

[seabelis]

Download here: https://drive.google.com/open?id=1GlUpiaobyL6dbxu8Ok_i_R87aalpzH_z (updated)
I've included a handful of formats; the .ai file is in case you need to make further adjustments down the road (you will need the fonts installed if you want to change the test itself), the .ai outlines file will let you adjust the file, but the type is converted to shapes - so not fonts needed, but you cannot change the text. The .eps file is a generic vector file and then there are a few raster formats - the .png files are with transparency and the .jpg with a white background.

[mekarpeles]

Success! thank you @seabelis

[mekarpeles]

Added to our official OL google docs: https://drive.google.com/open?id=1GlUpiaobyL6dbxu8Ok_i_R87aalpzH_z

Added to our wiki as well: https://github.com/internetarchive/openlibrary/wiki/Design

[mekarpeles]

See #948 -- @nlevitt contributed some tweaks to the svg to enhance the size/presentation

This tightens up the bounding box around the logo to remove some empty space, so that the logo looks roughly as big as the old one did.

The svg is live! Thanks @seabelis & @nlevitt!