Real-world applications of understanding both mediums.
Dual Color Specs
RGB + CMYK + Pantone
Principles Identified:
Multiple ValuesSame brand color in RGB, CMYK, and Pantone
Visual MatchingColors chosen to look similar across mediums
DocumentationClear specs prevent inconsistency
Key insight: Major brands specify their colors in all three systems to ensure consistency across digital and print.
Print + Digital Teams
Same content, different design
Principles Identified:
Parallel DesignSame story, redesigned for each medium
Asset OptimizationHigh-res for print, compressed for web
Layout AdaptationFixed columns vs responsive grids
Key insight: The New York Times maintains separate design systems for print and web, sharing content but not layout.
Product Photography
Color accuracy critical
Principles Identified:
Color MatchingProduct color must match real item
Return ReductionAccurate photos reduce 'not as shown' returns
CalibrationProfessional color management essential
Key insight: Fashion e-commerce invests heavily in color accuracy—wrong colors mean high return rates.
Part E
Common Failures
12
Common Cross-Medium Mistakes
Errors when moving designs between print and screen.
Failure: Using RGB for Print
Neon RGB green
Prints muddy
Fix: Always convert to CMYK before printing
CMYK green
Prints as expected
Rule: Convert to CMYK early in the design process for print projects. Preview colors before sending to printer.
Failure: Low-Res Images for Print
72 PPI web image
Pixelated in print
Fix: Use 300 DPI minimum for print
300 DPI print image
Crisp and sharp
Rule: Source images at print resolution from the start. Upscaling low-res images doesn't add detail.
Failure: Fixed Print Layouts on Web
960px fixed width
Breaks on mobile
Fix: Design fluid, responsive layouts
Responsive grid
Works everywhere
Rule: Web layouts must be fluid. Don't just export a print layout to a webpage—redesign for the medium.
Failure: Ignoring Bleed
Design to edge
White edges when trimmed
Fix: Add 0.125" bleed for print
0.125" bleed added
Clean edges guaranteed
Rule: Print requires bleed area (usually 0.125") for edge-to-edge designs. Trim marks guide the cutter.
Pre-Print Checklist
CMYK color mode, 300+ DPI resolution, bleed area added, fonts embedded or outlined.
Part F
Visual Tests
13
Print vs Screen Testing
Verify your designs work for the intended medium.
01
Color Gamut Check
Tests: Print color accuracy
In design software, enable 'Gamut Warning' (Photoshop: View > Gamut Warning). Out-of-gamut colors highlight. Replace with printable alternatives.
View > Gamut Warning
Shows unprintable colors
02
Print Preview
Tests: Final output
Soft-proof on calibrated monitor. If possible, print test pages on the actual paper stock. Colors shift with paper type (coated vs uncoated).
✓ Calibrated monitor
✓ Soft proof enabled
✓ Test print on final stock
03
Resolution Check
Tests: Image quality
In Photoshop: Image > Image Size. Check 'Resolution' field. For print at intended size, must be 300+ DPI. View at 100% zoom—pixelation visible means too low.
Image > Image Size
Resolution: 300 DPI ✓
04
Print CSS Test
Tests: Web to print
Open browser print preview (Cmd/Ctrl + P). Check: headers/footers, page breaks, colors, backgrounds. Use @media print to optimize.
@media print {
/* Hide non-essential elements */
nav, footer, .sidebar, .ads {
display: none;
}
/* Reset backgrounds for ink saving */
body {
background: white;
color: black;
}
/* Show link URLs */
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
}
Print Media Query via CSS
@media print - Styles only apply when printing
display: none - Hide navigation, ads, etc.
attr(href) - Print link URLs for reference
Tip: Test with browser print preview (Cmd/Ctrl + P).
@media print {
/* Start new page before major sections */
h1 {
page-break-before: always;
}
/* Avoid breaks inside elements */
img, table, figure {
page-break-inside: avoid;
}
/* Keep heading with following content */
h2, h3 {
page-break-after: avoid;
}
}
Page Breaks via CSS
page-break-before - Force new page before element
page-break-inside: avoid - Keep element on one page
page-break-after: avoid - Keep next element on same page
Tip: Prevent orphaned headings and split images across pages.
@media print {
/* Use print units */
body {
font-size: 12pt;
line-height: 1.4;
}
/* Set page margins */
@page {
margin: 1in;
size: letter;
}
/* Full-width content */
.container {
width: 100%;
max-width: none;
}
}
Print-Specific Sizing via CSS
font-size: 12pt - Points for print sizing
@page - Set page margins and size
width: 100% - Remove max-width constraints
Tip: Print units: pt (points), in (inches), cm, mm.
@media print {
/* Force background printing */
.highlight {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
background: #ffff00 !important;
}
/* Convert to grayscale */
img {
filter: grayscale(100%);
}
/* High contrast text */
body {
color: #000;
}
}
Print Colors via CSS
print-color-adjust: exact - Force background color printing
grayscale filter - Convert images for B&W printing
color: #000 - Maximum contrast for text
Tip: Browsers often strip backgrounds by default to save ink.
Print CSS Checklist
Hide nav/footer, show link URLs, control page breaks, use pt units.
Part H
Self-Assessment
15
Self-Assessment
Test your understanding of print vs screen design.
Q1
Why can't some screen colors be printed accurately?
Click to reveal
Answer: RGB (screen) uses additive light with a wider color gamut. CMYK (print) uses subtractive ink with a narrower gamut. Colors like neon greens and electric blues exist in RGB but fall outside CMYK's range—they shift to the nearest printable color.
Q2
Why does print require higher resolution (DPI) than screen (PPI)?
Click to reveal
Answer: Viewing distance. Screens are viewed at arm's length (24"+) where 72-100 PPI looks sharp. Prints are often handheld (6-12"), so the eye can resolve more detail—300+ DPI is needed to look sharp at close range.
Q3
What is 'bleed' in print design?
Click to reveal
Answer: Bleed is extra image area (usually 0.125") extending beyond the trim line. When the paper is cut, slight variations in cutting position won't leave white edges. For edge-to-edge designs, always include bleed area.
Q4
Why do web layouts need to be different from print layouts?
Click to reveal
Answer: Print has fixed dimensions—the designer controls exact placement. Web has unknown viewport sizes, user font settings, and responsive requirements. Print layouts must be redesigned as fluid, responsive layouts for web.
Q5
How do you make a webpage print well?
Click to reveal
Answer: Use @media print CSS: hide navigation and non-essential elements, show link URLs, control page breaks, use print units (pt, in), force background colors with print-color-adjust: exact, and test with browser print preview.