Display 3D-mockup of app on iPhone

[ONiel]

Hello

I am trying to make an image for my website displaying how my app would look on an iPhone. To do this I just downloaded a transparent iPhone image, gave it a background using a big rectangle, and copy/pasted a screenshot of my app on it.

The result looks quite okay.... But I still have the issue that the background-rectangle (the one with the big gradient) extends the borders of the iPhone. How do I cut this image out so it only has the borders of the iPhone and everything out of those borders transparent?

My ultimate goal is to create a 3D-mockup of the app on my iPhone from an angle. With a subtle shadow beneath the iPhone. Is there a better, more elegant, or more professional way to achieve this instead of what I am doing now?

 

Afdesign-file and png of what I currently have in the attachments.

Thanks!

PS. While typing this question I realize that what I want, the 3d mockup of my app, is not possible with my current work because the base-image (the iPhone itself) is 2d... 

 

mobile_bon_on_iphone.afdesign

[Ron P.]

I took your design into the Pixel Persona, then using the selection brush, created a selection on the inside of the cellphone. Masked it. I didn't do this, but you could put a Outershadow on the cellphone.

mobile_bon_on_iphonemasked.afdesign

[Andy05]

For the 3D-mockup, I wouldn't reinvent the wheel in this case. There are a tons of good (photoshop) mockups for this motive available. Fully customisable and quite a bunch of them for free. Since the display is flat, those mockups should work in Affinity as there shouldn't be any warping involved. Affinity can't render photoshop mockups which include warped (smart)objects.

[ONiel]

19 minutes ago, Andy05 said:

For the 3D-mockup, I wouldn't reinvent the wheel in this case. There are a tons of good (photoshop) mockups for this motive available. Fully customisable and quite a bunch of them for free. Since the display is flat, those mockups should work in Affinity as there shouldn't be any warping involved. Affinity can't render photoshop mockups which include warped (smart)objects.

 

I have found such a template. The one in the attachments for example. It's easy to remove the background to make it transparent.

7.psd

But I don't understand how to insert my own phone-screen-image in the mockup. There is one layer called "REPLACE ME", but when I select it the "replace image"-button described here doesn't show up.

I also tried just inserting my own phone-screen-image using the basic Place Image Tool, then I gave it the same properties (X, Y, W, H) as the REPLACE ME-layer. But that still doesn't give my own image the correct angle to fit in the angled iPhone.

Thanks for your reply already.

 

1 hour ago, Ron P. said:

I took your design into the Pixel Persona, then using the selection brush, created a selection on the inside of the cellphone. Masked it. I didn't do this, but you could put a Outershadow on the cellphone.

mobile_bon_on_iphonemasked.afdesign

Thanks for your reply! Could you elaborate on how you created the selection inside the cellphone? Thanks!

[Andy05]

55 minutes ago, ONiel said:

But I don't understand how to insert my own phone-screen-image in the mockup. There is one layer called "REPLACE ME", but when I select it the "replace image"-button described here doesn't show up.

Try to double-click on the icon of the layer, which is labelled "REPLACE ME". Make sure, you double click only on exact this layer, none of its (probably available) modification layers. This usually open a new tab with the mockup's current motive which you could replace with your own.

[kaffeeundsalz]

Since the iPhone border is pretty straight, why don't you just match the shape of the background rectangle to the mockup frame? First, scale down width and height of the rectangle so that it's a bit smaller than the iPhone. Then use corner rounding to match the shape:

[PaulEC]

I don't know if it will help in this case, but if you Alt click on a layer it opens it in a new window, which can help to paste onto that layer. Also, if you want a 3D effect you could try the 'Bevel and Emboss' and the '3D' fx filters. (Not that realistic but it might be worth playing with them!)

[Andy05]

17 minutes ago, PaulEC said:

I don't know if it will help in this case, but if you Alt click on a layer it opens it in a new window, which can help to paste onto that layer. 

No. [ALT]+click on a layer just isolates it(s view), basically temporarily blending out all other layers.. But that won't let you edit the embedded document (that's what Affinity converts photoshop's smart objects into). In order to use such mockups, you'll have to edit the embedded document, not the layer in the mockup.

[EDIT, to clarify my statement above]:

Check it out with the file which @ONiel attached to his post above. If you use your method, you'll see the distorted and edited layer. Replacing that with an own motive would basically be the same work as creating such 3D mockups from scratch yourself. Double click on the layer, labelled "REPLACE ME" and you have new tab with a flat, plain "from above", 2D sheet, which you could put your motive onto. Saving this new tab will update the mockup with all edits (distortions, colour effects and what not else).

[PaulEC]

56 minutes ago, Andy05 said:

No. [ALT]+click on a layer just isolates it(s view), basically temporarily blending out all other layers

Sorry, you're quite right, it's a double click, not Alt click, to get a new window and isolate the layer!

I think I've been getting confused over the original post and then the suggestion to use a mock-up instead! Not enough sleep, not enough coffee! 😁

[Andy05]

12 minutes ago, PaulEC said:

Sorry, you're quite right, it's a new view, not a new window. But when you are trying to modify a mock-up it can help to place your image correctly. (It doesn't always work, it depends on how the mock-up was constructed.) 

How can that help? If you isolate your subject, you can't see the objects which it is placed onto. So you don't know where to move or how to distort it in order to place it correctly within the mockup. Even editing might be tricky, as lots of edits are usually done on separate layers, not on the embedded object (formerly photoshop's smart object).

[Dan C]

2 hours ago, ONiel said:

I don't understand how to insert my own phone-screen-image in the mockup. There is one layer called "REPLACE ME", but when I select it the "replace image"-button described here doesn't show up.

Hi @ONiel 

Please navigate to Edit > Preferences > General and make sure that 'Import PSD SmartObjects where possible' is ticked.

Once this is active, re-import the PSD file and you should find the 'REPLACE ME' layer is now an embedded document that can be replaced.

I hope this helps!

[Ron P.]

5 hours ago, ONiel said:

Thanks for your reply! Could you elaborate on how you created the selection inside the cellphone? Thanks!

Here you go, a short screen recording.