Introduction We have recently made changes to our workflow and how we create mockups. The process we have been using for over 5 years is now entirely replaced. If you are an existing user of PSDCovers then you'll be happy to learn that our new workflow does not affect how you use our panel. In fact, we worked very hard to keep the changes to the PSDCovers panel down to a bare minimum — you can expect to invest 2 minutes learning the new panel. Contents The following tutorial includes instructions for rendering mockups using our Action Mockups as well as our newer AR Mockups process. Use the links from the Table of Contents listed along the right edge of your browser to dig into specific sections of this tutorial. To jump directly to AR Mockups or Action Mockups you may use the following links: AR MockupsAction Mockups Panel Activation & Account Creation Using the PSDCovers panel does not require an account to access most of our free mockups. However, please note that this tutorial is written from the point of view of someone who is logged in. If you do not have the PSDCovers panel installed, or have not created a free account, please review our getting started tutorial. Tutorial Assets Source Mockups MUG 006 Container Cleaner 001 Sample Download HTML Spinnable Player Overview Accessing the PSDCovers Panel Accessing the panel is still done through the Extension menu in Photoshop. Click on the Window Menu Move your cursor down to the Extensions Menu Select PSDCovers from the Extensions sub-menu Once the panel is open you can dock it wherever you like in your workspace. Product Mockup Catalogs The panel's default startup mode is to open the product mockup catalogue page. The product mockup catalogue offers a high-level view of both types of mockups the panel currently supports: AR Mockups catalog Action Mockups catalog Product Search Finding mockups across both catalog sets is easy: Enter a keyword for the type of mockup you are interested in Total results found in AR Mockups Total results found in Action Mockups Action Mockups Viewing The Action Mockups Catalog To render a product mockup in the Action Mockups catalog we first need to select Action Mockup from the product mockup catalog. STEP 1 Click Action Mockups Action Mockups Product List Selecting Action Mockups loads up our classic product list which contains close to 400 mockups. STEP 2 The Action Mockups catalog list Filter the catalog list using a desired search term Free mockups appear with a green label Viewing the Mockup Details Page Selecting an Action Mockup from the list brings you to the Details Page for that product mockup. For this tutorial we will be rendering MUG006. STEP 3 To view a mockup's Details Page... Click MUG006 in the catalog list The MUG006 Details Page slides into view About FREE Mockups Action Mockups which are labelled FREE and wrapped with a green outline do not require an account and can be rendered by anyone. The Details Page Overview The Details Page contains the same information as visiting the website while also being responsible for creating the template and final render for your product. Each Details Page features the following components: Product title Large product preview STEP 1 and STEP 2 buttons for rendering your mockup Product description Social media tools (not seen here) Navigation tools Back button to return to the catalog list Rendering An Action Mockup To start rendering your design onto MUG006 we first need to prepare a template which we will drop our mug design into. The template is an essential component to successfully rendering your mockup. STEP 4 Click STEP 1 to render the template... Template Render Complete Within a few seconds your MUG006 template will be ready and appears in a newly created Untitled PSD. The Layers panel will contain the various template layers. The MUG006 default template design MUG006 template layers in the Layers panel Adding Artwork To The Template Action Mockups will typically have guides which define the area where your design should go. Your artwork can cover the entire document, but in this particular case only the portion of the design within the guides will be applied to the mug. The areas on either side of the guides represent the areas of the mug which are not currently visible — for example, the back of the cup. Not being able to rotate and spin is a limitation of Action Mockups. For spinnable mockups please see our AR Mockups section. STEP 5 With the template open the next step is to add your own artwork into the allocated space between the guides. Feel free to use the entire canvas area to place your artwork — if at some point in the future you wish to render a different view of the mug you can simulate it by simply shifting your design left or right so that it appears inside the guidelines. Place design elements on canvas Artwork With Template Layers Always take note to place your own artwork above the template layers generated by STEP 1. In most cases you can safely delete these. Placing your own artwork above the template layers ensures that your work renders properly. Your artwork The STEP 1 template layers Skipping STEP 1 Once the artwork is placed in the template we can save it to the filesystem. At any point in the future you can simply open your saved template and skip directly to clicking STEP 2 to render your Action Mockup. Rendering the Hi-Res Mockup STEP 6 Our template is now ready to be applied to the mug. With your template the currently open, and active document, we can render the final result. Click STEP 2 Within a minute or less your mockup is fully rendered and presented to you in a new PSD. The Photoshop Layers panel will contain all the layers required to further modify your mockup such as customizing the background with your own colour or backdrop image. At this point your mockup is done and can be saved or shared with others using the various sharing tools offered by your favourite social media outlets. AR Mockups On the surface an AR Mockup appears to be the same product as Action Mockups, however, there are in fact very few similarities between the two products. We have worked hard to present these new AR Mockups in the same panel using the same workflow process in order to prevent our users from having to learn an entirely new rendering process. Viewing The AR Mockups Catalog STEP 1 When the PSDCovers panel is opened it will default to the product mockup catalogue page. From here we will select AR Mockups... Click anywhere on the AR Mockups row The AR Mockups Product List STEP 2 The AR Mockups product list slides into view. In this section we will be rendering a common container which holds a powdered cleaning product. Select CONTAINER CLEANER 001 from the product list. Container Cleaner Details Page Selecting CONTAINER CLEANER 001 from the AR Mockup product list brings you to the Details Page. Draggable Mockup Preview Every Details Page for an AR Mockup displays a large preview of the chosen mockup. If you are an existing user of the PSDCovers panel then the Details page looks exactly the same other than the range sliders below the preview. One easily overlooked feature of the AR Mockups Details Page is the ability to drag the preview to rotate the mockup to the desired position. STEP 3 Click and drag on the preview to rotate the AR Mockup Position Updates As the cursor is dragged left to right the position details are updated to the right of the product name. Also, the Range Slider's position is automatically updated to reflect the position of the current view. Range Sliders As an alternative method to dragging the preview to select the desired angle to render, you may also use the Range Slider to selectively rotate or spin along the horizontal or vertical axis. Below the range sliders are 2 additional buttons labelled STEP 1 and STEP 2. These buttons perform the exact same functions in both Action Mockups and AR Mockups. If you have used the PSDCovers panel at anytime in the last 5 years, then you know how these buttons work. Range Sliders Template and Render buttons Preparing the AR Template STEP 4 Once you have selected a preferred product angle to render you'll need to render the product's template. Click STEP 1 to render the product template AR Template Render Complete The time required for generating a template for any product mockup is just a few seconds. The primary use for the default template is to test rendering right away. If you were to click STEP 2 right now you'd see the template applied to the mockup which can help give you an idea of how your own design will be applied to the product. The AR template Template layers in Layers panel Universal Grid For AR Mockups we've updated how we generate the template — it's now parametric. In short, we're able to render a grid that correlates to the to the size of the product. For example, each AR product is rendered with a faint grid in the background. The grid is comprised of small and large grids — each individual grid represents 2mm while each group of 5 represents 1cm. Having the grid on the label match the real-world label dimensions is helpful when you want to place 2 or more AR product mockups together in a single layout. In the past you had to guess how big one product was when placed next to another product. With AR Mockups, you simply scale the products until their grid sizes match, once they do you know you've nailed the aspect ratio between the two. Adding Artwork to Template STEP 5 Using the template as our guide, we can place our artwork for the front and back of the product accordingly. Transparency Supported The AR Mockup workflow was designed to support fully transparent backgrounds in your layout. Once the design above is rendered to the product it will appear as if the ink was printed directly onto the product. The material of the AR Mockup will be readily visible wherever transparency is found in the design. Save Your Work STEP 6 PSDCovers fully supports reusing existing designs — that is to say, you do not need to run STEP 1 in the future. If you plan on using this design again for this AR Mokcup in the future you can simply save it normally. In the future, to render this mockup again you will only have to click on the STEP 2 button. Save the PSD to your local filesystem. Template Dimensions Each template is rendered at a very specific pixel width and height. In order to successfully render your designs onto an AR product you must not change the canvas dimensions. This includes cropping the canvas or scaling the entire document. Running STEP 2 with a template whose dimensions have been altered will result in an error message. AR Mockup Rendering Options Unlike our Action Mockups which only support a single view and Hi-Res output — AR Mockups support 168 different views and 3 output options. These options are Hi-Res, Video and Spinnable player. Additionally, each of these output options offers 5 render styles to choose from, matte, bright, semi-gloss, gloss and high-gloss. We'll review each option and the rendered results below. Hi-Res Rendering The Hi-Res Single View output is the default rendering option for AR Mockups and is visually equivalent to our Action Mockups render results. STEP 7 In STEP 6 we saved our template design so this document should still be open. For this next step the design must also be the current active document (it should be visible when you look at the Photoshop canvas). Click STEP 2 Select A Render Style One of the new features in AR Mockups is to select a rendering style. If you are familiar with Photoshop then you'll notice that what's being referred too here as a rendering style is actually a series of layers with various layer effects applied. The applied layers effects provide the illusion that your design was printed directly onto the surface of the product. The available styles are matte, bright, semi-gloss, gloss and high-gloss. By default all the samples in the panel and on our web site are rendered using the matte style. The matte style will minimize the highlights found on the product whereas the high-gloss will exaggerate the highlights making the highlights look almost 3D rendered. STEP 8 Select matte style then click Render Hi-Res Result Rendering a Hi-Res view for an AR Mockup takes the same amount of time as our Action Mockups, usually less than a minute. When complete, the Layers panel will contain multiple editable layers such as highlight layers whose brightness can be increased or decreased. Here is the final rendered design with transparency rotated to the view we selected in the panel. Our design's transparency allows the product material to be clearly visible — in this case lots of HDPE plastic... Spinnable Player Rendering Exporting a Spinnable AR Mockup involves, at most, a few extra clicks beyond the effort required to export a Hi-Res render (see above). STEP 9 Ensure CONTAINER CLEANER 001 is the active document Open the CONTAINER CLEANER 001 Details Page in the PSDCovers panel Enable Spinnable Export The PSDCovers default behaviour is to export static Hi-Res products. To enable exporting a Spinnable Player we must unlock at least one of the Range Sliders. Unlocking the Sliders First, start by unlocking the horizontal range slider. Do this by clicking the lock icon to the right of the slider. STEP 10 Click the lock icon next to the horizontal Range Slider Define Spin Range (part 1) Once the Range Slider is unlocked the 2 halves of the slider can be dragged independently of each other. Each half of the Range Slider defines how far the product will rotate in the exported Spinnable player. To export a full 360° Spinnable player we need to drag both halves to both ends of the Range Slider. STEP 11 Drag the right half of the Range Slider to the right As you drag the slider a selection will appear within the track to visually represent the views which will be exported. Define Spin Range (part 2) To export a full 360° we need to drag the left half of the Range Slider to the left edge of the slide track. STEP 12 Drag slider's left half to left edge Begin Exporting Spinnable Player The panel is now primed to export a full 360° rotation of a single horizontal axis. Specifically, this product,once exported, will rotate a full 360° at the 75° delta. STEP 13 To start the rendering process, click STEP 2 STEP 14 Next, select the render style, this will be applied to every view in the rotation. Select matte style ... ... then click Render. STEP 15 In the next section we'll be learning about video export, for now we're going to stick to exporting a Spinnable Player. Click Web Player. STEP 16 The next step is selecting a resolution, selecting a smaller resolution will render faster. If you want to scale, crop or otherwise customize the images after the export is complete then you can export a larger resolution. Select 960x540 Click Render to complete the process STEP 17 The panel will now start the rendering process. When rendering multiple views you can expect longer render times. Depending on your hardware this process can last anywhere from several minutes or longer. Be patient, once rendering is complete a modal will appear. DO NOT SWITCH APPS During the render process Photoshop will be using the clipboard intensely, if you accidentally copy text or other data from another app during the render process it will cause the process to immediately fail. It's best to allow Photoshop to complete the rendering process. STEP 18 Once rendering is complete, the modal will display the location of the rendered mockup (renders are saved to your Desktop) as well as a Launch Player button to quickly jump to your browser to view the final result. Click Launch Player Single Plane Spinnable 360° And here is the result... click anywhere on the following product image to initiate the AR player, then drag left or right to spin it. #spinAR {display:table;margin:0 auto;} Where is the vertical rotation? Notice how dragging up and down does not shift the product vertically? That's because we used the Range Sliders to define the entire horizontal range (ie, full spin) but we left the vertical Range Slider locked at 75°. Continue reading to learn how to unlock the remaining plane angles. Increase Vertical Plane Range In the sample above we learned how to select all the views around the x-axis of our product. However, the y-axis is locked at 75°. To export a Spinnable player with more than a single vertical plane of rotation we simply need to unlock the vertical Range Slider and select the available angles. STEP 19 Click to unlock the vertical Range Slider Select Entire Vertical Range With the vertical Range Slider unlocked our next step is to select the entire range. The current possible vertical planes to export are 90° (front view), 75°, 60°, 45°, 30°, 15° and 0° (top view). Although we are choosing to export the entire vertical range from 90° to 0° you are free to select any combination which best suits your needs. STEP 20 Drag the right half of the vertical Range Slider all the way to the right. Drag the left half all the vertical Range Slider all the way to the left. The preview updates to show the current position (grey dot above the Range Slider position) Start Position In a future tutorial we will review how to manually edit the Spinnable Player HTML to programatically change the start frame. That is to say, choosing which view your viewer will see by default in the player — in video editing this is referred to as choosing a poster frame. To set the start frame (ie, poster frame), simply drag the preview image until you reach the desired view you wish the Spinnable player to start with. As you drag the preview you will see the grey dot above the range slider shift its position. STEP 21 Drag the preview until the desired start frame comes into view Render We now have the Range Sliders positioned to include every frame on both the horizontal and vertical axis — that's all 168 views to be rendered. We also have a start frame selected so we can be confident that when we load the spinnable player in our browser it will start from the desired frame. STEP 22 Click STEP 2 Rinse, Lather and Repeat The next few options in the panel after clicking STEP 2 will perfectly mirror STEP's 14 through STEP 18 above. If you need visuals to help walk you through the export process you can scroll up the tutorial and follow the instructions starting from STEP 14. Here are the settings we'll apply to the following modals which appear... Select matte style ... Choose Web Player ... Select 960x540 output resolution ... Click Launch player to view results in the browser Multiple Plane Spinnable 360° After clicking Launch player in the panel you will see the following appear in your browser... click anywhere on the following product image and drag left, right, up or down to spin and rotate the view. #fullspinAR {display:table;margin:0 auto;} Sharing Spinnable Players All AR Mockups can be exported as a Spinnable product to be embedded into your website. Whenever you choose to export a spinnable product the panel will automatically render all 168 views with your design applied. When rendering is completed you will be left with an html page and image assets which can be shared with others. You can simply zip the HTML player and send it to your client or edit the HTML and embed the contents on your own site. Users with even a basic understanding of HTML will be able to embed the player on their own website. For a downloadable sample of our Spinnable Player please refer to the Tutorial Assets portion of this tutorial. MP4 Video Export Similar to Spinnable mockups, users can export a 360° Video of their mockup being spun. Using the range slider on the PSDCovers panel the designer can set exactly which views will be exported as a video. Once all the views are rendered the user will be presented with Photoshop's video export modal. Designers can set their preferred frame rate and dimensions from the video modal. Create a 360° MP4 Video The process for exporting a 360° video is very similar to creating a Spinnable Player, the first step is unlocking the horizontal or vertical Range Slider. To enable exporting an MP4 video we must unlock only one of the Range Sliders. Do Not Unlock Both Range Sliders For Video Export If both the horizontal and vertical Range Slider are unlocked then the panel will default to exporting a Spinnable Player — the option to generate a video will not appear in the export modal. Unlock The Horizontal Range Sliders Let replicate a spinning mockup which rotates horizontally 360°, to do this we will need to unlock the horizontal Range Slider. STEP 23 Click the lock icon next to the horizontal Range Slider Define 360° Range (part 1) With the Horizontal Range slider unlock we can pull apart the 2 halves of the slider and relocate them to either end of the Range Slider. STEP 24 Drag the right half of the Range Slider to the right Dragging the Range Slider updates the preview image as well as the position indicator to the right of the product name. Define 360° Range (part 2) Now lets complete the selection by dragging the left half of the Range Slider all the way to the left. STEP 25 Drag slider's left half to left edge Begin Exporting 360° Video We're now ready to start exporting our 360° spinning video. STEP 26 To start the rendering process, click STEP 2 STEP 27 Similar to rendering a Spinnable Player we have to select the render style for our 360° video. Select matte style ... ... then click Render. STEP 28 In this next step we are presented with an option to export our mockup as a Sipnnable Player or a Video. Click Video STEP 29 In this next step we need to define a resolution at which to export the video. Smaller resolutions will render faster but larger resolutions are better if you plan to scale or crop the videos down to a different resolution later. Select 960x540 Click Render to complete the process STEP 30 The rendering process will now being and may require several minutes or more depending on the capabilities of your computer hardware. DO NOT INTERRUPT Photoshop will be making heavy use of your clipboard as it copies and pastes your design from your template. It is recommended that this process be allowed to complete, do not switch apps otherwise you risk corrupting the clipboard with content from another app. STEP 31 Once the rendering is complete the render video modal will appear. By default, any video which is exported will contain a black background — this is because all our mockups are exported with a transparent background. Since videos do not support transparency, and transparent regions in your exported video will appear black. To avoid exporting videos with black background you can close the render video modal and add a background with any image or colour of your choosing. Each frame for the video is exported as an individual layer into a new PSD file — adding a background layer to this new PSD is no different than adding a background layer to any PSD layout. Once the background is modified simply return to the render video modal by selecting it from the Photoshop > File > Export > Render Video menu. STEP 32 Below is the Render Video modal. Exporting video is fairly straightforward — simply enter a name for your video and select a destination, then press Render. Understanding video formats, which encoder to use, video formats, field orders etc are left as an exercise for the designer to complete. Helpful Errors From time-to-time you may see an ERROR! modal with a hyperlink (see image on right) Clicking the hyperlink will take you to our website where you can read about the error and how to avoid it in the future.
