OSLC/oslc-community

Updated Branding Assets

Closed this issue · 9 comments

brianking commented

Determine what we need for our new Web properties (website, Discourse, ...), and produce the assets.

First off, we need logos. Note that we are tweaking the colours in issue #4.

We should put a little padding around new icons so that they center better. Right now the icon pushes right out to the edges.

Website - will defer to @gabrielfdac for determining what we need here.
Discourse - these are the logos we use currently, that will need to be redone. Note that the image + text logo is a hack that I did.

Logo url
logo url

Logo url small
logo url small

Favicon url
favicon url

Apple touch icon
favicon url

gabrielfdac commented

For the website we need something small in resolution and size without losing quality for performance purposes. Smaller sizes = faster loading.

Currently the website asset has a 300 x 300px ratio, Ideally it should be even smaller, in the design I made the logo 60 x 60px. I kept the file a bit bigger for the case we had to use a bigger version of it somewhere in the website. So if that's not the case we'll update it with a smaller version.

As for Favicons and Touch Icons we can use this as reference.

brianking commented

@gabrielfdac We will defer to your guidance, so sounds good. We should probably agree on what type of assets we need, and make them in a few different sizes. We can also make a page on the new website where people can download them for their own purposes (press articles, presentation, .....)

brianking commented

Discourse specific (currently at http://discourse.oslc.co):

  • logo url - The logo image at the top left of your site, should be a wide rectangle shape. If left blank site title text will be shown.
  • logo small url - The small logo image at the top left of your site, should be a square shape, seen when scrolling down. If left blank a home glyph will be shown.
  • digest logo url - The alternate logo image used at the top of your site's email summary. Should be a wide rectangle shape. Should not be an SVG image. If left blank logo_url will be used.
  • mobile logo url - The fixed position logo image used at the top left of your mobile site. Should be a square shape. If left blank, logo_url will be used. eg: http://example.com/uploads/default/logo.png
  • favicon url - A favicon for your site, see http://en.wikipedia.org/wiki/Favicon, to work correctly over a CDN it must be a png
  • apple touch icon url - Icon used for Apple touch devices. Recommended size is 144px by 144px.
    default opengraph image url
  • URL of the default opengraph image.
  • twitter summary large image url - URL of the default Twitter summary card image (should be at least 280px in width, and at least 150px in height).
berezovskyi commented

Twitter profile logo is 400px. We would need a number of assets of different sizes in order to replace the logo in all places listed in #14

gabrielfdac commented

Finally here are the branding assets.
OSLC Branding Assets.zip

I made a version with and without the text (I called the version with text: extended).

From three I made the following steps. 2000, 800, 600, 450, 300 and 200px. When it came to the rectangular extended versions that value represents the height.

Also for pure logo there is a 144x144px for the apple touch and a 64px for the favicon. (note that .ico is no longer necessary for favicons).

Also when adding these to social media or other websites I'd recommend using the 2000px versions as most websites (facebook, twitter, linkedin, etc) use some form of compression in the images. So to preserve quality it might be a safer bet to use the bigger sizes also as they are the biggest image has only 200Kb.

Now the I have the vectors I can easily create any other size. So let me know if another specific size would be required.

brianking commented

Looks good to me, thanks. I've already updated the assets on Discourse.

I think we need a smaller extended version (with the text) for the header on the new website. To replace this:
https://oslc.github.io/img/logo.png

Or should we uploaded a bigger one and resize it with CSS?

brianking commented

Also, we need updated version of the Lyo logo, which is a mix of the Lion and the OSLC logo.
https://www.eclipse.org/lyo/images/logo-oslc-lyo.png (site)
https://pbs.twimg.com/profile_images/443116628620742656/DCZFMWRW_400x400.png (Twitter and elsewhere)

brianking commented

This issue was moved to OSLC/logo#4