{"id":267,"date":"2020-12-16T22:48:00","date_gmt":"2020-12-16T22:48:00","guid":{"rendered":"https:\/\/wendyzhous.wordpress.com\/?p=267"},"modified":"2020-12-17T12:14:39","modified_gmt":"2020-12-17T12:14:39","slug":"learn-ui-design-for-beginners-how-to-place-your-ui-design-in-a-mockup-with-photoshop-tutorial","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/learn-ui-design-for-beginners-how-to-place-your-ui-design-in-a-mockup-with-photoshop-tutorial\/","title":{"rendered":"How To Place UI Design In A Mockup (YouTube tutorial)"},"content":{"rendered":"\n<p class=\"has-pale-cyan-blue-color has-text-color\"><strong>I frequently get questions about how to place UI design in a mockup. These mockups are of phones, tablets, and computers. In this article, you&#8217;ll find a YouTube tutorial video and a how-to guide in text. It&#8217;s really super easy to do.<\/strong><\/p>\n\n\n\n<p>Placing designs in mockups makes it look like the apps and products are real, even though they&#8217;re just UI design concepts. I think they&#8217;re a great way to showcase your work. I included a section of free UI mockup resources, where you can download mockup files for free.<\/p>\n\n\n\n<p>You may also be interested in: <a href=\"https:\/\/www.wendyzhou.se\/blog\/ux-ui-design-programs-and-applications\/\">The 6 Best UX\/UI Design Tools for 2021<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tutorial Video on How to Place UI Design in a Mockup (Photoshop)<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"How To Place Your UI Design In A Mock-up - Photoshop Tutorial\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/0sTFUA16pag?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-step guide<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Google &#8220;Free Mockup&#8221;<\/strong> + [the device] <br>For example: &#8220;Free Mockup iPhone X&#8221; or &#8220;Free Mockup Macbook Pro&#8221;<\/li><li>I usually go to <strong><a href=\"https:\/\/www.mockupworld.co\/\">Mockupworld (free mockup resources)<\/a><\/strong> and just <strong>download<\/strong> one I think looks nice.<\/li><li><strong>Open up the file <\/strong>in your program (E.g. Photoshop or Sketch)<\/li><li>In the mockup file, you&#8217;ll find a layer called <strong>&#8220;Edit me&#8221; or &#8220;Change me&#8221;<\/strong>.<\/li><li><strong>Open<\/strong> the layer and change the content to your UI design.<\/li><li><strong>Save the &#8220;Edit me&#8221;\/&#8221;Change me&#8221; layer.<\/strong> <br>Note! You <em>have<\/em> to save the edited layer! I forget this sometimes and nothing will happen.<\/li><li><strong>Return to the main file<\/strong> (move out of the layer you edited).<\/li><li><strong>Save and export<\/strong> the file in the format you want. (JPEG, JPG, or PNG works well for displaying UI design on the web or on social media).<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"709\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/cropped-wendy_zhou_blog_mockup-1024x709.png\" alt=\"How to place ui design in a mockup\" class=\"wp-image-3079\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/cropped-wendy_zhou_blog_mockup-1024x709.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/cropped-wendy_zhou_blog_mockup-300x208.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/cropped-wendy_zhou_blog_mockup-768x532.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/cropped-wendy_zhou_blog_mockup-1536x1064.png 1536w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/cropped-wendy_zhou_blog_mockup.png 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Example of my blog UI design in a mockup<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Best Free UI mockup resources<\/h2>\n\n\n\n<p>You can get mockups to use for free from many sites. Here are some of the ones I use:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.free-mockup.com\/downloads\/category\/ux-ui-mockups\/\">FreeMockUp<\/a><\/li><li><a href=\"https:\/\/www.mockupworld.co\/\">Mockupworld<\/a><\/li><li><a href=\"https:\/\/www.uistore.design\/categories\/mockups\/\">UI store design<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Hope you guys liked it and that it was helpful!<\/p>\n\n\n\n<p><strong>Support me on YouTube!<\/strong><br>I&#8217;m new to making YouTube videos and I would be so thankful for any support. <strong>So subscribe and like my video (if you want to)! <\/strong>I will be sharing more UI design tutorials as well as other design videos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Want to see more?<\/h2>\n\n\n\n<p>Here are a few of my other related articles about UI design and YouTube tutorials.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.wendyzhou.se\/blog\/how-to-import-sketch-to-figma\/\">How to Import Sketch to Figma?<\/a> (YouTube tutorial)<\/li><li><a href=\"https:\/\/www.wendyzhou.se\/blog\/how-to-create-a-3d-object-in-after-effects\/\">How to create a 3D object in After Effects<\/a> (YouTube tutorial)<\/li><li><a href=\"https:\/\/www.wendyzhou.se\/blog\/weekly-design-inspiration-x3-_-voice-control-face-masks-smart-homes\/\">Voice Control, 3D Illustrations &amp; Face Masks in <\/a>&#8211; Latest UI design trends<\/li><li>Check out this <a data-type=\"post\" data-id=\"2343\" href=\"https:\/\/www.wendyzhou.se\/blog\/2020\/11\/17\/a-cyberpunk-ui-kit-you-need-to-know-about\/\">cool futuristic UI-kit<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Placing designs in mockups makes it look like the apps and products are real, even though they&#8217;re just UI  concepts! Here&#8217;s a YouTube tutorial, and a how-to guide on how to place UI design in a mockup.<\/p>\n","protected":false},"author":2,"featured_media":470,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[166,6],"tags":[],"class_list":["post-267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-ux-and-ui-design","entry","has-media"],"gutentor_comment":4,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",640,360,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2-300x169.png",300,169,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",640,360,false],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",640,360,false],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",640,360,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",640,360,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",600,338,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",640,360,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/01\/YOUTUBE2.png",640,360,false]},"uagb_author_info":{"display_name":"Wendy Zhou - Design","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendyzhouux\/"},"uagb_comment_info":4,"uagb_excerpt":"Placing designs in mockups makes it look like the apps and products are real, even though they're just UI concepts! Here's a YouTube tutorial, and a how-to guide on how to place UI design in a mockup.","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":11,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"predecessor-version":[{"id":3124,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions\/3124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/470"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}