Sponsor Logos

Adding sponsor logos to the website requires graphic design software like Adobe Illustrator. The following production steps will ensure consistency across our sites.

Looking for existing sponsor logos? You can find them on the Share drive: CMOA > Shared > Design > • Sponsor Logos

Request the Correct File Type

Graphic files come in a growing range of file types. It is increasingly important that we request files from the sponsor or agent in one of the conventional file types that can be used broadly in production.

You may find that you have to coach a sponsor about the file types and how they are used in production. It is important to take the time to get the correct file type.

File types such as EPS, AI, PNG, SVG, PSD, layered TIFF, or layered PDF are common to graphic design programs such as the Adobe suit. These file types are the most suitable for the production of logos and other branding elements. Any of the listed file types will work for production though it is best if the file is already using a transparent background or the file is in an editable format. JPG (Jpeg) files should be avoided as they offer poor quality for logo graphics, they lack sharpness, they do not scale, and they are generally larger in file size. Use Adobe Photoshop, Adobe Illustrator, or other graphic editor to prepare your files and always compress your images before uploading to the website.

Logo Archive

Previously collected or produced logos can be found on the Shared drive in these locations: CMOA > Shared > Design > * Sponsor Logos CMP > Restricted > Oakland Design > Collection > Sponsor > Logos

___

File compression is important as it directly impacts how fast a webpage can load. Image files larger that 200 KB will effect website performance.

The following production steps are not optional.

Logo Production Steps

Use one of the supported graphics editors like Adobe Illustrator.

  1. Set the background to transparent

  2. Update the color space

    1. Convert to RGB and use either no color management or the sRGB IEC61966-2.1 color space

  3. Update color of the vector objects

    1. Use the Hex value #000000. Black logos meet our accessibility requirements whereas color logos will need to be tested.

    2. Include a color version in cases where we have either no option or some overriding obligation. Color logos should be converted to RGB and either use no color management or the sRGB IEC61966-2.1 color space

  4. Resize the image

    1. The logo should fit exactly to the very edges of the frame

    2. The width should be 1200 pixels exactly

    3. Ignore resolution/DPI as it is meant to describe print output

  5. Save for Web

  6. Choose PNG file type. In Photoshop use PNG 24.

  7. Save the file

  8. Write a good file name

    1. Good file names are human readable. You should understand the contents without opening the file. Use hyphens between words. Append file name with (-black) for all monochrome logos

  9. Compress the file!

    1. This is an important step. This will remove all the unnecessary bits of info in the file and improve how quickly the file will load in a web browser.

    2. File compression tools:

      1. Windows: https://imageoptim.com/online or https://tinypng.com/ or https://squoosh.app

      2. Mac: download the app if you have permission - https://imageoptim.com/mac or try https://squoosh.app

Upload Logo to WordPress

  1. WordPress Media Library > Filter by Sponsors and double-check this logo doesn’t already exist

  2. Drag your compressed file to the browser window

  3. Complete the metadata details:

    1. Title: Full name of the sponsor, no acronyms, no “Logo” in the name

    2. Alt Text: Full name of the sponsor, no acronyms, no “Logo” in the name

    3. Media Category: Sponsors

Add Logo to WordPress Page

Most post and page templates have custom fields for Sponsorship Info.

  1. Create a Sponsorship Section

    1. Add Headline to provide context for the group of logos. Please use our conventions:

      1. Presenting Sponsor

      2. Program Sponsor

      3. Media Sponsor

      4. Major Support

      5. Additional Support

    2. Choose Heading Level - review document structure to be sure the heading follow in order H1-H6 as needed. See the HTML reference for more details about Headings.

    3. Choose Add Sponsorship Group and select Sponsor Logos from the pop-up menu.

      1. Write out Sponsor Name

      2. Upload or link to your sponsor logo

      3. Add the Website URL. Be sure to include “https://” portion of the address as well as the trailing forward slash.

      4. Save/Publish the post or page

      5. Review and test your work, make sure the URL works

PreviousShortcodesNextVideo Specs

Last updated