In this ctalyst tutorial, we are going to change the texture of the vending machine 3D Product Placement model. Advertisers can use this to put their brands on the vending machine product placements, and Developers can use this to change the default texture on the vending machines within their games.

You will need a basic understanding of Photoshop that includes placing images, scaling, layering, and cropping.

Log in to your ctalyst account and navigate to the product placement catalog.  We’ll search for the vending machine model, and we’ll download the texture file.  The texture files for all 3D Product Placement models are provided in layered Photoshop files to make it really easy for your artists to modify.

For this tutorial, we’ve created a made-up brand … Coffee Co and have provided the Mocha Can Texture PSD layered Photoshop file for you to download if you want to use it to follow the tutorial.

Open the vending machine texture file.

You’ll notice that the Photoshop texture files are all layered and built in a similar manner.  From top to bottom, the Editable Regions 1 layer folder contains each piece of the final default artwork.  In this example, the face of the vending machine, the buttons, and the various side panels.  The Editable Regions Masks contains the white masks for each piece of the artwork.  You can use these to shape and cutout your artwork.  And the bottom most layer is the default texture.

Drag guidelines out from the rulers to help define and identify the edges of the pieces of artwork.

Use these to help place and position your new artwork.

For the tutorial, open the Mocha Can Texture image and select the Mocha Latte folder.  While holding Shift, Control, Alt, drag and drop the folder onto the Vending Machine template.

Duplicate the new folder as a safety and turn the view off.

Next, scale the new texture to fit the height of the canvas.

Select the logo and mocha latte text layers, scale and position them to fit the front of the vending machine. Use the original default texture as a reference in addition to the guidelines.

You do not need the barcode and can delete the layer.

From the File menu, select Place embedded, navigate to the Mocha Can Texture and place it onto the the face of the vending machine.  The file is included in the tutorial zip file.  Position and scale it to fit.

Turn on the background layer in the Mocha Latte folder.

Select the Machine Front layer in the Editable Regions Masks folder and then from the Select Menu of Photoshop, select Load Selection, Machine Front Transparency and make sure Invert is selected.

Select the background layer again and press the delete button.

For the next step, replace the pink panel with the gradient background.  Duplicate the Mocha Latte background, position the duplicate over the pink panel, select the mask layer for the pink panel, from the Select Menu of Photoshop select Load Selection, select Machine Front Transparency, make sure Invert is selected, reselect the background and press delete.

Rename the new panel as button panel

Now let’s make the vending machine buttons.

Zoom into the buttons.

Select the rounded rectangle tool, and draw a rectangle over the top most Soda button.

You can change the roundness from the properties panel.  Change the color to yellow.

Duplicate the Mocha Latte Can layer and use it as a part of the button art.

Position, scale and rotate the can to fit over top of the button.

Rename the rounded rectangle 1 layer to button yellow, and the mocha latte copy 2 layer to mocha latte can button.

Double click the button yellow layer and add a center stroke to the button and color it brown to match the Coffee Co logo.

Select the Mocha Latte Can Button and the button yellow layers, and group them into a new layer called button 1

Duplicate the button 1 layer 4 more times, adjust and align them to match the default buttons.

Resize the canvas by double clicking the hand tool, and then combing all five of the buttons into one button group called buttons.

The next step is a bit of a short-cut cheat.

Select and turn on the Default Graphics layer and unlock it.

Apply a Hue/Saturation adjustment layer to the Default Graphics Layer, colorize to match the colors and tones of the mocha image.

For the tutorial, we’ve chosen a hue value of 27, a saturation value of 25, and have left the lightness alone at zero.

Duplicate the Coffee Co Logo layer and rename it to Coffee Co Logo side panel

Resize, rotate, and position the layer so that the logo fits at the bottom of the side panel.

Double click the Coffee Co Logo Side Panel layer and apply a gray color overlay to the layer.

Duplicate the Coffee Co Logo Side Panel Layer and move it over top of the second side panel.

Turn off the guides and make any final adjustments.

Save your file.

The final step is to export a JPEG file that is approximately 100kb in size.

That’s it.  You’re now ready to upload your Jpeg texture to either the ctalyst server as a part of your ad campaign, or you can use it as your default texture within your game development environment.

Download the Support Files for this tutorial here.

 

Be sure to share the love!