iPhone Floating Layers Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Dribbble
This iPhone floating layers mockup is one of the simpler ways to present an Instagram story design or an app screen convincingly.
Startup teams and UI freelancers tend to get the most out of files like this. Tip: make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.
A screen inside a real device frame explains a product faster than a raw screenshot, which is why it shows up on so many landing pages and app store listings. Pair it with a second device from the same angle to show a responsive layout.
Credit goes to a designer on Dribbble. We link to their download page rather than re-uploading the file, so check their terms there before commercial use.
What you can edit in this iPhone Floating Layers Mockup
Open it in Photoshop and you can change:
- Screen design, placed through the smart object
- Background colour
- Screen glare and reflection layers
- Device colour, where the file includes it
How to use the iPhone Floating Layers Mockup
- Export your screen design as a PNG at the exact size of the screen smart object.
- In the Layers panel, find the layer with the small smart object icon and double-click it.
- Drop your artwork in, fit it to the canvas, save and close. The mockup updates by itself.
- Change the background colour to fit your brand.
- Export with File › Export › Export As: JPG for sharing, PNG for the web.
Screenshots with a white background can blend into the bezel; a thin shadow or darker UI reads better.
Best uses for this iPhone Floating Layers Mockup
- Show a landing page on your online shop or product page.
- Use it as the cover image for a website on mobile in your portfolio.
- Present an app screen in a client proposal or brand guide.
Before you download
- Made by a designer on Dribbble. The download size and format are listed on their page.
- Check the licence on the author’s page. Personal and commercial terms differ from file to file.
- The preview shows the angle, background and lighting you’ll get.
More free iphone mockups are listed below, each linking to the original author.
Questions about this mockup
Is it free for commercial use?
A designer on Dribbble sets the licence, and it can differ from file to file. Many free files allow personal and commercial use, but some are personal-only or ask for credit. Read the terms on the download page before a paid project.
How do I put my artwork on the iPhone?
Find the smart object layer (it has a small icon on its thumbnail), double-click it, place your design, then save and close that tab.
Do I need Photoshop?
Yes. This is a PSD mockup built with smart objects, so you edit it in Adobe Photoshop. Any recent CC version works.
Which iPhone model is this?
The model is in the title. Screen sizes differ between generations, so always check the smart object size before exporting your screen.
Why does the download open another website?
We list free files from designers around the web and link to the original page, so a designer on Dribbble gets the visit and you get the file exactly as they published it.
