



ALEJANDRA VÉLEZ 3D / Design / Animation
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 StateA case ready to be personalized through the UI. | ![]() Image EditingThe 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 CaseThe user clicks the preview button to see an enlarged view of what their case will look like. |
---|---|---|
![]() Front View of the CaseAll views are automatically updated with each edit to give the user an accurate representation of their final product. | ![]() Side Angle View of the Case | ![]() Opposite Side Angle View of the Case |
![]() Bottom Angle View of the Case | ![]() Top Angle View of the Case |
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