≡ Menu

Website Must-Have Tip: Crystal Clear Graphics

40 Days of Blogging - Day 27

If you are one to take note of nice design when you see it, then the idea of looking at a fuzzy, blurry, grainy, pixelated image makes your skin crawl.

Well, maybe I don’t need to be THAT dramatic…but then again, it DOES really bother me – especially if what I’m seeing is supposed to be a professional website.

The Creative Solutions Project Ombre Divider

Before I really took the plunge and started on my graphic design journey, I kept playing around with free programs like Pixlr and Gimp. Of course, my skills were very minimal, so I was just trying to at least put together a decent text-based logo for myself and maybe even add in a basic shape or design element.

But, I kept getting so frustrated because the end-result was not coming out crystal clear. And because it wasn’t clear, it didn’t look professional at all!

So I set out to figure out what I needed to do in order to get crystal clear graphics on my site. I quickly learned the difference between vector and raster graphics, and I realized that using Adobe Illustrator was 100% necessary in order to achieve the desired outcome.

So there was only one solution. OK, well, maybe two: hire a graphic designer or learn the skills myself (which is what I wanted to do for so long anyway).

Life is one great big canvas, throw all the paint on it you canAs soon as I started learning the ins and outs of Illustrator through classes at Nicole’s Classes and Atly, I fell in love with this program. I use Illustrator to design logos, website mockups (although many web designers use PhotoShop for mockups), social media icons, adding text to photos, and so much more. Sure, I could use PhotoShop for some of these things (but NEVER logos – because a logo needs to be scalable and remain crystal clear, and that just won’t happen if you create the file in PhotoShop), but I really prefer Illustrator.

In my personal opinion – and from what I learned from teachers at Nicole’s Classes at Atly – PhotoShop is used primarily for editing and adjusting photos and textures. High resolution graphics, on the other hand, really need to be created in Illustrator.

The Creative Solutions Project Ombre Divider

Now, to make matters a little more complicated, we have to consider Apple’s Retina Display.

When I went in to get my old MacBook Pro repaired, I walked out of the store with a new MacBook Pro. But, this one was the new and improved version with Retina Display. I didn’t really understand what that meant until I saw what was on the screen.

Apple-related products (i.e. their Word Processing program, Pages, and their web browser, Safari, etc.) looked extremely sharp and clear, but older products (i.e. Microsoft Word and Firefox) looked fuzzy. Additionally, my Illustrator files were (and still are) exporting at 4x the size they really were. I was (and still am) able to size them down as needed in Word or Pages and on websites, but it’s a challenge when I don’t have sizing capabilities (such as when uploading a logo to a website like PayPal, where you can’t adjust the size at all).

To be perfectly honest, I am still a bit confused in the area of Retina Display and how it relates to (and affects) Adobe products because I have definitely run into some strange and frustrating issues. I’m actually not quite sure that Adobe has fully updated all of their products to be compatible with the Retina Display, since I still run into clarity issues from time to time.

The bottom line, though, is that having sharp, clear graphics on your site is crucial. Your visitors will notice if your graphics don’t look good, and they may choose to not return if they don’t like what they see.

Important Note: When I got the new computer with Retina Display, I noticed that some of the graphics on websites I had previously designed now looked very pixelated. I went back to all of those websites and uploaded new logos and social media icons where needed so that they looked crystal clear.

If you notice pixelated graphics on your own site and you’re looking at a Retina Display, it’s likely that the images simply need to be re-saved and then re-uploaded to your site.

Need help getting your graphics crystal clear? Don’t hesitate to contact me!

Until tomorrow,

Like this post?
Get more delivered to your inbox AND receive the
ULTIMATE Website Essentials Guide
Just enter your info and it's yours:
2 comments

2 comments… add one

  • Alex April 9, 2015

    I just love how you’re always looking out for your clients, Stefani. It’s invaluable to me. Thanks so much!

Leave a Comment