{"id":46177,"date":"2018-05-04T04:20:12","date_gmt":"2018-05-04T11:20:12","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2018\/05\/how-to-customize-a-website-mockup-template\/"},"modified":"2018-05-04T04:20:12","modified_gmt":"2018-05-04T11:20:12","slug":"how-to-customize-a-website-mockup-template","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2018\/05\/how-to-customize-a-website-mockup-template\/","title":{"rendered":"How to Customize a Website Mockup Template"},"content":{"rendered":"

A website mockup template can be a design life-saver. It makes it easy to show off a website design concept in a setting that represents actual use (on many different devices). But how can you customize a website mockup template and drop in your own design? Here\u2019s how.<\/p>\n

There are two ways to get started. You can either create your own website mockup template to use in projects or download one to get started quickly<\/a>. The great thing is that there are so many template options out there to help clients visualize a new design in real-time.<\/p>\n

Here\u2019s everything you need to know about customizing a template (as well and finding a great template, to begin with).<\/p>\n

<\/span><\/p>\n

What is a Website Mockup Template?<\/h2>\n
\"website<\/a><\/div>\n
Clients love to see a finished design in a mockup template, because it gives them a better idea of what the design team is thinking.<\/div>\n

Most website mockup templates come in the form of an editable Adobe Photoshop file. The design is made so that you can paste a screenshot of your website into a realistic looking frame, such as showing a website homepage on an actual computer, tablet, or mobile device.<\/p>\n

Website mockup templates can include a single image, multiple images, and renders at different orientations. A good mockup can provide a great visualization of what a finished product will look like in actual use.<\/p>\n

While you can make your own mockups, there are plenty of options available for download. Most of these templates are created as PSD files using layers and smart objects to create the final design, while maintaining the visual properties of the file. This comes in handy when using a mockup that uses an interesting orientation, such as 3D or perspective view<\/a>.<\/p>\n

Most website mockup templates include a mix of vector and raster images, so export with care. You want to make sure your website image looks as good as it can before showing it off.<\/p>\n

How to Customize a Mockup Template<\/h2>\n

While a Photoshop file with several odd-looking layers can be a bit intimidating, customising a mockup template isn\u2019t a complicated process. You just need to:<\/p>\n

    \n
  1. Find a website mockup template that you like. (You can make your own, but with so many great options available, we recommended the download option.) Look for a template that highlights features of your design, such as multiple views for responsive websites (desktop, tablet and phone), with a background that fits the style of the project (white or black versus a colorful background or photo-realistic style).<\/li>\n
  2. Unzip the download and confirm that you have all the necessary parts: A PSD file with the editable mockup, a JPG that shows you what the design should look like (optional) and an information or readme file with any licensing information and instructions.<\/li>\n
  3. Open the PSD file in Photoshop and take a look at the layers. Look for the layer that says \u201cDrop Your Design Here\u201d, or similar (there\u2019s always one that stands out with this instruction!)<\/li>\n
  4. Double-click that layer, to open it up.\n<\/li>\n
  5. Take the appropriate screenshots of your design, sized for optimal resolution and to show exactly what you want people to see in the final mockup design.)<\/li>\n
  6. Copy-and-paste, or drag-and-drop your images or content into the appropriate layer, resizing as needed to fill the space.<\/li>\n
  7. Hit Ctrl-S, or Cmd-S, to save the smart layer, then go back to the original image. Voila! You should see your new screenshot in the mockup.\n<\/li>\n
  8. Export the file, using the size and format you need, for display.<\/li>\n<\/ol>\n

    How to Use a Website Mockup Template<\/h2>\n

    Once you\u2019ve customized a website mockup template, what do you do with it? These seemingly simple designs have a lot of practical applications. You can use a website mockup template to:<\/p>\n