Design software is becoming democratized—and fading away are the days of requiring complicated (and expensive) design software to make materials look professional and on-brand. But the basics of design—including file formats, color modes, composition and other considerations are still critical to understand.

As a small agency, we believe wholeheartedly in empowering and equipping our clients. While we’re happy to help execute on projects ranging from social media campaigns to website redesigns, much of the day-to-day work still needs to be done internally—especially when it comes to timely and relevant social.

In that spirit, I spoke to a small group at an unconference last year; the topic was something like, “Design for Non-Designers from a Non-Designer.” I’ve realized, over the past few years of running gish&co., that most folks lack some understanding I had previously considered basics. Things like: Holding down shift when resizing shapes to ensure the aspect ratio doesn’t become warped; ensuring enough contrast between a background color or image and the overlay text; or the importance of having a vector version of your logo when ordering something large in print.

Today, I’d like to share a few of the most common questions I get when it comes to DIY design. I hope you can learn a thing or two!

File Formats 

Most folks seem to ask for .eps versions of their logo, only when a designer or some kind of print company asks for it. They don’t tend to know what it means. A couple things to know:

Vector vs. Raster

A vector file or image is made up of thousands of tiny lines and pathways that, using math (!) create shapes that can expand or contract without losing quality. A raster image is made up of pixels, so it’s only as big as it is—you can’t take a 300 pixel (or 300 px) image and make it 1000 px without losing quality.

Any logo designer worth her or his salt will give you a multitude of logo versions, and the mother of all formats will be in .eps or .ai (.eps is a standard vector extension, whereas .ai is for Adobe Illustrator… we’ll get to that).

JPG, PNG, GIF, oh my!

There’s plenty you could know, but only so much you need to know about these image file formats. Here’s a cheat sheet:

• JPG – You can use it most of the time. No device will have trouble opening it, and the file size is probably not astronomical.
• PNG – These babies are capable of transparent backgrounds—yay! This is important when you want to put a logo or icon on a background of a different color, but you don’t want to have an ugly white box around it. The file sizes tend to be larger, though—so be careful when using them on the web.
• GIF – I basically never use GIFs unless I’m animating things. If you want to get fancy, you can use Photoshop or an online GIF maker to animate things. (Oh, and it’s GIF, not JIF. I don’t care what the founder says. And if you don’t agree, I give you this.)
• EPS or AI – See above. These are vector, they should always be used for professionally-printed materials, and your computer might have a hard time knowing what to do with them unless you have the right software.
• SVG – Slightly more complicated, this one is basically vector for the internet. SVG files can expand and contract to fit myriad devices, without sacrificing quality and while keeping a small enough file size to ensure a quick load.

Color Modes

Hopefully, if you had a professional design your logo, they also gave you some sort of logo guidelines. The guidelines document should have numbers for various color modes, including CMYK, RGB (and Hex), and PMS or spot. The easiest rule of thumb is to remember that CMYK is for print, where RGB is for web. But of course, it gets more complicated.

 

• CMYK – This acronym stands for cyan, magenta, yellow and black. (I realize “black” doesn’t start with a K but if it were CMYB it would be blue so what do you want from me?!) It comes from the printing press days when each of these four colors each had its own plate. While the technology has changed, the approach is the same—use CMYK for print (unless you can print spot, which we’ll get to).
• PMS or Spot – A spot color process uses pre-mixed inks, rather than a four-color process via CMYK. Most of the time, especially for small print jobs, they’ll use a four-color process so you should send them a CMYK file. But for larger jobs, or jobs that require an exact ink match (like the bright Davis Law Office logo), spot is ideal—because you can match it to a Pantone swatch and see the exact color before you go to print.
• RGB – Standing for red, green, blue, this approach is additive rather than subtractive like CMYK (but you will never need to know that so feel free to forget it immediately). If it’s for a screen, use RGB.
• Hex – Hex will give you the same on-screen result as RGB, but is hexadecimal vs. decimal. (Feel free to forget that, too.) If you see a # before a 6-digit alphanumeric string, it’s hex.

Layout Tips 

It’s entirely possible to be well-versed in all of the above, but still not have a clue how to put together a professional-looking design. Here are some core things to consider:

• Focal point – Where does your eye naturally go when you first look at your design? Is the primary message getting across? Does your eye naturally gravitate towards the content (logo, text, image, or otherwise) that you want people to notice? Or is your eye confused and distracted, jumping around the image and not sure where to focus? Play with sizing, spacing, proportions—and if the piece is too busy, take something away. Simplify, and play up the size, color, or surroundings of the area of focus.
• Alignment  – If the content is supposed to be centered, is it? Check to ensure there is equal space on either side of the text. If a headline and an image are both left-aligned, does the left side of the headline line up with the left side of the image?
• Contrast  – If you’re trying to put a logo or text over an image, is there a strong enough contrast between the background and the logo or text so it’s easily readable or viewable? Is there enough contrast throughout the image to make it visually appealing and easy to absorb? Consider where you’re going to place the image—if it’s on a webpage with a white background, will the background of your design need a thin border, or can it stand on its own?
• Space  – This is a tough one to explain, but it’s critical. Space can group things together, space can create emphasis, and space can drastically improve legibility. Negative space (or whitespace) are hallmarks of professional design. Here’s a great piece if you want to learn more.

Tools

Okay, so now you are armed with knowledge—what tools do you actually use to play around?

Of course, the Adobe Creative Suite (now Creative Cloud) is the mothership. But if you pay the $50/month and try to jump in, you’ll find yourself getting overwhelmed quickly. Programs like Photoshop, Illustrator and InDesign are meant for professionals—and without training, learning how to use them can feel insurmountable.

At gish&co., we often recommend Canva to our clients. Not only does it come standard with layouts that you can customize to fit your needs, but the professional/Canva for Work option allows you to upload your own color palette and brand fonts, helping to ensure all of your designs are on-brand. It’s also really simple to learn, with drag-and-drop functionality that makes it simple to make professional-looking designs in minutes. There are other web-based or freeware tools, such as Google Photos, GIMP, or Sketchapp, that I’ve heard good things about as well.

That being said, there are tools that come standard on most computers that can probably do more than you know! For Mac users, did you know by clicking the little toolbox at the top of the Preview app, you can do things like add text, add shapes, and draw squiggles? You can also adjust the size and color (just click Tools at the top) of image files (not PDFs), and use File -> Export to save the file to a different format—such as JPG or PNG. For Windows, I’d stick to the web-based apps… There isn’t anything I’m aware of that comes standard and can hold a candle to Preview.

—

As you can see, there are myriad ways to get the job done well—if you have the technical capacity, time and attention to devote. At the end of the day, though, there are projects for which it’s always better to hire a professional to maintain the visual integrity that’s so critical for your brand. We’re always happy to help, or to refer you to one of our design partners! Just get in touch.