Practical Step-by-Step Guide to Create a Mobile Mockup in Photoshop

This guide explains how to create mobile mockup in Photoshop with practical, repeatable steps for designers and product teams. The walkthrough covers setup, smart objects, export settings for retina assets, and styling tips so a static mockup looks polished and production-ready. Detected intent: Informational.

How to create mobile mockup in Photoshop: Step-by-step

1. 1. Prepare the document and artboard

   Create an artboard sized to the target device. For example, an iPhone 12 artboard in Photoshop uses 1170 × 2532 px at 3x scale. Set the document to 72–150 DPI for screen mockups — file DPI is primarily relevant for print. Name the artboard with the device and scale (e.g., iPhone12_3x).

2. 2. Use a photoshop mobile mockup template or device frame

   Import a device frame as a layer or place a vector device frame. Using a template speeds alignment; make sure the screen area is a transparent smart object or mask. If the template contains layer comps, toggle them to match portrait/landscape states.

3. 3. Place the UI as a Smart Object

   Convert the UI image or artboard to a Smart Object (Layer > Smart Objects > Convert to Smart Object). That preserves editability and makes it easy to replace the screen content without redoing transforms. For responsive app mockup Photoshop workflows, resizing smart objects keeps vector assets crisp.

4. 4. Align, scale, and apply effects

   Fit the Smart Object into the screen area. Use Transform (Ctrl/Cmd+T) and hold Shift if maintaining aspect ratio. Add subtle inner shadows, highlights, and ambient shadows using layer styles to create depth. Use layer masks rather than erasing pixels.

5. 5. Export and prepare developer assets

   Export slices or use Export As to create @1x, @2x, and @3x assets. For production assets, follow platform guidance: Android (MDPI/HDPI/XHDPI) or iOS (1x/2x/3x). For official Photoshop export best practices, consult the Adobe documentation: Adobe Photoshop User Guide.

MOCKUP Framework (named checklist)

Use the "MOCKUP" Framework as a checklist:

• M — Measure: confirm artboard size and pixel density
• O — Orient: choose portrait or landscape and device frame
• C — Convert: place UI as Smart Object
• K — Keep layers organized (groups, named layers)
• U — Use effects sparingly (shadows, highlights, reflections)
• P — Preview & export at required scales

Real-world example

Scenario: Create an onboarding screen mockup for iPhone 12. Start a 1170 × 2532 px artboard, import the iPhone frame with a transparent screen mask, place the onboarding design as a Smart Object exported from Sketch or Figma at 3x resolution, fit and add a soft drop shadow, then Export As PNG @3x for presentation and slices at @2x for developer handoff.

Practical tips

• Use Smart Objects to keep the mockup editable and swap designs quickly.
• Keep a separate layer group for device frames so they can be hidden for plain screenshots.
• Name layers and use color labels for rapid navigation during iterations.
• Work in RGB color mode; convert to sRGB when exporting for web or presentation to preserve color consistency.

Common mistakes and trade-offs

Trade-offs often occur between realism and file size. Highly detailed shadows and reflections make the mockup look polished but increase file size and editing complexity. Common mistakes include:

• Forgetting to set the artboard scale — causing blurry exports for retina devices.
• Flattening layers too early, which makes later edits difficult.
• Using rasterized device frames instead of vectors, which can blur when scaled.

Core cluster questions

• How to export retina-ready assets from Photoshop for mobile apps?
• What artboard sizes to use for common smartphone mockups?
• How do Smart Objects improve mobile mockup workflows?
• When to use vector device frames versus bitmap screenshots?
• How to prepare a Photoshop mockup for developer handoff?

FAQ

How do I create mobile mockup in Photoshop?

Start a correctly sized artboard, place the UI design as a Smart Object into a device frame, adjust scaling for pixel density, add subtle effects, and export @1x/@2x/@3x assets. Use organized layers and masks to keep edits non-destructive.

Which file format is best for mobile mockups?

Use PNG for lossless screenshots and transparent device frames; JPEG is acceptable for full-screen presentation images where file size matters. For developer assets, export PNG or SVG depending on whether the asset is raster or vector.

Can a photoshop mobile mockup template speed up the process?

Yes — templates with pre-made device frames and screen masks speed alignment and maintain consistent naming conventions. Templates are especially useful for creating a family of device mockups quickly.

How to export assets at different resolutions?

Use Export As or Generate Assets in Photoshop to create scaled versions. Name layers with suffixes like "@2x" and "@3x" or use Export As scale options to produce multiple sizes in one step.