Partner logos configuration
Configuration article for Partner logo section:
- Each site will have a 'Partner Logo Configuration' article that can be found in the 'Configurations' category
Partner logos are created via Gallery functionality of CMS. Here are rules:
- Each partner logo image must be attached in the attachments/images section of the configuration article and marked as gallery.
- Partner image should have Link to External URL filled (to access it, click on image name left to magnifying glass). URL must begin with http:// to point outside current site!
- To affect order of gallery use Credit field and fill in order number. Numbers from 1 to 9 should have leading zero e.g. 01, 02 .. 09 or 10, 20, 30 etc
- Images should be in PNG format with transparent background. Recomended maximal dimensions of image are 135 x 60 pixel. If you supply bigger image, browser will reduce it but result in bad quality images
- Be aware of dark background that will be applied to images, hence avoid logos with dark colors. Best results will be achieved with monochromatic light color logos.
- If you want custom text instead of standard "Official ... Partners" then fill teaser text.
Guide how to prepare images
Best way is to obtain official logo from partner for use on dark backgrounds. If you need search for logos on internet take those steps:
1. Search for image
You can use Google for finding suitable logos, for example we need Hyundai logo. Then search it as "hyundai logo file:png". We want find PNG with transparency, it will save us lot of trouble by removing unwanted background. Click on Images tab to see found images and look for simple monochromatic images with light monochromatic colors. In our case we were not so lucky, but black monochromatic image will do just fine too. Just check that image is transparent - you wil see lightray checquered background behind logo - it means transparent color. Save image localy.
2. Open image in editor
Best tool is Photoshop, but you can use any grahic editor that can handle trasparency. Let's open image in editor:
Check mode, we need RGB for working with adjustments functions.
3. Color adjustments
We have black logo, and with Adjustments -> Invert function we will invert it to light colors.
4. Crop
Our image has unecesary borders around logo.
We can simply crop it (use CMD instead of CTRL on Mac):
- select whole image CTRL+A
- copy to clipboard CTRL+C
- create new image CTRL+N and just hit Enter, Photoshop will autocrop transparent borders and set right dimensions.
- paste clipboard CTRL+V
5. Resize
Image is still big, to reduce it size and also file size let's resize it to fit 135x60 pixels.
In fact we can go few pixels bellow it, so I just used 55px for height, rest will be autocomputed. For reduction is also wise to use Bicubic Sharper filter.
6. Save
Save resulting image with "Save for Web & Devices" command.
Be sure to select PNG-24 format and Transparency is checked. Save.
7. Result
Use saved logo in configuration article and check result.