Making Website Thumbnails (Pro/Studio)

Top  Previous  Next



This tutorial shows you how to use the batch processor to quickly turn a number of textures into thumbnails for display on your website.  The thumbnails sport a number of subtleties, such as colored borders, rounded corners, and drop shadows, that would otherwise take a long time to reproduce manually for each texture.


Please note that this tutorial makes use of features that are only available in the Pro and Studio editions of Genetica.



Step 1


In the Overview tab, select the "Legacy Presets/Miscellaneous" preset category, then click the "Gallery Thumbnail" texture preset.



Step 2


Switch to the Nodes tab and enter the group, as we did in previous tutorials.


Select the Solid Color node and edit it so that its color is identical to the background color of your website where the thumbnails will appear.  The quickest way to do this is to arrange Genetica's window so that it appears side-by-side with a web browser that contains your website, and then use the Color dialog's screen eyedropper tool to select the desired color from the browser.



Step 3


The texture will now look like a thumbnail of a marble texture over a background color that matches your website.  This is a good start, but instead of the marble texture, we want each of your own textures to appear in its place.


Right-click the Substance Lab node and then select "Batch Swap..." from the popup menu that appears.  The Batch Render dialog will now appear.



Step 4


The top left portion of the Batch Render dialog consists of a large section titled "Input List."  Towards the bottom of this section is an "Add" button. Click the Add button and use the Browse For Folder dialog that pops up to select a folder that contains textures that you would like to turn into gallery thumbnails.  If you have no such folder, you can select one of Genetica's preset texture folders, for example, C:\Program Files\Spiral Graphics\Genetica 4.0\Presets\Texture\Legacy Presets\Cloth & Upholstery\.



Step 5


A number of files should now be listed in the Input List section, with check marks next to them.  These check marks indicate which textures will be used by the batch processor to create thumbnails. Uncheck various boxes until only about five are checked.



Step 6


The bottom right portion of the Batch Render dialog consists of a section titled "Image Output." Click the "Select" button that appears within the Image Output section, and then use the window that pops up to specify the folder where you would like the resulting images to be stored.



Step 7


Around the middle portion of the Image Output section is a property labeled "Render Resolution." Set the Render Resolution value to 150, or any other size that would work well with your website.


The following image shows how the Batch Render dialog's settings should look at this point.



Batch Render Tutorial



Step 8


Once you are satisfied that all setting are as they should be, click the Begin button that appears at the bottom of the dialog.


Another window will now appear that will keep you updated on Genetica's progress while rendering the various textures.  Once rendering is complete the window will disappear.  At this point you may use your operating system's file explorer to navigate to where the files were saved and admire your handiwork!



Batch Render Output



If you would like to customize the appearance of the thumbnail effect to better match the overall look of your website, simply edit the Gallery Thumbnail preset before proceeding from Step 2.


Please refer to the Batch Processing section for further details regarding Genetica's batch processing capability.



Page URL: