Dynamically Rendered 3D UI

Tools & Techniques: Photoshop, Adobe Scene7/Content Management System, Image Authoring, Texture Mapping

Prudent Publishing's graphic design and web teams worked together to create an online 3D user interface for a new line of customizable device cases. The goal was to allow the customer to determine the placement and design of a case and provide an accurate visualization of the final printed product. My responsibilities included developing the 3D assets and texture mapping, as well as developing the first round of procedures instructing the team on use of the image authoring progam. Scroll down to see a demo of the UI in use.

 

© Prudent Publishing

Empty State

Empty State

A case ready to be personalized through the UI.

Image Editing

Image Editing

The user begins by uploading and editing images to add to their case design, placing, rotating and colorizing images to their taste. The thumbnails on the left automatically update to reflect changes.

Back View of the Case

Back View of the Case

The user clicks the preview button to see an enlarged view of what their case will look like.

Front View of the Case

Front View of the Case

All views are automatically updated with each edit to give the user an accurate representation of their final product.

Side Angle View of the Case

Side Angle View of the Case

Opposite Side Angle View of the Case

Opposite Side Angle View of the Case

Bottom Angle View of the Case

Bottom Angle View of the Case

Top Angle View of the Case

Top Angle View of the Case

You Might Also Like...

You Might Also Like...

3D UI Case Study

This is a demo showing how images can be switched out and edited to perfect the look of the final product. Precise measurements were used to assure consistent reuslts. The same texture mapping system was also used to create thousands of web images of predesigned case, which you can see at Cherishables.com.

 

© Prudent Publishing