If you design a lot of digital ads, web layouts, or UI concepts, you’ve probably ended up with a single Photoshop file full of artboards—each one representing a different size, variation, or placement. That’s my typical workflow, too.
In this tutorial, I’ll walk you through how to:
- Organize and label Photoshop artboards
- Export individual artboards as JPEGs or PNGs
- Place exported designs back into a master mockup file
- Update smart objects for realistic portfolio-ready presentations
- Add boundary strokes (a commonly forgotten step!)
- Batch-export all artboards in one click
- Automatically generate assets using Photoshop’s Generate → Image Assets
Whether you’re creating ad sets, pitching web designs, or prepping portfolio visuals, this workflow will save you tons of time.
Start with Well-Labeled Artboards
In Photoshop, each artboard acts like a grouped folder in your Layers panel. A clean setup now means faster exporting later.
- Select the Artboard Tool.
- Click each artboard name in the Layers panel and rename it clearly.
- Example:
banner-ad,square-ad,website-1,website-2.
- Example:
If you’re mocking up a screenshot of a website inside a browser frame or device mockup, make sure the screenshot lives inside its own artboard (simply draw a new artboard around it using the Artboard tool (hidden under the Move arrow).
Good naming matters. Later, Photoshop will use these names to auto-generate files for you.
Why You Should Never Drag Groups Between Artboards
If you try to drag grouped layers from one artboard into another, Photoshop often creates a jumbled “hot mess.”
Instead, export each artboard as a single flat image. Then place that flattened image into your mockup.
Method 1: Quick Export as PNG
This is the fastest method, but only if a PNG file format works for your needs.
- Right-click the artboard in the Layers panel.
- Choose Quick Export as PNG.
- Save it to your desktop (or wherever your project folder is located).
- Back in your main mockup PSD, select the correct artboard.
- Go to File → Place Embedded, choose your PNG, and scale it into position.
Photoshop places files into whichever artboard is active, so make sure the correct artboard is highlighted before you place anything.
Method 2: Export As (More Control)
If you need JPEGs or want to adjust quality settings, choose Export As:
- Right-click the artboard.
- Choose Export As…
- Select JPEG (or PNG)
- Export and place it using File → Place Embedded.
Use this anytime you need higher compression control.
Using a Smart Object Mockup
Most downloadable mockups include a smart object labeled something like:
- “Put image here”
- “Replace me”
- “Your design”
When you open the mockup’s Layers panel, drill down through groups until you find that smart object. Then:
- Double-click the smart object thumbnail.
- A new PSB file opens in a new tab or window.
- Place your exported design (File → Place Embedded) or choose (File → Linked ).
- Save and close the PSB.
Your main mockup instantly updates with your design beautifully warped, blurred, framed, or angled depending on the mockup’s style. If you choose to link your image, you may need to right-click on that layer and select “Relink to file…” occasionally.
This is a perfect tool to create realistic images of your designs for portfolios or presentations.
Important: Add a Stroke to Light or White Designs
If your ad or website layout has a white background, you’ll almost always need to add a visible boundary before exporting it for mockup use.
Otherwise, when you place it on a white mockup background, the edges vanish and your design “bleeds” into the frame.
Add a 1–3 px stroke
- Create a selection around the entire artboard (“marching ants”).
- Make a new layer.
- Go to Edit → Stroke.
- Choose:
- 1 px or 2 px
- Black or a dark gray
- Inside
- Export your artboard again.
Now the edges stay visible no matter where you place the design.
Batch Export: Artboards to Files
If you have a full set of ads (skyscraper, leaderboard, square, mobile, etc.) you don’t need to export one by one.
Photoshop can export every artboard with one click.
- Go to File → Export → Artboards to Files.
- Choose your destination folder.
- Select JPEG or PNG.
- Click Run.
Photoshop will create a file for every artboard; this is super useful for sharing proofs or building a slide deck.
Automating Exports with Generate → Image Assets
A lesser-known Photoshop feature lets you auto-generate images by including file extensions in your layer or artboard names.
For example, rename an artboard: “skyscraper.jpg”
Then enable:
File → Automate → Generate → Image Assets
Photoshop creates a folder next to your PSD containing automatically generated images for every artboard or layer ending in .jpg, .png, etc.
When you make a change in the artboard and resave, exporting will be part of the actions PS takes during save.
This is ideal when you’re iterating layouts or sending frequent updates.
Final Thoughts
This workflow of clean artboard organization, exporting flat files, and using smart object mockups keeps your Photoshop process efficient and predictable. It also ensures your designs look polished when you present them to clients, publish them in your portfolio, or share them in project pitches.
If you haven’t experimented with batch exporting or Photoshop’s auto-generated image assets yet, try them! They can save you huge amounts of time on repetitive asset prep.
Follow Along
Try this on your own. You can download the mockup and multiple artboard file. It’s a 200mb zip file that contains two psd files.
