HOW TO USE PHOTOSHOP MOCKUPS IN AFFINITY (NO PHOTOSHOP REQUIRED)
- 14 hours ago
- 7 min read
If you've ever downloaded a stunning iPad mockup file only to realise it's a .psd; a Photoshop file, you might have assumed it was off limits. After all, you're working in Affinity, not Adobe.
Good news: you don't need Photoshop at all. Affinity can open and work with PSD files, including mockups that use embedded layers, the Affinity equivalent of Photoshop's smart objects. With a few simple steps, you can place your design into a professional iPad mockup and export a polished result, entirely within Affinity.
In this tutorial, I'll walk you through the full process from start to finish. Whether you're new to Affinity, switching from Adobe, or just looking to expand your workflow, this guide is for you.
What You'll Learn in This Tutorial:
What a PSD mockup file is and why designers use them
How Affinity handles PSD files using embedded layers
Step-by-step: how to open a iPad mockup PSD in Affinity
How to place your design and export a final image
Tips to avoid common mistakes
What Is a PSD Mockup File?
A mockup is a pre-built scene like a iPad sitting on a desk, a hand holding a device, or a screen propped against a wall that lets you drop in your design to show it in a realistic context. Literally any object, devices, packaging, banners or posters. They're incredibly useful for client presentations, portfolio pieces, and social media content.
Most professional mockups are distributed as PSD files (Photoshop Document format). Inside the file, there's a special layer; in Photoshop this is called a smart object, and in Affinity it's recognised as an embedded layer. This is the layer you edit to place your own artwork. Everything else in the file, shadows, lighting, reflections automatically wraps around your design.
The result is a realistic, professional-looking image in minutes, without needing 3D software or advanced photography skills.
Where to Find Free Photoshop Mockups To Use In Affinity
Before we get started, you'll need a PSD phone mockup to work with. Here are some great free sources:
Resource Boy - huge library of free and premium mockups
Mr Mockup - curated free PSD mockups
Ls.Graphics - high quality, clean device mockups
Download a iPad mockup PSD and save it somewhere easy to find. Once you have your file and your design ready, let's get started.
What You'll Need
Affinity installed on your computer (this works in the latest version of Affinity)
A PSD iPad mockup file (free sources listed above)
Your design or artwork saved as a PNG or JPG
STEP-BY-STEP: HOW TO USE A PSD MOCKUP IN AFFINITY
Step 1: Open the PSD File in Affinity
Open Affinity and go to File > Open. Navigate to your PSD mockup file and select it. Affinity will import the file and convert it, including all its layers. You may see a brief loading process depending on how complex the mockup is, this is completely normal.
Once open, you'll see the mockup displayed in the canvas with all its layers visible in the Layers panel on the right-hand side.
💡 Tip: If the Layers panel isn't visible, go to the right side panel > click the little drop down arrow > panels > switch on layers.
Step 2: Identify the Embedded Layer
In the Layers panel, look for a layer that is labelled as an embedded document. This is the layer that was previously a smart object in Photoshop; Affinity converts it to an embedded layer when you open the PSD file.
It will usually have a small icon that looks like 2 arrows with a slash in the centre, which distinguishes it from regular pixel or vector layers. It's often named something like "Screen", "Place Design Here", "Your Design", or similar, mockup creators usually label it clearly.
💡 Tip: If you're unsure which layer is the embedded one, hover over layers in the panel and look for the embedded document icon, or try clicking different layers until you see one with that indicator.
Step 3: Open the Embedded Layer to Edit It
To place your design into the mockup, you need to open and edit this embedded layer. Double-click the embedded layer in the Layers panel. Affinity will open it as a separate document in a new tab.
You'll now see a canvas that represents just the screen area of the mockup, this is where your artwork will sit. It may appear as a solid colour, a placeholder graphic, or even a blank canvas depending on how the mockup was created.
Step 4: Place Your Design
Inside the embedded layer tab, go to File > Place. Navigate to your design file (PNG or JPG) and select it. Your design will appear on the canvas. Resize and reposition it to fit the screen area correctly.
Make sure your design fills the canvas properly, if it's too small or too large, use the Transform panel or drag the handles to scale it. You can hold Shift while dragging to maintain the proportions of your artwork.
💡 Tip: If your design is a UI design or screenshot, export it at a high resolution before placing it, so the final mockup looks crisp and sharp.
Step 5: See Your Design Applied to the Mockup
Once your design is placed and positioned on the embedded layer canvas, Affinity automatically applies it to the mockup, no manual saving needed. Simply switch back to the main mockup tab (you'll see it in the tabs at the top of the workspace) and your design will already be sitting inside the phone screen, complete with all the shadows, lighting, and reflections from the mockup.
Step 6: Check and Adjust
Take a moment to look over the full mockup. Check that your design is centred correctly within the screen, that nothing is being cut off at the edges, and that it looks natural within the scene.
If something looks off, simply double-click the embedded layer again to go back and adjust your artwork. You can go back and forth as many times as you need. Don't forget you can remove the background (if this is an option) go to layers panel and you will see a layer labelled "background" you can either remove this if the mockup allows, or you can simply change the color of the background.
Step 7: Export Your Final Mockup Image
To export your finished mockup in Affinity, you'll use the Slice tool. This is the recommended way to export specific areas of your canvas as a clean image file.
Here's how to do it:
Go to the Export Persona by clicking the "Slice" option at the top of the Affinity workspace. This switches you into export mode.
Select the Slice tool from the toolbar on the left-hand side, it looks like a square with a small plus sign + icon.
Draw a rectangle over your mockup image, covering the area you want to export. Think of it like drawing a crop box around the mockup.
Once your slice is drawn, look at the panel on the right-hand side. You'll see export preset options where you can choose your file format, select PNG for a high quality image with transparency support, or JPG for a smaller file size ideal for sharing with clients or posting on social media.
Click Export Slices at the bottom of the right-hand panel, choose where to save your file, and you're done.
💡 Tip: Make sure your slice rectangle covers the full mockup including any shadows or background. If you clip the edges, the exported image will look cut off.
COMMON ISSUES & HOW TO FIX THEM
I can't find the embedded layer
Some mockups have many layers and layer groups. Try expanding each layer group in the Layers panel by clicking the arrow beside the group. The embedded layer is often nested inside a folder or group labelled "Screens", "Editable", or "Smart Object".
My design looks blurry or pixelated
This usually means your design file was placed at a low resolution. Go back into the embedded layer and replace your artwork with a higher resolution version.
Some layers don't look right after opening the PSD
Affinity is highly compatible with PSD files, but very complex blend modes or certain Photoshop-only features may not translate perfectly. In most cases this won't affect the embedded layer area where your design sits. If the overall look of the mockup seems off, try toggling individual layers on and off to identify which ones aren't rendering as expected.
Why This Matters for Your Design Workflow
Being able to work with PSD mockups inside Affinity opens up a huge library of professional resources that are freely available online. You don't have to subscribe to Adobe or maintain a Photoshop licence just to use industry-standard mockup files.
For freelance designers and small studio owners, this is a real practical advantage. You can present your work professionally, impress clients with polished mockups, and build a stronger portfolio, all within a tool you already own and love.
FINAL THOUGHTS
Using PSD mockups in Affinity is one of those workflows that feels complicated at first glance, but is actually very straightforward once you know where to look. The key is understanding that Affinity converts Photoshop's smart objects into embedded layers, same idea, different name and from there the process is quick and intuitive.
Give it a try with a free mockup from one of the sources above and see how much it can elevate your design presentations.
GET AFFINITY READY MOCKUPS MADE JUST FOR YOU
One of the biggest frustrations with PSD mockups is that not all of them translate perfectly into Affinity, some have complex layer effects or features that don't convert cleanly. That's why I create mockups built specifically with Affinity users in mind, so you can skip the trial and error and get straight to showcasing your work.
My digital mockup products are designed to work seamlessly in Affinity, with clean embedded layers, clear labelling, and a straightforward workflow; exactly like what we've covered in this tutorial. Whether you need phone mockups, branding scenes, or device displays, there's something ready for you to use straight away.
Need mockups created for your brand or client project?
At Jreami Design, I create professional, custom mockups and branded design assets for businesses and creatives. If you'd rather have it done for you beautifully and quickly get in touch.Â