Every new designer has been there – you upload a photo to your site and it looks a little blurry. Or, maybe you get a proof back from the printer and things are looking a little off.

Not understanding photo and file resolution is a quick give away that you don’t know what you’re doing. Don’t let a great design get categorized as a “fail” because of a resolution issue -- arm yourself with a little knowledge and you’ll never again have to cross your fingers when you send something off to the printer.

 

Key Terms

Let’s start with a quick primer of some important terminology. Whether you’re working by yourself or with a designer these terms are bound to come up.

• Resolution: Refers to the number of pixels in your image. The number of pixels determines the quality and clarity of your image.

• Pixel: Defined as “a minute area of illumination on a display screen, one of many from which an image is composed.” Hundreds or thousands of pixels make up every raster image.

• DPI (Dots per Inch): The amount of dots printed in a square inch.

• PPI (Pixels per Inch): The amount of pixels in a square inch displayed on a screen.

• Raw file: A collection of unprocessed and uncompressed data that can be turned into an image. Similar to photography negatives, the RAW image is not directly usable as an image, but has all the information needed to create an image. Many photographers choose to shoot in RAW.

• Physical Size: The width and height of an image measured in pixels. A large physical size generally causes a longer time to download.

• Down-sampling: To decrease the resolution of an image. It’s always best to shoot high resolution images so that you have the option to down-sample if needed.

• Display Size: The size an image is displayed on a screen (monitor, tablet, phone, etc.)

---

Need a refresher on HOW TO SAVE your files? Revisit our file formatting guide.

---

Check your image resolution in Photoshop by clicking Image > Image Size.

Resolution Standards

Every time you set up project in Photoshop, InDesign, or an alternative design program, stick to these guidelines to ensure clear high quality images.

• Brochures & Flyers: 300 DPI

• Digital and Web: This varies. 72- 96 PPI is recommended for quick load times.

• Large format print graphics: 100 DPI
  

 

Converting inches to pixels for print

Curious how many pixels you need for a clear print? Here’s a handful of common print sizes and the corresponding file dimensions you would need to get a 300dpi print.

• 4”x6” = 1200 × 1800pixels

• 5”x 7” = 1500 × 2100 pixels

• 8” x 10” = 2400 × 3000 pixels

• 8.5” x 11” = 3300 × 4200 pixels

High resolution images are the key to a quality product. But, after you’ve converted your RAW photo files and selected a photo, it’s important to work with an appropriately sized image.

A high quality picture is great – but when you’re working with web files load speed is important and a smaller file is necessary. The higher the resolution, the bigger the file size.

Get in the habit of saving your files at the resolution you need, and you’ll make every project look like a cake walk!

---

Marketing & Creative Services in Greensboro: Hue & Tone Creative

Need high quality presentation graphics, a fresh new logo, or an updated website? Hue & Tone has you covered. Work with a creative professional that will take the time to listen and bring your vision to life. Contact us today to get the conversation started.

File formats can read like a different language -- we've all been there. Whether you’re a design student or a small business owner, it is important to understand which formats are best for websites, social media, or logo and packaging design. Sending the wrong file can cost time, money, and a compromised final product.

To clear up some of the confusion, we've pulled together this easy file format guide. The perfect balance between basic and exhaustive, we hope this will answer all your file-related questions: 
 

.JPEG- Joint Photographic Experts Group

Best for: Web and social tasks where the image has a fixed resolution
This format is great for producing high resolution images for both print and web.  JPEGs work through lossy compression, which means that the quality decreases as the file size gets smaller.
 

.TIF- Tagged Image File

Best for large scale prints, banners, large signs
This format is popular with graphic artists and photographers because it’s great for large scale print images.  Because of its large format, it will cause a slow load time and is not recommended for web pages.

.GIF- Graphics Interchange Format

Best for social, small icons, and blogs
Gifs can be downloaded quickly and are often animated. They work through the bitmap image format and can use up to 256 colors in the RGB palate.
 

.PNG- Portable Network Graphics

Best for website headers, logos, any time you need a transparent background
PNGs are low resolution graphics that are typically used for web pages.  They support lossless data compression, so they can be reconstructed without a loss in quality.

If you want your image to have a transparent background (not white) then you'll probably want to use a PNG! 
 

.RAW

Best for: Editing photos before converting them to JPEGs
This format maintains all the data from the image sensor when you take a picture. Unlike a JPEG, a camera raw image file is unprocessed and not yet ready for print. Because RAW files have yet to be compressed, they are ideal for high quality images. Beware -- only certain computer programs will read .raw files! 
 

.PDF- Portable Document Format

Best for: Sharing graphics designed in Adobe, text documents, sending to printer
PDFs are a versatile file format that make it easy to share images and documents. Because of their accessibility, these files are a great way to share work designed in Adobe without the hassle of downloading design software. When in doubt about the software or operating system someone is using send a PDF! 

.AI- Adobe Illustrator Document

Best for: art files
An .ai file is one that was created in Adobe Illustrator -- meaning it was probably used for vector illustration or file manipulation. If you want another designer to be able to edit your original design .ai is one of the formats you could send them. 

.EPS- Encapsulated Postscript

Best for: sharing images to non-Adobe Illustrator users, sending advertisements and pages, and for sharing logos.
An EPS is a file extension for high resolution vector graphics created in Adobe Illustrator.  This format can contain both graphics and text.
 

.PSD- Photoshop Document

Best for: sending layered images, editing and retouching photos, creating logos and packaging
This raster file format uses layers to easily edit and modify images in Adobe Photoshop. This format is great for retouching photos, manipulating images, and for creating complex digital artwork.
 

.TTF- TrueType font

Best for: sharing fonts
Due to its precision and ability to maintain quality, TTFs are the standard format for sharing fonts.
 

.RSS- Rich Site Summary

Best for: sharing news stories, subscribing to blogs, monitoring social media
This format uses web feeds to publish updated blogs, audio, video, and news stories. The RSS format is popular for blogs because it updates subscribers to new content automatically.
 

.PHP

Best for: web development, e-commerce, application development
PHP is used for web development and serves as a programming language. It can be embedded into HTML code and can be used with web template systems.
 

.MPEG 4

Best for: Storing audio, video, subtitles, and stills, online streaming
This digital multimedia file format is used both audio and visual. It can also store still images and subtitles.
 

.MOV

Best for: saving movie, music, and text files, streaming on computers and mobile, downloading audio and video
MOV is a multimedia file container used by Apple’s QuickTime media software. Most videos online are saved in this format because the compressed format makes it easier to download and stream files.  Although it was developed by Apple, it is also compatible with Windows.

.WMA- Windows Media Audio

Best for: high quality digital audio and video
Developed by Microsoft, this format is used for audio data compression. This file format can only be played using Windows Media Player.

One more important note: It's not a file format, but color mode is an important distinction to make when exporting artwork. CMYK and RGB are the main two color modes. RGB is an additive color model used for web. Red, green, and blue light are added together to produce different colors. CMYK is a subtractive color model used for print media. Cyan, Magenta, Yellow, and Black (key) are combined for color printing. When exporting from programs like Illustrator or Photoshop it's important to make sure you've selected the right color mode -- or you'll be shocked by what you get back from the printer!

If you're ever unsure about what format to use, be sure to refer back to this guide! We've had plenty of our own file malfunctions -- and it's not a fun place to be. 

Tell us, have you ever had a serious file mishap? 

And just like that, it's Friday again. To help you transition from the weekday hustle to weekend relaxation (you really should relax) -- here are a few links I've been loving this week!  

 One | I'm all about these (free!) hand-drawn vector stripes & patterns. 

Two | Here's a good cheat sheat on the file types you'll likely encounter in design work. 

Three | Another super-usable post: how to establish a brand identity for your small business. This is solid advice. 

Four | A little less resource-oriented & more on the "interesting to know" side: the state of graphic design in 2015. 

Five | We'll close this week with another freebie -- these gorgeous brushstroke vectors.  

This week's posts: 

• Easy DIY stock photography 
• What I'm working on  

This week's music: Spotify Morning Productivity playlist  

Have a great weekend! I'll see you here on the blog on Tuesday.