[UPDATE 10.29.19: I used to have a video for this post, but it disappeared into cyberspace. So my apologies but I had to remove the link. Also, I’m using a new WordPress theme that makes following my own advice in this post ineffective…the result is a crisp but tiny logo, and rather than troubleshoot I just said WTF?! and reverted to using a blurry PNG logo. Somethings just aren’t worth it to me to worry about anymore. But these instructions worked great with my previous WordPress theme. Good luck!]
My awesome spreadsheet goddesses, I must preface this post with an explanation and disclaimer:
#1 It has nothing at all to do with spreadsheets or organization.
#2 I am not a graphic designer.
Nonetheless, I feel compelled to blog about this topic because, well, most of my subscriber base consists of bloggers and/or entrepreneurs. And, if you fall into either camp, this post may interest the bejeezus out of you.
You know when you buy a new lavender-colored car and then, suddenly you start seeing lavender-colored cars everywhere? Maybe? Well, it’s the same with the topic of this post. You know, once I discovered this soon-to-be-exposed problem on my own site, I started noticing it on a lot of your sites as well.
Are you ready? *drumroll, please*
I’m going to teach you a stupidly simply trick for converting your logo into a crisp, non-pixelated file that can scale up or down to your heart’s content.Does your logo look blurry or pixelated on your WordPress site? Fix it with this simple trick!Click To Tweet
Now, the reason I’m writing this post isn’t because I want to wow you with my design prowess. Truth be told, I have none.
No, the reason I’m writing this post is because I literally spent hours scouring forums for this answer unsuccessfully the other day. What a waste of time!
My question: How can I make my text logo not look pixelated or blurry?
Simple question, no?
I did not find a single helpful search result. Nada.
For the record, here is the logo I was working with:
Lest you tell me it’s not that blurry, look…it’s my logo and it should look freakin’ crisp.
If you are a perfectionist, I know that you get it.
So, aside from the other issues that said logo embodies, I knew that it had to not be blurry.
Here’s what I tried that didn’t work (recall that I am not a graphic designer so these may sound stupid to you if you are):
- Exporting the file at 300 PPI (this just makes the image bigger);
- Adjusting a bazillion other settings involving terms like “alias” (no change);
- Doing a command + Y or something like that (no change to the export);
- Doubling the size of my export (my WordPress theme wouldn’t shrink the image, so it was way too big).
- Creating a smart object in Photoshop that linked to the Adobe Illustrator file (dumb).
Finally, I texted my ex-husband, Alex Mariño – a wonderful graphic designer, web designer, and otherwise decent human being – late the other night for help. After about an hour, he handed me back the solution, which I’m about to share with you.
[Just a quick note: I use self-hosted WordPress and uploading my logo requires the use of a free plugin because WordPress doesn’t recognize svg files otherwise. If you use another platform like Squarespace, I’m afraid that this post probably won’t help.]
Here’s how to make your logo look pixel-perfect at any resolution:
- Have your logo open in Adobe Illustrator. Then,
- Click on the selection tool (black arrow) => select ‘Type’ from the menu => ‘Create Outlines’.
- Go to ‘File’ => ‘Save As’ => choose ‘svg’ under the ‘Format’ drop-down list => ‘Save’ => ‘OK’.
- Now, right-click on your saved file => ‘Open With’ and choose your favorite text editor. I use Text Wrangler (it’s both awesome and free), but you could use any notepad/text app.
- Beginning on or around line 2 will be ‘<svg …[lots of scary code stuff]… >’ Find ‘style=’ and put your cursor in front of it. [see screenshot below] Now…
- Type width=”400″ (replace ‘400’ with however wide you want your logo to be in pixels). Then, hit your spacebar and type height=”100″ (replace ‘100’ with the height of your logo). Hit the spacebar once more and save your file.
- Upload the WordPress plugin SVG Support and activate it.
- Now, drag your logo into your media library and replace your existing logo with it.
- Go back to your Illustrator file and undo the ‘Create Outlines’ move before you save and close your file.
This came from an awesome reader via email who did not want me to credit her (thank you, wonderful human!). Please consider altering my instructions above accordingly. Note that I did not personally test-drive these suggestions…
I am SO happy and grateful to you for posting this oldie, but goodie. I have done website design for years, but this stumped me, and now as we edge into SVG files for logos and images, I have needed a quick how-to versus the long drawn out blogs written in developer language. And none work!
To add to your post, sometimes the SVG logo won’t show up in your website header. I pasted a sample line below of code when using text edit to change the file size (this is for a favicon set at 30×30). This way the viewBox aligns with the file size and nothing is cut off or missing. CHEERS!
<image id=”XYZ” x=”0″ y=”0″ width=”30″ height=”30″ xlink:href=”data:image/…
[Changed width and height in three places. Also changed x and y to “0” as those were different numbers and caused the viewBox cutoff.]
…end of awesome reader feedback <3.
Let’s cover a few things that we just did.
- In Illustrator, we created outlines of text and shapes. This eliminates the pixelation that occurs when images (jpeg and png files) are enlarged, as well as the blurriness that accompanies smaller images (like my logo).
- In our text editor, we specified the size we wanted our logo to be. Why? Because svg files will fill the size of their containers. So, if your WordPress theme allows you to import a logo that spans the entire width of your site (like mine), your svg logo will get all excited and overwhelm your screen – hence, the need to constrain it.
- Back in Illustrator, we undid the ‘Create Outlines’ move because once you convert your logo to an outline instead of text and shapes, you cannot edit it as you normally would. In other words, if you decide later that you’d like to see what your logo would look like using Monteserrat font, you would have to recreate it. By undoing this last step, you won’t have to.
Now, here are screenshots of the text editor bits:
And, here is the plugin you will need to upload:
I promise not to post too much on these sorts of topics, but I just had to share this secret with you. Now, I’d love to know whether you have any awesome graphic design secrets you’d dig sharing. Do tell! Thanks 🙂
Oh, and if you stumbled on The Spreadsheet Alchemist through this post’s Pinterest image and are new to my site, why not click here to see what other content may interest you?
Thanks so much for swinging by! <3