Skip to content
Return to Lesson

File Types and Resolution Transcribed Notes:

  • Goal 1: Know Your Building Blocks. Understand the difference between vector and raster files, and learn which color mode (RGB or CMYK) to use for screens versus printers.
  • Goal 2: Choose the Right File. Learn how to pick the correct file format for any job, ensuring your images look sharp, has transparency when needed, and is the right size for the project.
  • Goal 3: Check the Quality. Verify that your files are truly print-ready, high-resolution, and using the correct settings before you send them to a client.
  • Goal 4: Master File Saving and Converting. Convert and export files for different needs, ensuring you can turn your working design into a final product that is ready for the real world. 
  • Vector: These files are made of mathematical equations (paths, points, and curves) rather than static colored pixels. Scale to billboard size or shrink to a postage stamp. It will never lose quality. Think of it as a blueprint.
  • Raster: These files are built directly from a grid of colored pixels that define the boundaries of the image. Stretching beyond original dimensions causes pixels to stretch, resulting in a blurry look. Think of it as a mosaic.
  • Transparency: Not all files can have a see-through background. A transparent background allows graphics, logos, and illustrations to sit seamlessly on top of different backgrounds, patterns, or colors. Crucial for professional layout integration.

 

How Formats Behave:

  • NO SUPPORT (e.g., JPG): Automatically adds a solid white or black box behind your logo or icon upon saving, ruining placement on colored backgrounds.
  • FULL SUPPORT (e.g., PNG, AI, SVG): Your design remains independent, sitting cleanly on top of whatever background environment is used.

1. RGB (Red, Green, Blue) The color space used for light-emitting devices. Every color on your screen is created by combining varying intensities of red, green, and blue light. 

  • The Rule: If it glows (monitors, smartphones, tablets, TV), it uses RGB. 
  • The Danger: If you accidentally use RGB for professional print, your printer will try to convert those vibrant, light-based colors into ink, which often results in a dull or “muddy” finished product. 

 

2. CMYK (Cyan, Magenta, Yellow, Black) The color space used for physical ink-based printing. “Key” stands for Black, which is used as the foundational color to add detail and contrast to the Cyan, Magenta, and Yellow mix. 

  • The Rule: If you can touch it (business cards, posters, billboards, packaging), it should be in CMYK.
  • The Danger: Using CMYK on the web can cause colors to look slightly “off” because screens are physically incapable of displaying the specific pigment-based spectrum that ink covers

DPI / PPI (Dots & Pixels Per Inch)

What it is: A measurement of density and clarity.

  • PPI: Refers to the digital resolution on your screen.
  • DPI: Refers to how many physical ink dots a printer places into a single inch of paper.

Why it matters: It dictates the physical size at which an image remains sharp.

Resolution Rules of Thumb

72 DPI/PPI (Web Standard):
The standard for web images. It is low-resolution, which keeps file sizes small so websites load quickly.

300 DPI/PPI (Print Standard):
The “Gold Standard” for professional, high-quality printing. It ensures that when your design is printed, the human eye cannot see any blurriness or pixelation.

.AI Category Vector, Color Space CMYK or RGB, Transparency Yes, Use Working file for Adobe Illustrator. The gold standard for master logo creation and custom branding.

.EPS Category Vector, Color Space CMYK or RGB, Transparency Yes, Use Legacy universal vector format. Used to send high-end graphics to commercial print vendors, sign manufacturers, and embroiderers.

.SVG Category Vector, Color Space RGB Only, Transparency Yes, Use Built strictly for screens. Used for website logos, responsive app icons, UI elements, and interactive animations.

.PDF Category Hybrid, Color Space CMYK or RGB, Transparency Yes, Use The final delivery standard. Used for sending multi page brand decks, print-ready books, brochures, and corporate documents.

.CDR Category Vector, Color Space CMYK or RGB, Transparency Yes, Use Working file for CorelDRAW. Heavily used in specific signage, laser cutting, and vinyl plotting industries.

.PSD Category Raster, Color Space CMYK, RGB, etc., Transparency Yes, Use Working file for Adobe Photoshop. Used for layered photo manipulation, advanced digital painting, and complex color grading.

.TIFF Category Raster, Color Space CMYK or RGB, Transparency Yes, Use High-fidelity, uncompressed format. Standard for professional photos, fine art print reproduction, and high-end publishing.

.JPG/.JPEG Category Raster, Color Space CMYK or RGB, Transparency No, Use Compressed photos. Standard for website imagery, email campaigns, and standard camera photo storage.

.PNG Category Raster, Color Space RGB Only, Transparency Yes, Use Digital transparency standard. Used for placing transparent graphic elements, logos, or icons over digital background UI layouts.

.WEBP Category Raster, Color Space RGB Only, Transparency Yes, Use Modern web image standard developed by Google. Used to replace JPG/PNG on modern websites to vastly speed up loading times.

.HEIC Category Raster, Color Space RGB Only, Transparency No, Use Apple’s modern camera capture standard. Used to preserve high dynamic range photo data on iOS devices at half the size of a JPG.

.RAW / .CR3 / .NEF Category Raster, Color Space Unprocessed sensor data, Transparency No, Use Proprietary raw camera profiles (Canon, Nikon, etc.). Used by photographers to capture maximum light data before editing in Lightroom.

.DNG Category Raster, Color Space Unprocessed sensor data, Transparency No, Use Adobe’s open-source Digital Negative format. Used as a universal archive for raw, unedited camera data.

.GIF Category Raster, Color Space RGB Only (Max 256 colors), Transparency Yes (Binary index), Use strictly used for low-resolution, looping web animations, reactions, and retro banner graphics.

.BMP Category Raster, Color Space RGB Only, Transparency No, Use legacy Windows Bitmap format. Rarely used today due to massively bloated, uncompressed file sizes.

.INDD Category Desktop Publishing Layout, Color Space Both (Manages linked files), Transparency Yes (Inherited), Use Working layout file for Adobe InDesign. Used to arrange multi-page books, magazines, catalogs, and extensive signage.

.DOCX Category Document Text, Color Space RGB Only, Transparency No, Use Microsoft Word. Strictly for copy documents. Never use for native graphic design asset deployment.

  1. Vector vs. Hidden Raster

THE GOLDEN RULE Ending in .AI or .PDF doesn’t make it a vector. HOW TO CHECK: Illustrator: Press Cmd/Ctrl + Y to enter Outline Mode.

  • True Vector: You will see clean paths and lines tracing the artwork.
  • Fake Vector: You will see only a blank square bounding box. A raster is trapped inside.

 

  1. Resolution Check (Print)

THE TARGET: Print requires 300 DPI/PPI at physical size.

HOW TO CHECK: Photoshop: Go to Image > Image Size. Resolution must be 300. InDesign/Illustrator: Click the linked image. Check Effective PPI in Links panel.

Note: Stretching a 300 PPI image by 200% drops the Effective PPI to 150, making it blurry.

  1. Color Space (CMYK/RGB)

COLOR BASICS: RGB for Screens. CMYK for Print.

HOW TO CHECK: Photoshop: Look at the top window tab: Project_Name.psd @ 50% (RGB/8) or (CMYK/8). Or go to Image > Mode. Illustrator: Look at the file tab at the top. It will state (CMYK/Preview) or (RGB/Preview).

To fix: File > Document Color Mode.

VIEWING DISTANCE 1 – 3 Feet RECOMMENDED: 300 DPI EXAMPLE TYPES: Tabletop displays, Posters

VIEWING DISTANCE 4 – 10 Feet RECOMMENDED: 150 DPI EXAMPLE TYPES: Indoor banners, Transit ads

VIEWING DISTANCE 10 – 30 Feet RECOMMENDED: 75 – 100 DPI EXAMPLE TYPES: Store signs, Outdoor event banners

VIEWING DISTANCE 50+ Feet RECOMMENDED: 20 – 50 DPI EXAMPLE TYPES: Highway billboards

THE TARGET CHECK: Can your photo hold up at 150 DPI for your banner? To see if your photo will hold up at 150 DPI for your specific banner size, use this quick check in Photoshop.

  1. Open your photo: Launch Adobe Photoshop and open the target image.
  2. Image Size Menu: Navigate to the top menu bar: Go to Image > Image Size.
  3. Uncheck “Resample:” Uncheck the box that says Resample. This is crucial. You don’t want Photoshop making up fake pixels yet.
  4. Set Resolution to 150: Change the Resolution field specifically to 150 pixels/inch.
  5. Read Max Physical Dimensions: Look at the Width and Height fields. This tells you the maximum physical size your photo can be printed at 150 DPI.
  1. Vector to Raster .AI/.EPS ➔ .PNG/.JPG

In Illustrator: Go to File > Export > Export As… and choose your format. 

  • For JPG, choose RGB (web) or CMYK (print).
  • For PNG, it auto-converts to RGB (click Transparent background)

 

2. Color Modes RGB ➔ CMYK for Print

Illustrator: File > Document Color Mode > CMYK or RGB. Photoshop: Image > Mode > RGB or CMYK. Warning: RGB to CMYK conversion can make bright neon colors look dull.

3.Print-Ready PDF From a Design File

  • In Adobe Apps: Go to File > Save As (or Save a Copy) and select Adobe PDF.
  • PDF Preset: Select [Press Quality] or High Quality Print at the top of the settings box. This keeps resolution at 300 DPI and embeds fonts & paths perfectly.

 

4. Raster to Vector The Hard Way (desperate times)

Open the image in Illustrator, select it, and click Image Trace in the Properties panel. Tweak settings in the panel, then click Expand in the top bar to create editable paths.

Note: Works great for clean logos, but ruins photographs.

Final Takeaways

  • Vector vs. Raster: Vector is your scalable blueprint. Raster is your pixel-based mosaic. 
  • Color Spaces: RGB is for the eye (screens/web). CMYK is for the hands ((ink/print). Never mix them up.
  • Resolution Density: 72 DPI is for speed (web). 300 DPI is for quality(print). Always confirm before you send.
  • Transparency: Use it to create depth and layering, but ensure your file format (like .PNG) supports the “invisible” background.
  • The Conversion Workflow: Always build in the highest quality format first. You can easily shrink a master asset, but you cannot fix a low-resolution mistake.

The Ultimate Rule

Never export without a purpose. Every file format shows how your work will be used. Use them to ensure your design looks exactly as intended, whether on a smartphone screen or a highway billboard.