Graphic design learning

Production Exports

Production work translates design decisions into files that other people and systems can use correctly.

Intermediate lessons

Lesson objective and evidence

Make and explain one design decision that demonstrates this principle: Production work translates design decisions into files that other people and systems can use correctly.

Prerequisite: Accessibility And Responsive Design

Evidence to produce: Confirm destination before choosing format.

Estimated workload: 1-1.5 hr

Production Exports lesson

Observe

See the communication problem

A poster looks correct in the design file but the delivered image has too few pixels for its intended print size.

  • What to notice

    A file that looks fine on your screen may still be wrong for print or upload requirements.

  • Why it matters

    Wrong formats, missing bleeds, weak naming, or poor compression can break a good design at delivery.

Takeaway: Production work translates design decisions into files that other people and systems can use correctly.

Understand

Understand the principle

Production work translates design decisions into files that other people and systems can use correctly.

Choose a format for the content and destination. JPEG suits photographs when transparency is unnecessary; PNG supports lossless raster graphics and transparency; WebP can compress web imagery with transparency; SVG preserves vector paths but can also contain embedded raster images. A PDF can hold text, vectors, and raster images; it is not automatically a vector-only or print-ready file.

For screens, specify pixel dimensions, color profile, file size, and supported format. For print, effective PPI equals available image pixels divided by printed inches. A 2400 px image printed 8 inches wide gives 300 ppi; at 16 inches it gives 150 ppi. Changing a resolution metadata field without resampling does not create detail. Choose the requirement with the supplier and intended viewing distance.

1 · Define each delivery target

List where each file will be used, its dimensions, background, color requirements, maximum size and required format. A website image, social graphic, editable source and print PDF are different deliverables. Write a small export matrix before creating files. Include the intended crop and any transparency requirement; a filename extension alone does not describe a usable asset.

2 · Choose vector or raster deliberately

Keep scalable marks and simple line art in an appropriate vector format when the destination supports it. SVG can suit web graphics, but embedded images, fonts and scripts still need review. Photographs need raster pixels. JPEG commonly suits photographic content without transparency; PNG supports lossless raster detail and transparency; WebP and AVIF can offer efficient web delivery where the target supports them. Test the actual output instead of assuming one format is best for every image.

3 · Calculate pixels and effective print resolution

A 2400-pixel-wide image placed 8 inches wide has 300 pixels per inch; at 16 inches it has 150. Changing a metadata resolution field without resampling does not add detail. Decide on sufficient resolution at the actual placed size using the output method, image content and viewing distance. For web work, specify pixel dimensions and provide appropriately sized variants rather than imposing a universal print-PPI rule.

4 · Manage color and transparency for the destination

Confirm the destination's color workflow. sRGB is a common interoperable choice for broad web delivery; a print provider may require a particular CMYK output condition or accept tagged RGB in its conversion workflow. Assigning a profile changes how existing values are interpreted, while conversion changes values to preserve appearance as far as possible. Check alpha edges against both light and dark backgrounds. Avoid an accidental white matte around a transparent mark.

5 · Inspect the exported file

Open the actual file in the intended browser, viewer or receiving application. Check crop, pixel dimensions, visual detail, transparency, text, embedded color information where applicable and file weight. Compare compressed versions at their intended display size. A crisp source document does not guarantee a crisp export, and a thumbnail does not reveal an incorrect crop or unreadable fine text. Keep a short evidence note for the delivery choices.

6 · Package a reproducible handoff

Use names that distinguish purpose, size and revision, such as archway-web-1200-v02.webp. Keep the editable master and delivery copies clearly identified, include a README describing usage and color assumptions, and provide only licensed supporting assets. For responsive web delivery, explain which size serves which display width and provide meaningful alt text separately. Archive the approved exported files, because silently regenerating them later can produce a different deliverable.

PPI
Image pixels per printed inch at the placed size.
DPI
A printer's output dots per inch; distinct from image pixel density.

Takeaway: Export choices should come from the destination and production requirements.

Understand

Study the visual model

Takeaway: Use the model as a diagnostic, not a decoration recipe: A file that looks fine on your screen may still be wrong for print or upload requirements.

Try

Follow a worked decision

An illustrative scenario: the proposed result is a hypothesis to check with the intended audience.

  • Situation

    A poster looks correct in the design file but the delivered image has too few pixels for its intended print size.

  • Designer move

    Confirm print size, bleed, color expectations, PDF settings, and preview the exported file.

  • Expected result

    The handoff becomes usable by the printer and reduces expensive production risk.

Takeaway: Production skill protects design quality after the file leaves your screen.

Try

Run the studio method

Export a photographic layout for a web card and a supplier-specified print size. Record pixel dimensions, profile, format, and effective PPI where relevant; inspect both exported files outside the editor.

  • Plan: Define destination, size, color mode, file format, naming, and review checklist before export.
  • Collect evidence: Calculate effective PPI at two print widths and explain why your screen export is specified in pixels instead.
  • Test: A file that looks fine on your screen may still be wrong for print or upload requirements.
  • Revise: change one variable, compare the versions, and keep the stronger evidence.

Takeaway: Define destination, size, color mode, file format, naming, and review checklist before export.

Critique

Diagnose weak decisions

Name the visible problem before proposing a fix. This keeps critique specific and useful.

  • Using one export preset for every job.
  • Sending source files without explaining what is final.
  • Skipping the final exported-file review.

Takeaway: A strong designer can name the mistake and the fix.

Apply

Use the review rubric

Ask first: A file that looks fine on your screen may still be wrong for print or upload requirements.

  • Confirm destination before choosing format.
  • Check size, bleed, resolution, and color needs.
  • Use consistent file names and version labels.
  • Open exported files and inspect them before sending.

Takeaway: Your design is ready to move forward when you can point to evidence for every criterion.

Apply Production Exports

Use the lesson brief below. Fictional project details are practice material, not real event listings.

Export a photographic layout for a web card and a supplier-specified print size. Record pixel dimensions, profile, format, and effective PPI where relevant; inspect both exported files outside the editor.

Specification: Use the format named in this lesson’s brief. Collect your comparisons on an A4 landscape sheet (297 × 210 mm) or a digital process board; these are presentation options, not pixel equivalents.

Process

  • List the required content, format, and constraints in the lesson brief.
  • Run the comparison or investigation described in the brief before refining a final response.
  • Record what you changed, measured, or observed.
  • Calculate effective PPI at two print widths and explain why your screen export is specified in pixels instead.
  • Revise a weak decision and save a clear final example or annotated explanation.

Deliverables

  • Calculate effective PPI at two print widths and explain why your screen export is specified in pixels instead.
  • The comparisons, calculations, or project outputs named in this lesson's brief.
  • A short rationale explaining how the lesson's principle informed your decision.
  • A revision or correction, with a note about the evidence that prompted it.
  • A source note for any images, type, and references used, including permissions where relevant.

Review criteria

  • Criterion 1: Confirm destination before choosing format.
  • Criterion 2: Check size, bleed, resolution, and color needs.
  • Criterion 3: Use consistent file names and version labels.
  • Criterion 4: Open exported files and inspect them before sending.

Portfolio transfer

Package one project with final files, source notes, preview image, and naming conventions.

Knowledge check

What should export choices depend on?

  • The final destination and production requirements.
  • One default format for every job.
  • The biggest file size possible.
  • Avoiding review before delivery.

A 2400 px-wide image is placed 16 inches wide without resampling. What is its effective resolution?

  • 300 ppi because that is the export preset.
  • 150 ppi.
  • 2400 dpi.