{"id":32659,"date":"2024-09-25T17:12:48","date_gmt":"2024-09-25T11:42:48","guid":{"rendered":"https:\/\/mockey.ai\/?p=32659"},"modified":"2024-09-25T17:12:51","modified_gmt":"2024-09-25T11:42:51","slug":"how-to-create-iphone-mockup-in-photoshop","status":"publish","type":"post","link":"https:\/\/mockey.ai\/blog\/how-to-create-iphone-mockup-in-photoshop\/","title":{"rendered":"How to Create iPhone Mockup in Photoshop in 2024"},"content":{"rendered":"\n<p>This article will guide you on how to create iPhone mockup in Photoshop in 2024, along with a step-by-step walkthrough using the Mockey.ai mockup generator.&nbsp;<\/p>\n\n\n\n<p>Mockey offers excellent free iPhone templates without watermarks, making it a great alternative to Photoshop.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/generate-free-iphone-mockups-with-mockey-1024x538.webp\" alt=\"generate free iphone mockups with mockey\" class=\"wp-image-31437\" style=\"border-width:2px;width:960px;height:auto\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/generate-free-iphone-mockups-with-mockey-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/generate-free-iphone-mockups-with-mockey-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/generate-free-iphone-mockups-with-mockey-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/generate-free-iphone-mockups-with-mockey-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/generate-free-iphone-mockups-with-mockey.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/mockey.ai\/mockups\/tech\/iphone\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><strong>Generate iPhone Mockups for Free Now<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p>We&#8217;ll also cover how to customize your design to an iPhone mockup using Mockey.ai, which is easier to use than Photoshop. <\/p>\n\n\n\n<p>Let\u2019s get started!<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><li><a href=\"#a-quick-guide-on-how-to-create-i-phone-mockup-in-photoshop-using-mockey-ai\">A Quick Guide on How to Create iPhone Mockup in Photoshop Using Mockey.ai<\/a><\/li><li><a href=\"#use-mockey-ai-as-an-alternative-to-photoshop-for-mockups\">Use Mockey.ai as an Alternative to Photoshop for Mockups<\/a><\/li><li><a href=\"#best-i-phone-templates-to-pick\">Best iPhone Templates to Pick<\/a><\/li><li><a href=\"#to-conclude\">To Conclude<\/a><\/li><li><a href=\"#fa-qs\">FAQs<\/a><\/li><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"a-quick-guide-on-how-to-create-i-phone-mockup-in-photoshop-using-mockey-ai\"><strong>A Quick Guide on How to Create iPhone Mockup in Photoshop Using Mockey.ai<\/strong><\/h2>\n\n\n\n<p>The following is a quick tutorial on how to create iPhone mockup in Photoshop using Mockey.ai.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <strong>Mockey.ai<\/strong> mockup generator, go to <strong>Mockups &gt; Tech &gt; iPhone<\/strong>, and download a free, watermark-free JPEG mockup.<\/li>\n\n\n\n<li>In Photoshop, use the Rectangle Tool to create a <strong>375&#215;812<\/strong> box, with no stroke, and bright color fill. Center it, <strong>convert it to a Smart Object<\/strong>, and resize the canvas (Image &gt; Canvas Size) by <strong>multiplying width and height by 3<\/strong> for high-res scaling.<\/li>\n\n\n\n<li>Save the file, return to the main document, and resize using <strong>Free Transform<\/strong> (hold Shift + Alt\/Option to scale).<\/li>\n\n\n\n<li>Use the <strong>Magic Wand Tool<\/strong> and Expand (1px at a time) to select the white, and soften edges with Feather Selection (1px).<\/li>\n\n\n\n<li>Refine using the <strong>Quick Selection Tool<\/strong>, then turn on the Smart Object, <strong>add a layer mask<\/strong>, and organize layers.<\/li>\n\n\n\n<li>Double-click the Smart Object thumbnail, insert your design, save, and close to update the iPhone mockup.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-large-font-size\"><strong>A Step-by-step Guide<\/strong><\/p>\n\n\n\n<p>This step-by-step tutorial shows you how to create iPhone mockup in Photoshop using Mockey.ai.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-download-the-i-phone-mockup-template\"><strong>Step 1: Download the iPhone Mockup Template<\/strong><\/h3>\n\n\n\n<p>Open <strong>Mockey.ai <\/strong>(sign up there) and navigate to &#8220;<strong>Mockups<\/strong>&#8221; &gt; &#8220;<strong>Tech<\/strong>&#8221; &gt; &#8220;<strong>iPhone<\/strong>.&#8221; Choose a template and download the blank iPhone mockup in JPEG format, which is free and watermark-free.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/download-iphone-mockup-image-for-free-1024x538.webp\" alt=\"download iphone mockup image for free\" class=\"wp-image-32693\" style=\"border-width:2px;width:960px;height:auto\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/download-iphone-mockup-image-for-free-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/download-iphone-mockup-image-for-free-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/download-iphone-mockup-image-for-free-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/download-iphone-mockup-image-for-free-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/download-iphone-mockup-image-for-free.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-set-up-the-base-shape\"><strong>Step 2: Set up the Base Shape<\/strong><\/h3>\n\n\n\n<p>Open your JPEG file in Photoshop. Anywhere on the canvas, click the Rectangle Tool. Enter the dimensions for your design (e.g., 375&#215;812 for an iPhone). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/enter-the-dimensions-for-your-design-for-iphone-mockup-in-photoshop-1024x538.webp\" alt=\"enter the dimensions for your design for iphone mockup in photoshop\" class=\"wp-image-32668\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/enter-the-dimensions-for-your-design-for-iphone-mockup-in-photoshop-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/enter-the-dimensions-for-your-design-for-iphone-mockup-in-photoshop-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/enter-the-dimensions-for-your-design-for-iphone-mockup-in-photoshop-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/enter-the-dimensions-for-your-design-for-iphone-mockup-in-photoshop-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/enter-the-dimensions-for-your-design-for-iphone-mockup-in-photoshop.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Set the stroke to &#8220;<strong>None<\/strong>&#8221; and fill the rectangle with a bright color (any color works). Move the rectangle to the center of the canvas. If it&#8217;s too small, right-click the rectangle layer and select &#8220;<strong>Convert to Smart Object<\/strong>.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/right-click-the-rectangle-layer-and-select-convert-to-smart-object-1024x538.webp\" alt=\"right-click the rectangle layer and select convert to smart object\" class=\"wp-image-32669\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/right-click-the-rectangle-layer-and-select-convert-to-smart-object-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/right-click-the-rectangle-layer-and-select-convert-to-smart-object-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/right-click-the-rectangle-layer-and-select-convert-to-smart-object-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/right-click-the-rectangle-layer-and-select-convert-to-smart-object-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/right-click-the-rectangle-layer-and-select-convert-to-smart-object.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-adjust-the-smart-object-size\"><strong>Step 3: Adjust the Smart Object Size<\/strong><\/h3>\n\n\n\n<p>Double-click the Smart Object to open it. Go to <strong>Image &gt; Canvas Size<\/strong> and set the width to &#8220;<strong>375 * 3<\/strong>&#8221; and the height to &#8220;<strong>812 * 3<\/strong>&#8221; (this multiplies the dimensions by 3). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/set-the-width-to-22375-322-and-the-height-to-22812-3-on-how-to-create-iphone-mockup-in-photoshop-1024x538.webp\" alt=\"set the width to 375 * 3 and the height to 812 * 3 on how to create iphone mockup in photoshop\" class=\"wp-image-32671\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/set-the-width-to-22375-322-and-the-height-to-22812-3-on-how-to-create-iphone-mockup-in-photoshop-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/set-the-width-to-22375-322-and-the-height-to-22812-3-on-how-to-create-iphone-mockup-in-photoshop-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/set-the-width-to-22375-322-and-the-height-to-22812-3-on-how-to-create-iphone-mockup-in-photoshop-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/set-the-width-to-22375-322-and-the-height-to-22812-3-on-how-to-create-iphone-mockup-in-photoshop-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/set-the-width-to-22375-322-and-the-height-to-22812-3-on-how-to-create-iphone-mockup-in-photoshop.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Scale the design proportionally for high-resolution quality, then save the Smart Object and return it to the main document.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-resize-and-position-the-shape\"><strong>Step 4: Resize and Position the Shape<\/strong><\/h3>\n\n\n\n<p>Once you get back to the main document, you\u2019ll see that the shape is larger. Go to <strong>Edit &gt; Free Transform<\/strong>, hold Shift, and resize from a corner. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-edit-free-transform-in-photoshop-1024x538.webp\" alt=\"go to edit &gt; free transform in photoshop\" class=\"wp-image-32673\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-edit-free-transform-in-photoshop-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-edit-free-transform-in-photoshop-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-edit-free-transform-in-photoshop-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-edit-free-transform-in-photoshop-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-edit-free-transform-in-photoshop.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can hold Alt\/Option to scale from the center. Position the rectangle to cover the iPhone display.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-5-refine-the-selection\"><strong>Step 5: Refine the Selection<\/strong><\/h3>\n\n\n\n<p>Hide the rectangle layer and select the background. Zoom in and use Photoshop\u2019s selection tools: Object Selection, Quick Selection, or Magic Wand. Start with the Magic Wand Tool to select the area. If the selection isn\u2019t perfect, go to <strong>Select &gt; Modify &gt; Expand<\/strong> and increase by 1 pixel at a time until the white is fully selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-expand-and-increase-by-1-pixel-1024x538.webp\" alt=\"go to select &gt; modify &gt; expand and increase by 1 pixel\" class=\"wp-image-32674\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-expand-and-increase-by-1-pixel-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-expand-and-increase-by-1-pixel-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-expand-and-increase-by-1-pixel-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-expand-and-increase-by-1-pixel-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-expand-and-increase-by-1-pixel.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-6-soften-the-selection\"><strong>Step 6: Soften the Selection<\/strong><\/h3>\n\n\n\n<p>To avoid hard edges, go to <strong>Select &gt; Modify &gt; Feather<\/strong> and set it to &#8220;<strong>1<\/strong>&#8221; pixel for a softer, more natural look.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-feather-and-set-it-to-1-pixel-for-a-softer-1024x538.webp\" alt=\"go to select &gt; modify &gt; feather and set it to 1 pixel for a softer\" class=\"wp-image-32676\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-feather-and-set-it-to-1-pixel-for-a-softer-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-feather-and-set-it-to-1-pixel-for-a-softer-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-feather-and-set-it-to-1-pixel-for-a-softer-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-feather-and-set-it-to-1-pixel-for-a-softer-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/go-to-select-modify-feather-and-set-it-to-1-pixel-for-a-softer.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-7-fine-tune-with-quick-selection-tool\"><strong>Step 7: Fine-Tune with Quick Selection Tool<\/strong><\/h3>\n\n\n\n<p>Use the Quick Selection Tool to further refine the edges, especially around detailed areas like fingers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/use-the-quick-selection-tool-to-further-refine-the-edges-especially-around-detailed-areas-like-fingers-1024x538.webp\" alt=\"use the quick selection tool to further refine the edges, especially around detailed areas like fingers\" class=\"wp-image-32678\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/use-the-quick-selection-tool-to-further-refine-the-edges-especially-around-detailed-areas-like-fingers-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/use-the-quick-selection-tool-to-further-refine-the-edges-especially-around-detailed-areas-like-fingers-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/use-the-quick-selection-tool-to-further-refine-the-edges-especially-around-detailed-areas-like-fingers-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/use-the-quick-selection-tool-to-further-refine-the-edges-especially-around-detailed-areas-like-fingers-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/use-the-quick-selection-tool-to-further-refine-the-edges-especially-around-detailed-areas-like-fingers.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-8-mask-the-design\"><strong>Step 8: Mask the Design<\/strong><\/h3>\n\n\n\n<p>Turn the Smart Object layer back on. Layers panel &gt; Add Layer Mask. Rename the layer for better organization.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/layers-panel-add-layer-mask-1024x538.webp\" alt=\"layers panel &gt; add layer mask\" class=\"wp-image-32680\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/layers-panel-add-layer-mask-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/layers-panel-add-layer-mask-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/layers-panel-add-layer-mask-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/layers-panel-add-layer-mask-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/layers-panel-add-layer-mask.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-9-add-your-design\"><strong>Step 9: Add Your Design<\/strong><\/h3>\n\n\n\n<p>Double-click the Smart Object thumbnail to open it. Bring your design (from Photoshop, XD, or Illustrator) into the Smart Object file. Resize the design to fit the canvas, save, and close the file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-10-finalize\"><strong>Step 10: Finalize<\/strong><\/h3>\n\n\n\n<p>Your design will now appear on the iPhone display. You can always return to the Smart Object, make changes, and save to update the main document.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"use-mockey-ai-as-an-alternative-to-photoshop-for-mockups\"><strong>Use Mockey.ai as an Alternative to Photoshop for Mockups<\/strong><\/h2>\n\n\n\n<p>Make use of Mockey.ai instead of <strong><a href=\"https:\/\/www.adobe.com\/in\/products\/photoshop.html\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Photoshop<\/a><\/strong> for your mockup needs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-launch-mockey-ai\"><strong>Step 1: Launch Mockey.ai<\/strong><\/h3>\n\n\n\n<p>Open <strong><a href=\"https:\/\/mockey.ai\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Mockey.ai<\/a><\/strong> and sign up there.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/open-mockey.ai-to-make-iphone-mockups-1024x538.webp\" alt=\"open mockey.ai to make iphone mockups\" class=\"wp-image-32685\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/open-mockey.ai-to-make-iphone-mockups-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/open-mockey.ai-to-make-iphone-mockups-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/open-mockey.ai-to-make-iphone-mockups-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/open-mockey.ai-to-make-iphone-mockups-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/open-mockey.ai-to-make-iphone-mockups.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-look-for-the-phone-category\"><strong>Step 2: Look for the Phone Category<\/strong><\/h3>\n\n\n\n<p>Tap &#8220;<strong>Mockups<\/strong>&#8220;, then &#8220;<strong>Tech<\/strong>&#8220;, and select the &#8220;<strong>iPhone<\/strong>&#8221; category.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/choose-iphone-category-on-how-to-make-iphone-mockups-1024x538.webp\" alt=\"choose iphone category on how to make iphone mockups\" class=\"wp-image-31439\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/choose-iphone-category-on-how-to-make-iphone-mockups-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/choose-iphone-category-on-how-to-make-iphone-mockups-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/choose-iphone-category-on-how-to-make-iphone-mockups-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/choose-iphone-category-on-how-to-make-iphone-mockups-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/choose-iphone-category-on-how-to-make-iphone-mockups.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-upload-design\"><strong>Step 3: Upload Design<\/strong><\/h3>\n\n\n\n<p>Add your design to customize for your mockup by clicking the &#8220;<strong>Upload Design<\/strong>&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/click-upload-design-to-make-iphone-mockups-1024x538.webp\" alt=\"click upload design to make iphone mockups\" class=\"wp-image-31440\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/click-upload-design-to-make-iphone-mockups-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/click-upload-design-to-make-iphone-mockups-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/click-upload-design-to-make-iphone-mockups-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/click-upload-design-to-make-iphone-mockups-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/08\/click-upload-design-to-make-iphone-mockups.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-customize\"><strong>Step 4: Customize<\/strong><\/h3>\n\n\n\n<p>Choose from various customization options, including background changes. You can select from\u00a0pre-made designs, upload your own background, or make it transparent. Mockey&#8217;s MAX plan, available at an affordable price, even lets you describe your ideal background\u2014a unique feature not offered by other <a href=\"https:\/\/mockey.ai\/blog\/best-mockup-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"><strong>mockup websites<\/strong><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/customize-background-with-mockey.ai-for-iphone-mockup-1024x538.webp\" alt=\"customize background with mockey.ai for iphone mockup\" class=\"wp-image-32689\" style=\"border-width:2px\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/customize-background-with-mockey.ai-for-iphone-mockup-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/customize-background-with-mockey.ai-for-iphone-mockup-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/customize-background-with-mockey.ai-for-iphone-mockup-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/customize-background-with-mockey.ai-for-iphone-mockup-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/customize-background-with-mockey.ai-for-iphone-mockup.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-5-download-your-i-phone-mockup\"><strong>Step 5: Download Your iPhone Mockup<\/strong><\/h3>\n\n\n\n<p>After the customize, hit the &#8220;<strong>Download<\/strong>&#8221; button to save your iPhone mockup for free with no watermark in it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"best-i-phone-templates-to-pick\"><strong>Best iPhone Templates to Pick<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1. iPhone Mockup in Hand<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-hand-1024x538.webp\" alt=\"iphone mockup in hand\" class=\"wp-image-32696\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-hand-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-hand-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-hand-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-hand-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-hand.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/mockey.ai\/mockups\/tech\/iphone\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>iPhone Mockup in hand<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2. iphone Mockup in Wooden Surface<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-wooden-surface-1024x538.webp\" alt=\"iphone mockup in wooden surface\" class=\"wp-image-32698\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-wooden-surface-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-wooden-surface-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-wooden-surface-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-wooden-surface-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-in-wooden-surface.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/mockey.ai\/mockups\/tech\/iphone\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>iPhone Mockup in Wooden Surface<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3. iPhone Mockup Color Background with a Shadow<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-color-background-with-a-shadow-1024x538.webp\" alt=\"iphone mockup color background with a shadow\" class=\"wp-image-32701\" srcset=\"https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-color-background-with-a-shadow-1024x538.webp 1024w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-color-background-with-a-shadow-300x158.webp 300w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-color-background-with-a-shadow-768x403.webp 768w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-color-background-with-a-shadow-150x79.webp 150w, https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/iphone-mockup-color-background-with-a-shadow.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-4 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/mockey.ai\/mockups\/tech\/iphone\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>iPhone Mockup Color Background with a Shadow<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"to-conclude\"><strong>To Conclude<\/strong><\/h2>\n\n\n\n<p>In conclusion, we\u2019ve provided a quick guide and step-by-step instructions on how to create iPhone mockup in Photoshop using Mockey.ai. We chose Mockey for its unlimited free mockup downloads and customization features.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re still unsure how to create an iPhone mockup, visit the <a href=\"https:\/\/mockey.ai\/iphone-mockup-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"><strong>iPhone mockup generator<\/strong><\/a> page for more guidance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fa-qs\"><strong>FAQs<\/strong><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1727071506797\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How to create an iPhone mockup?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To create an iPhone mockup, first, sign up on Mockey.ai and navigate to the iPhone mockup category under Mockups and Tech. Upload your design, customize the background, and then download your iPhone mockup for free without a watermark.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727071525880\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How to create a mockup phone in Photoshop?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To create a phone mockup in Photoshop, start by using the Rectangle Tool to draw a phone shape. Convert this shape to a Smart Object, then import and adjust your phone design within it before saving and exporting the mockup.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727071540613\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How to create a phone case mockup in Photoshop?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To create a phone case mockup in Photoshop, start by cutting out the phone image with the quick selection tool. Then, draw a rectangle for the case and convert it to a smart object. Finally, place your design, resize it, and save it.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p><strong>Related reading:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/mockey.ai\/blog\/how-to-make-iphone-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Make iPhone Mockups for Free \u2013 Quick Steps<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mockey.ai\/blog\/how-to-make-t-shirt-mockup-in-photoshop\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Make T Shirt Mockup in Photoshop (2024)<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mockey.ai\/blog\/how-to-remove-background-in-photoshop\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Remove Background in Photoshop \u2013 Beginners Guide 2024<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mockey.ai\/blog\/how-to-remove-white-background-in-photoshop\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Remove White Background in Photoshop \u2013 2024 Guide<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will guide you on how to create iPhone mockup in Photoshop in 2024, along with a step-by-step walkthrough using the Mockey.ai mockup generator.&nbsp; Mockey offers excellent free iPhone templates without watermarks, making it a great alternative to Photoshop.&nbsp; We&#8217;ll also cover how to customize your design to an iPhone mockup using Mockey.ai, which [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":32691,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"inline_featured_image":false,"_uag_custom_page_level_css":"","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[7],"tags":[],"class_list":["post-32659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide"],"uagb_featured_image_src":{"full":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop.webp",1200,628,false],"thumbnail":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop-150x150.webp",150,150,true],"medium":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop-300x157.webp",300,157,true],"medium_large":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop-768x402.webp",768,402,true],"large":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop-1024x536.webp",1024,536,true],"1536x1536":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop.webp",1200,628,false],"2048x2048":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop.webp",1200,628,false],"web-stories-poster-portrait":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop-640x628.webp",640,628,true],"web-stories-publisher-logo":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop-96x96.webp",96,96,true],"web-stories-thumbnail":["https:\/\/mockey.ai\/wp-content\/uploads\/sites\/15\/2024\/09\/how-to-create-iphone-mockup-in-photoshop-150x79.webp",150,79,true]},"uagb_author_info":{"display_name":"Sangram Sahoo","author_link":"https:\/\/mockey.ai\/author\/sangram\/"},"uagb_comment_info":0,"uagb_excerpt":"This article will guide you on how to create iPhone mockup in Photoshop in 2024, along with a step-by-step walkthrough using the Mockey.ai mockup generator.&nbsp; Mockey offers excellent free iPhone templates without watermarks, making it a great alternative to Photoshop.&nbsp; We&#8217;ll also cover how to customize your design to an iPhone mockup using Mockey.ai, which&hellip;","_links":{"self":[{"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/posts\/32659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/comments?post=32659"}],"version-history":[{"count":28,"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/posts\/32659\/revisions"}],"predecessor-version":[{"id":32815,"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/posts\/32659\/revisions\/32815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/media\/32691"}],"wp:attachment":[{"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/media?parent=32659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/categories?post=32659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mockey.ai\/wp-json\/wp\/v2\/tags?post=32659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}