Mendix 7 is no longer supported unless you have Extended Support (for details, please contact Mendix Support). Mendix 7 documentation will remain available for customers with Extended Support until July, 2024.

Create Custom Preview Images for Building Blocks and Page Templates

Last modified: October 12, 2023

1 Introduction

To make your custom UI resources easy to browse, you can create custom preview images for your building blocks and page templates. We’ve provided downloadable templates in the .sketch and .psd formats, which are available on the Atlas UI site.

This how-to teaches you how to do the following:

  • Create building block preview images in various editors
  • Create page template preview images in various editors

2 Creating Building Block Preview Images

2.1 Creating a Building Block Preview Image in Sketch

To create a building block preview image in Sketch, follow these steps:

  1. Download the Atlas UI image templates resources pack.

  2. Open the Sketch file named BB_previewimage.sketch. This file contains two artboards. The first artboard shows an example of how custom preview images look in the Toolbox. The second artboard is where you place your image.

  3. Hide the layer called Template, then insert your preview image into the Building Block preview folder.

  4. When you are happy with your image, select your artboard.

  5. In the Export dialog box that appears in the lower-right side of your screen, make sure the preferences are set to the following:

    • Size: 1x
    • Format: PNG

  6. Export your image.

2.2 Creating a Building Block Preview Image in Photoshop

To create a building block preview image in Photoshop, follow these steps:

  1. Download the Atlas UI image templates resources pack.

  2. Open the Photoshop file named BB_previewimage.psd.

  3. Double-click the smart object in the Layers panel.

  4. Replace the contents of the folder with your building block preview image.

  5. Save your changes and navigate back to your template file.

  6. If you are happy with your image, export your file as a .png file.

2.3 Creating a Building Block Preview Image in Illustrator

To create a building block preview image in Illustrator, follow these steps:

  1. Download the Atlas UI image templates resources pack.

  2. Open the Illustrator file named BB_previewimage.ai. This file contains two artboards. The first artboard shows an example of how custom preview images look in the Toolbox. The second artboard is where you place your image.

  3. Hide the layer called Template, then insert your preview image into the Building Block preview folder.

  4. When you are happy with your image, select your artboard.

  5. Click File > Export for screens, then select the BB Image@2x artboard.

  6. Make sure the preferences are set to the following:

    • Scale: 1x
    • Format: PNG

  7. Export your image.

2.4 Creating a Building Block Preview Image in Another Image Editor

You can also create your building block preview image in a different image editor of your choice. Building block preview images should be 280px wide and 216px tall. Save the image as a .png file.

3 Creating Page Template Preview Images

3.1 Creating a Page Template Preview Image in Sketch

To create a page template preview image in Sketch, follow these steps:

  1. Download the Atlas UI image templates resources pack.

  2. Open the Sketch file named PT_previewimage.sketch. This file contains three artboards. The first two artboards show examples of how page template preview images look. The third artboard is where you place your image.

  3. Hide the layer called Template, then insert your preview image into the Building Block preview folder.

  4. When you are happy with your image, select your artboard

  5. In the Export dialog box that appears in the lower-right side of your screen, make sure the preferences are set to the following:

    • Size: 1x
    • Format: PNG

  6. Export your image.

3.2 Creating a Page Template Preview Image in Photoshop

To create a page template preview image in Photoshop, follow these steps:

  1. Download the Atlas UI image templates resources pack.

  2. Open the Photoshop file named PT_previewimage.psd.

  3. Double-click the smart object in the Layers panel.

  4. Replace the contents of the folder with your page template preview image.

  5. Save your changes and navigate back to your template file. If you are happy with your image, export your file as a .png file.

3.3 Creating a Page Template Preview Image in Illustrator

To create a page template preview image in Illustrator, follow these steps:

  1. Download the Atlas UI image templates resources pack.

  2. Open the Illustrator file named PT_previewimage.ai. This file contains three artboards. The first two artboards show examples of how page template preview images look. The third artboard is where you place your image.

  3. Hide the layer called Template, then insert your preview image into the Page template preview folder.

  4. When you are happy with your image, select your artboard

  5. Click File > Export for screens, then select the PT@2x artboard.

  6. Make sure the preferences are set to the following

    • Scale: 1x
    • Format: PNG

  7. Export your image.

3.4 Creating a Page Template Preview Image in Another Image Editor

You can also create your page template preview image in a different image editor of your choice. Page template preview images should be 255px wide and 255px tall. Save the image as a .png file.

4 Read More