< Back to Support home

Let’s create a grantee logo


What’s the challenge?

The ELMA website has a very light gray background. As a result, logo files with white backgrounds don’t look good. Here’s an example:

This looks bad! :(

This looks bad! :(

This looks great! :)

This looks great! :)

 

It’s easy to avoid this problem! It just takes the right file.

A .png file on a transparent background:

This file has a transparent background.

This file has a transparent background.

OR A logo (of any file type) on a non-white background:

These logos have no white background

These logos have no white background

DGMT.png
Medical-Credit-Fund.png

OR A file with a white background that has been adjusted to light gray.

This file is not transparent. Instead, the background has been set to match the website.

This file is not transparent. Instead, the background has been set to match the website.

A note on image size

Logo image files should be roughly 200-400px wide (and any corresponding height, depending on the logo’s shape). Smaller files should be avoided. If you download a much larger file, you should shrink it down in order to maximize the speed of the site. Do so either in Photoshop (Go to Image > Image Size…) or in Squarespace itself after you’ve upload the file (in the edit image light box, click “EDIT” under the image, and go to the Resize tab).


Step 1:
Identify the correct logo

Go to the organization’s website to identify their current logo. Right-click it and try saving it. If it’s usable as is, (i.e. no white background), simply save it and you’re done!

If the organization does not have a logo, upload the file “Blank.png” to the grant listing in both places the logo would normally go.

A blank image is right here (but invisible)! Right click the blank area above and Save Image As…


Step 2:
Search on Google Images

Find a .png file on a transparent background. Try image-searching for: “[Organization name] logo png". You can tell if the image has a transparent background because it will show up over a white and gray checkerboard background in the image results, as shown here:

If the organization’s logo is on a solid background (i.e. no white edges), you can use any image file you find.

Example:

DGMT.png
 

Step 3:
If all else fails, remove white background in Photoshop

Follow these instructions to change a white background to the ELMA gray:

  • Download the best version of the logo you can find on a solid white background. Always try to start from a file that’s at least 200px wide.

  • Open it in Photoshop.

  • If it’s larger than 400px, you can shrink it down proportionally so it’s 400px wide (by whatever corresponding height).

The ELMA website background color is: #f7f7f6

Now let’s change that white to gray!

Look at the Layers panel. Click the New Layer button (highlighted in red, blow). You’ll see “Layer 1” added.

Click any of these screenshots to see them bigger.

With Layer 1 highlighted, open the Edit menu and click “Fill…”. In the light box that appears, under Contents, select “Color…”. In the color selector box, paste the code for the ELMA gray (f7f7f6) into the box labeled “#”.

Finally, with Layer 1 still highlighted, change the blending field in the Layers panel from “Normal” to “Multiply”. You should now see the logo with the white space replaced by gray. Save the file as a .jpg. That’s it!