So, every week, part of my cover-designing responsibilities is to create a version of the cover that we can use as our Facebook cover photo. Easy enough. Here’s the cover I designed:
Easy enough, right? But when we uploaded it to Facebook, it turned out like this.
A disgusting mess. (If you don’t believe me, click these pictures to enlarge.)
I was asked to fix the file and send it back over. I resaved it (for web, mind you – I’m no dummy), sent it back. Still, same problem. I saved it as a .png. I saved it as a .gif. I saved it as a .pdf and then converted that into a gif. Still, the muddy text remained. I redid the text completely, created the same effects in Illustrator, and still, the muddy looking text was staring back at me, laughing in my face. It didn’t look like that anywhere else. I checked pixel depth, color mode, all kinds of logistics.
Was the file to blame, or me? I placed the text over a different black and white picture, growing frustrated. Nothing worked. My super talented friend Richard and I put our heads together and were totally stumped.
Nothing worked, and it was 7:30 PM. I’d been at it for two hours, trying different computers, different versions of Photoshop. It seemed to be that the color red was causing the problem. So I changed the color to orange, sent it to my coworker with an apology, and went home in frustration.
I read about Facebook’s image compression, and realized that it was indeed something to do with the color red + the gradient. It doesn’t deal well with that amount of information. I found a suggestion buried in the comments of some random Adobe forum, where someone had tried adding noise to fool the compressor, and had luck.
So I tried that….
And voila! Not the highest quality image, but certainly the least muddy. Certainly something to add to my bag of tricks in the future.