Logo preparation 

Which logo display looks more professional?

The AP logo or the fraction of the Guardian logo you can just about see?

I think we all know the answer to that...

Below is a step-by-step guide on how to prepare logos for web pages and articles: 

Step 1. 

Finding the logo - you will want to source a transparent background PNG version of the logo that is a min size of 470px on the longest side.

• Go directly to the organisation's website, right click the logo, open the image in a new tab. If it's a reasonable size (i.e. not really tiny like 125px) , right-click again and save the image

• Sometimes it's not possible to view/ save a website logo as they might use an SVG file type (see below). If this is the case try the alternative methods below. 

• Google the organisation name and then logo, you can try adding the word PNG for better-known organisations. 
• If you cannot find any logos with a PNG background, you can try websites like Freebie Supply - Free Resources For Designers.  
• You can look to their social media accounts, profile picture are usually a great place to find good logos

Step 2. 

Once you have located the right photo you need to prepare it so that it's the right size - 470px by 470px. 

You can do this using any photo editing tool such as Paint 3D, Canva, Photoshop etc.

You can then upload the file as you usually would to the Media area in Umbraco.

Instruction for Paint 3D:

• Open Paint 3D and then go to 'File' > 'Open'
• Open your logo file 
• Click the 'Canvas' option in top menu bar
• In the right-hand menu, toggle on Show Canvas and Transparent Canvas
• Turn on the "Lock Aspect Ratio" and "Resize image with canvas" options and set the dimensions to display in "Pixels"
• Resize the image to be "470px" on the longest side in either the width or height box

Next we want to make the transparent background to fill out so the logo becomes a square without distorting it.

• Untick or turn off the "Resize image with canvas" and "Lock aspect ratio" options
• Set the shorter side to 470px so both width and height should now be 470px
• Save the image - click on "menu" then Save As, Image and select the PNG option

Note: only logos should be saved and uploaded as PNG files. All other images should be saved as JPEGs.