3D modeling for UI Designers

Part 1 — Creating 3D objects

Recently I've had the opportunity to work in an awesome project at HE:labs. It was an interactive isometric map where each building represented a project and on mouse over we displayed a short looping animation as a preview of what that project was about. I got some really good feedback for this app and the client was really happy with it, so I felt like it could be a good opportunity to explain a really simple approach for creating 3D images and animations for apps using Maya.

If you never ever opened Maya, the interface can be a bit scary. With so many little buttons and options, it’s quite easy to get lost.

This was me, opening Maya for the first time

But I'll try my best to make this tutorial simple, so let's focus on what's important for us. I'm going to split this tutorial into 3 parts. The first one for creating 3D models, the 2nd one for rendering out images and the third part for creating simple 3D animations.

I’m using Maya 2015. The interface tends to change a bit from one version to the other, so if you don’t have Maya installed on your computer, I suggest installing the same version to follow along :)

Understanding the interface

First of all, make sure that the dropdown menu on the top left corner is set to "polygons". Each option of this dropdown unlocks several other options on the top menu, so it's important that it's set to polygons while we're creating 3D objects.

When you change the option on the dropdown, you'll notice that the top menu also changes

On the top menu, if you select Create > Polygon primitives, you'll see a bunch of options for creating basic objects like cubes, spheres and cylinders. Every time that you create a primitive, you'll notice that inside the Channel box/Layer editor tab on the right side of your monitor, a new Input with the name of the primitive will be created ( something like polyCube1 ). Clicking on this name, you'll be able to modify some attributes of the primitive, like width, height and depth.

Now that we have created our first primitive, let's explore the main tools for modelling. On the left side of your monitor, you'll notice 3 buttons with primitives and red arrows. Those buttons allow you to Translate ( Move ), Rotate or Scale an object in a Maya scene.

Using the scale tool to change the size of a cube

These tools can also be used for vertices, edges and faces. If you right click on an object, you'll see some options that allow you to change the selection mode between them.

Scaling a face, rotating an edge and moving a vertice

By default, you should see a viewport with 4 different cameras. I like to work using a single panel with a perspective view. If you’d like the same, you can change it by selecting Panels > Layouts > Single Pane.

You should also try holding down alt and middle mouse dragging to move the camera around. If you hold down alt and left drag instead, you’ll rotate the camera. If you want to set the camera to an object, just select the object and press F :)

Modeling an old Factory

Now that we understand a bit better how things work, let's create this factory icon to explore modelling techniques.

The final result should look like this :)

We can start by creating a cube. Select an edge and hold down command ( or ctrl if you're using Windows ) and right click on the cube. You'll see another menu show up. While still holding down the right mouse button, move the mouse to Edge ring utilities and then to Edge ring and split. Inside INPUTS, you can change the split type from relative to multi and select how many divisions you want. We'll use these divisions to create the roof.

Hovering to select can be tricky at first but it makes the flow faster once you get it :)

Now you can select the faces on top of the cube, and extrude them ( edit mesh > face > extrude ) This will allow you to pull those faces out, creating the roof. You should also turn off the option "Keep Faces Together" on the side panel and increase the Offset on the black and yellow menu close to the control arrows. After that, if you delete one edge from each "roof" you'll get a triangle shape.

To create the door, for example, you can start with a cube, then extrude and offset the front face to create the door trim. You can detach the front face from the door trim by going to Mesh > Separate > Extract. Keeping it separated will allow you to model the door without affecting the trim. To create the metal bars of a rolling door, use the edge ring and split, and then extrude the faces. Once you have one door ready, you can duplicate it by pressing Ctrl + D.

Another really useful tool is the Insert Edge Loop Tool ( Mesh Tools > Insert Edge Loop Tool ). It allows you to split contiguous faces wherever you need. In the example bellow, I used the Insert Edge Loop Tool, to create the faces I extruded later to make the awnings of the building.

At this point, you have already learned all the basic tools you need to create things! There are, for sure, lots of different ways to make things faster and, eventually, you’ll master that — it’s a matter of time! But these techniques should give you a nice foundation to create virtually anything.

To model the chimneys, for example, you can start with a primitive pipe, then select the vertices at the bottom of the pipe, and scale them up. Afterwards, just insert an edge loop close to the top and extrude the top faces.

To create that round section of the building, you can also start with a primitive pipe, delete half of the faces and insert an edge loop to extrude the top faces, like we did with the chimney.

To create the windows, we can follow a procedure similar to the one used for the door. Start with a box, extrude a face to create a trim, and extract that face. Then split edge rings to create the amount of faces we want and extrude those faces making sure to turn off Keep Faces Together on the right side tab.

We've reached the end of the first part! In the next article, I'll write about how to create materials with ambient occlusion and transparency, set up lights and isometric cameras and render out images.

Download a sample file

Thanks for reading this far! You can download the factory created in this tutorial here krystalcampioni.com/example_factory.mb

Feel free to comment and let me know if you think I could improve this article somehow, or if you have any doubts.

Would you like to know a little more about how we create great digital products and change people’s lives? Visit our website!