Homeschool Series: Lesson 02

Homeschool Series | Lesson 02

Alphabet soup of CMYK, RGB, JPG, and DPI! What do all these file types mean?

Focusing Downtime on Your Brand

By // Circa Studio

The ABCs of File Prep

Plus a Pop Quiz to See if You Know Your Stuff

RGB, CMYK, DPI, JPG, PNG, ROY G. BIV, what? Not to add more acronyms to the mix, but if you’re going to DIY your marketing efforts in-house, understanding the basics of this alphabet soup will go a long way in making sure your brand visuals print great, load fast, and always look their best.

At Circa, we see this kind of stuff a lot: high-res photos from expensive professional shoots getting lost or swapped for low quality, tight-cropped versions by accident; logo files reduced to small, low-resolution save-outs when working master files get lost; artwork from print ads repurposed, unchanged, on bloated websites that take forever to load.

If this sounds familiar, don’t worry! All of this and more can be avoided with a basic understanding of file prep. Let’s start the crash course, shall we?


   Color Modes

If you have a home printer then you’re probably already familiar with the letters CMYK (cyan, magenta, yellow, and black), because printers use these four inks to create all other colors. Computer screens, however, use the RGB color system (red, green, blue) to display colors. All of this means that you’ll need your go-to assets saved in both color modes so that you can use them appropriately. Making a flyer? Save your file in CMYK. Uploading to Instagram? Use RGB.

File Size

   File Size

File size has two factors — dimensions (height and width) and density (dots per inch). Concerning the latter, the rule of thumb is 72 dpi for digital, 300 dpi for print. Here’s what you need to know: For print, density matters big time. Lower resolutions will come out looking blurry and even pixelated. On the web, the big concern isn’t density so much as total pixel count, and the goal is to make images as light as possible. Try to keep each image weight smaller than 500 KB. Anything larger is probably overkill and could cause your site to load slowly.

File Type

     File Types

EPS & AI — Encapsulated PostScript and Adobe Illustrator — If you learn one thing here, it’s making sure your logo was created using Adobe Illustrator or a free vector-based alternative. From super small to billboard-sized, vector graphics can be scaled without restriction or pixelation. A working file in .AI or .EPS ensures that you can prep and deliver a crisp, polished logo at any size for any purpose.

 

Best for: ✔️ Print ✔️ Digital ✔️ Logos ✔️ Icons ✔️Graphics  ✘ Photography ✘ Animation
Quality: ✔️ Working file Lossless   Transparency

GIF — Graphics Interchange Format, and then there was GIF. GIFs offer transparency but come with data compression, because their color mode is totally wack, just saying. They’re great for short, digital animations. They may be meme royalty, just don’t try to print them with expectations of clarity.

Best for: ✘ Print  ✔️ Digital ✘ Logos ✔️ Icons ✘ Graphics  ✘ Photography ✔️Animation

Quality: ✘ Working file ✘ Lossless  ✔️ Transparency

JPEG — Joint Photographic Experts Group is also often shortened to JPG. Versatile and highly customizable, JPGs are a safe bet a lot of the time. Use them at full resolution for print, or compress them to balance weight, load time, and image quality on the web.

Best for: ✔️ Print ✔️ Digital ✔️ Logos ✔️ Icons ✔️ Graphics ✔️ Photography ✘ Animation

Quality: ✘ Working file ✘ Lossless ✘ Transparency

PSD  —  Photoshop Documents are working files within Adobe Photoshop. From photo editing to graphic design and even animation, Photoshop is a workhorse with creative capacity beyond the photo editing that its name suggests. If you’re looking for a budget-friendly alternative, check out GIMP or Affinity.

Best for: ✔️Print ✔️ Digital ✘ Logos ✘ Icons ✔️Graphics  ✔️Photography ✔️ Animation

Quality✔️ Working file Lossless   Transparency

PNG — Portable Network Graphics are digital-use files that use lossless compression. This makes them ideal for high-contrast, high-detail graphics, and photography because there’s no loss in quality when they’re saved. Most importantly, this filetype also supports transparency, so it’s perfect for layering on top of other graphics without an awkward white background getting in the way. They are not ideal for printing because they do not support CMYK color mode.

Best for: ✘ Print  ✔️ Digital ✔️ Logos ✔️ Icons ✔️ Graphics  ✔️ Photography ✘ Animation

Quality: ✘ Working file ✔️ Lossless  ✔️ Transparency

TIFF — Tagged Image File Formats are big source files often used by illustrators and photographers. They are ideal for high-quality printing. TIFFs won’t degrade as they are saved over and over again, unlike a JPG.

Best for: ✔️ Print  ✘ Digital ✘ Logos ✘ Icons ✘ Graphics  ✔️ Photography ✘ Animation

Quality: ✘ Working file ✔️ Lossless  ✔️ Transparency

EPS & AI — Encapsulated PostScript and Adobe Illustrator — If you learn one thing here, it’s making sure your logo was created using Adobe Illustrator or a free vector-based alternative. From super small to billboard-sized, vector graphics can be scaled without restriction or pixelation. A working file in .AI or .EPS ensures that you can prep and deliver a crisp, polished logo at any size for any purpose.

Best for: ✔️ Print ✔️ Digital ✔️ Logos ✔️ Icons ✔️Graphics ✘ Photography ✘ Animation
Quality: ✔️ Working file Lossless
Transparency

GIF — Graphics Interchange Format, and then there was GIF. GIFs offer transparency but come with data compression, because their color mode is totally wack, just saying. They’re great for short, digital animations. They may be meme royalty, just don’t try to print them with expectations of clarity.

Best for: ✘ Print ✔️ Digital ✘ Logos ✔️ Icons

✘ Graphics ✘ Photography ✔️Animation

Quality: ✘ Working file ✘ Lossless
✔️ Transparency

JPEG — Joint Photographic Experts Group is also often shortened to JPG. Versatile and highly customizable, JPGs are a safe bet a lot of the time. Use them at full resolution for print, or compress them to balance weight, load time, and image quality on the web.

Best for: ✔️ Print ✔️ Digital ✔️ Logos ✔️ Icons ✔️ Graphics ✔️ Photography ✘ Animation

Quality: ✘ Working file ✘ Lossless

✘ Transparency

PSD  —  Photoshop Documents are working files within Adobe Photoshop. From photo editing to graphic design and even animation, Photoshop is a workhorse with creative capacity beyond the photo editing that its name suggests. If you’re looking for a budget-friendly alternative, check out GIMP or Affinity.

Best for: ✔️Print ✔️ Digital ✘ Logos ✘ Icons

✔️Graphics  ✔️Photography ✔️ Animation

Quality✔️ Working file Lossless

Transparency

PNG — Portable Network Graphics are digital-use files that use lossless compression. This makes them ideal for high-contrast, high-detail graphics, and photography because there’s no loss in quality when they’re saved. Most importantly, this filetype also supports transparency, so it’s perfect for layering on top of other graphics without an awkward white background getting in the way. They are not ideal for printing because they do not support CMYK color mode.

Best for: ✘ Print  ✔️ Digital ✔️ Logos ✔️ Icons ✔️ Graphics  ✔️ Photography ✘ Animation

Quality: ✘ Working file ✔️ Lossless

✔️ Transparency

TIFF — Tagged Image File Formats are big source files often used by illustrators and photographers. They are ideal for high-quality printing. TIFFs won’t degrade as they are saved over and over again, unlike a JPG.

Best for: ✔️ Print  ✘ Digital ✘ Logos ✘ Icons

✘ Graphics  ✔️ Photography ✘ Animation

Quality: ✘ Working file ✔️ Lossless

✔️ Transparency