Tips for shrinking logos
- Started
- Last post
- 8 Responses
- BusterBoy
The site I'm working on has one aspect where we need to display the logos of a bunch of manufacturers. They can often be quite intricate and/or detailed...and we in part of the site, the logos can be no more than 75 pixels high.
I've shrunk them in photoshop but when put on the site, can be a little distorted. Also exported them as SVG and not much difference.
Are there any tips or tricks when it comes to something like this?
- BusterBoy0
- Looks a bit crap at 75px heightBusterBoy
- The only thing you can do really is run it through a favicon generator or do it by hand in a simplified pixel art style_niko
- ^ Pretty much this. I'll bet anything most of these logos don't have a simplified version for small sizes (without a wordmark, to use the Ferrari example)Continuity
- that combination doesn't exist in Ferrari's brand guide.uan
- sausages1
Butcher it. Shield to the left, text on the right, then send them an invoice
- uan0
- consult brand guidelines for small size applications.
- use whatever they use on their sites as favicon.
- expand on mouseover
...- And yet *a lot* of high-profile brands don't have any guidelines or rules for logo reproduction at small sizes.evilpeacock
- quite sure that's not true...it's common use have a small size version in design guides.uan
- Certain very large brands might surprise you. If they do cover it, often those executions don't work in specific digital mediums, esp. video.evilpeacock
- My favs are clients with guidelines that I follow to-the-letter, then I get notes to change due to a contradicting rule that was never written for the medium.evilpeacock
- monospaced0
For this one specifically I would use just the word mark and lose the emblem. One or the other.
- milfhunter2
- <ideaist
- This is the way to go and pretty simple to execute. However... good luck trying to get this to fly with clients or non-web savvy designers.evilpeacock
- uan2
- Literally what I said. Just use the wordmark.monospaced
- your branding muscles are in shape.uan
- prophetone2
Logos need to be scaled against each other, some are heavy, some appear lightweight, then there's shapes, width vs heights.
You can control this so you're happy when they present as a group, and making it easy on the front end dev'ing by using a basic image grid by containing each logo in a 4:3 transparent container.
If all vector prep every logo v/h entered on a 400x300 card with 0 opacity, all the logos together on an Illy page so they can be scaled against each other, balanced. Then one card at a time export selection to a vector SVG for each.
If PNG output needed b/c vectors are not available then make sure card is at least @3-4X the final height, 400x300 would work well if 75px height is max display. Export them from Photoshop as PNG/24's ideally, or at least basic PNG 256's.
Every logo is now exact same size and spec, visually-balanced, and will all scale the same way across a grid.
Front end is simply scaling them into the container grid, scaling them down either height 100% width auto, or opposites depending so they're responsive, SVG's already beautiful, PNGs delivered at a retina res.