How to create 3D isometric icons for apps (Part 1)
In a world full of 2d designs, 3D isometric icons are the new eye-catching trend in the user interface world, and it seems like 3D is here to stay! So the most logical thing is to adapt to this new movement, right? It will not only make your design standout but it will also give you a significant advantage in the market.
But what if you have no idea how to create a model in 3D?
Keep calm! because today Team Venturit is going to guide you through the process of creating your own 3D isometric icons for apps, or any mockups you might need.
We are going to use the program Blender. It is the best free 3D software at the moment. Blender is a very dynamic tool and at Venturit we use it a lot for 3D videos, icons for Apps, Producto Design, Mockups, Visualizations, and a lot more.
For this tutorial, we are going to create an icon that is actually being used right now in one of the Venturit’s subsidiary company’s:
Cool right?. Before we head to the fun stuff, we need to know how to navigate the 3D viewport. When you access Blender, you will see by default a cube in the middle of the workspace. For rotation, press the middle mouse button and move the mouse up, down, right, and left.
To zoom in or zoom out, use the mouse wheel.
For panning do the same steps as rotating but pressing SHIFT while you do it.
Now that you know how to move the camera through your workspace, let’s start the fun part:
Modeling:
The first step is to “build” or model the icon. We are going to work with a sketch and some references provided by our Director of Product Design. It is always a good idea to have these so we know the look and feel of what we want to create, this is also known by some as a mood board.
Create a sketch of the idea you want to convey
If you are new to blender delete the default camera and light, select the camera by clicking on it, press SHIFT and then click the light, press X, and then DELETE, with SHIFT you can select multiple objects.
Let’s create the basic structure of the house using the cube that is already in the scene. Select it and press TAB so we can edit it, and zoom a little with the mouse wheel, so we are a little closer to the cube.
Rotate the view a little. Press CTRL+R and select one of the top lines, then right-click anywhere so release the subdivision. These new lines are called “loops”.
Select the top 2 middle vertices, press G, then Z, and bring them up.
Here we have the basic shape of the house, easy right?. Let’s add some details.
We are going to add more divisions for the window and the door. Press A, to select all the vertices. Right-click on top of the model and click on SUBDIVIDE. This will give us some more vertices to work on.
Select the middle line pressing ALT and then clicking on the line.
Press S, then Z, and finally 0 so we straighten the line.
Press 2 (no Numpad), this activates the edge 2selection options. Right-click on the line, press bevel edge and move the mouse away from the model to separate the lines.
Repeat the last step with the center vertical line.
Press in your keyboard the number 3 (3no Numpad). This will activate the ‘face’ selection mode.
Select the faces that should be the widow and delete with X, and click on “faces”, remember that keeping SHIFT press you can select multiple faces.
Repeat the step with the door, roof, and floor. Don’t worry, you will understand later why we do this.
Now we need to add some volume to the walls. Go to the modifiers tab.
Select from the drop-down the Solidify Modifier. Change the mode property to complex, and thickness -0.2.
Add another modifier. Subdivision Surface. And set the properties to 3 and 3.
Press tab so we get out of edit mode. And right-click on top of the model, press shade smooth.
Now is just a matter of adding some definition, so it doesn’t look too curvy. We need to see what is happening to the model, so press the X-ray button.
Press tab again so we can edit the model again. Press CTRL+R and let’s add some new loops. Add two in every corner and try to keep the same distance in all the corners.
Now add one at the bottom and one at the top.
Let’s do the same for each side of the window and door. Don’t forget the inner part.
If you want to tweak some loops like the one on the top of the window, press G twice and then press E so it copies the shape of the other loops, and with the F key, you can tell blender which shape to take. In this case, it should be the bottom line.
Finally let's add two lines in the corner so top corners, like this:
Press Tab to exit edit mode and inactive x-ray mode. Rename the object by double-clicking in the object list.
We finished the walls! Let’s do the roof now.
This will be a good time to save the file! Remember to save as often as possible.
The roof:
We are doing it from a circle. Lets press SHIFT+A go to mesh and select circle. Then in the option set the number of vertices to 12.
Press G to move the object and the Z so it only can move in that direction. Let’s put it on the top of the walls
Press tab to edit the object. Press A to select all. Press F to fill the circle and then hit I to create a circle inside.
Lets erase half of the circle. You can select the vertices making a square from the outside if you miss some vertices remember, with SHIFT you can add more vertices to the selection. Press X and then vertices to delete.
Select these two vertices, agan with SHIFT for multiple selections, and press F to create a line.
Now press CTRL+R, put the mouse over the line we just create and move the mouse wheel up to add more vertices. We need 3.
Select 4 vertices and press F to create a face, and repeat 3 times. Like this.
Select the line of vertices, you can press ALT and then click on the line. Press E, it would create another line. Hit X (you may use Y if somehow you have the wrong axis),
Create another two extrudes using the steps before.
We have the basic roof tile shape… Now, as we do with the walls, we give it some volume.
So go to the modifier tab and add the solidify modifier, Use -0.1 in thickness
Now add the modifier Subdivision Surface and set the two values at 3
Press tab no exit edit mode, then right click on the model and hit smooth shade.
Now we need to position the tile in the correct way.
Press tab to enter edit mode. Press A to select all. Press the green button to go to the front view and position the tile easily. Using G to move the object R to rotate and S to scale, position the tile like this.
Use the blue button with Z to position from the top too.
Press tab to exit edit mode. Add the ARRAY modifier. change the relative value like shown. Set the count to 6. This may vary depending on the size of your tile.
Feel free to edit the position of the tile so it’s more center. Remember press to tab to enter edit mode and A to select all.
Press CTRL+A and select ‘all transforms’, then Add the mirror modifier
Go to the front view pressing the green button and the right top of the viewport. Duplicate the tile, Press SHIFT+D, right-click to release the duplication.
Press TAB to enter edit mode, now press A to select all. Move the new tiles to the position. Rotate pressing R and move pressing G to find the correct position
Repeat to add the third row.
Now, press SHIFT+A, go to mesh and select plane, move the plane pressing G, and then Z so it goes on top of the roof.
Press the blue button on the top right with the Z, so we go to the top view. Press tab to enter edit mode. And press S and then Y so the tile is more or less the size of the 2 tiles when you have the size left click to confirm the new size. Then press X so the tile is a little long
Add solidify modifier on the modifiers panel and set -0.1 in thickness
Add subsurface modifier and set the 2 inputs to 3
Press tab to exit edit mode. Right lick on top of the model and select smooth shade
Press tab to enter edit mode so we add some detail. Press CTRL R add a loop in the middle, press G and then Z so we put it a little up
Now let’s add some definition in the corners. Pressing CTRL R in the corners like this. Remember to left-click to confirm. And press Tab to exit edit mode.
Press the blue button on the top right with the Z, so we go to the top view. Move the tile to align it to the border. Pressing G and then Y.
Add the array modify and change the count to 3 and the relative offset value like shown.
If the tile doesn’t cover all the roof or is too large, press tab to enter edit mode. Scale and move the tile as needed. Remember Pressing G to move, S to scale, and Y to move it or scale it just in that direction.
Press tab to exit edit mode, press the green button to go to the front view and align the tiles on top using G and Z.
Finally rename the objects so it is easy for us to identify later in the process.
We finished the roof.
Window and Door frame:
For us to make this a little easy to see, hide the modifiers of the walls. Select the walls, go to the modifiers tab, and press the hide button for the two modifiers
Press tab to enter edit mode, press 3 in the keyboard to select faces, and select the faces that frame the window. Remember with SHIFT you can select multiple faces.
Press SHIFT+D to duplicate the frame and P then selection, to separate the frame.D
Repeat the process for the door frame
Press tab to exit edit mode. Select the window frame from the list and turn on the modifiers on the window
Move the window frame to separate it from the wall.
Press tab to enter edit mode. Select the vertex closer to the corner and press G twice to move the vertex along the edge. Move it on top of the corner. Repeat for the other 8 vertices.
Press A to select all. Press ALT + M and then select BY DISTANCE, this will merge the vertex that is really close together.
Press tab to exit edit mode. And go to the solidify modifier and change the thickness to -0.1
Do the same for the door
Select the wall and turn on the modifiers
You may have to move a little the window and the door for them to look better.
The chimney
Select the middle row of the tiles, and apply the mirror and array modifiers.
Press tab to edit the middle tiles, click on the empty space to deselect everything. Locate the mouse on the second tile and press L to select every part of that tile
Delete pressing X and then select vertices to delete the tiles and press tab to exit edit mode.
Press SHIFT + A got to mesh and then plane. Move the plane with G and then Z, on top of the house.
Press the blue button with the Z to go to the top view. Select the plane and press tab to enter edit mode. Move and scale so it is the same size as the hole in the roof. Remember to use G to move and S to scale.
Press E to extrude down the face and go pass the roof.
Select the face on the top. If you are not in face mode press 3. Then press I to insert the face. And Left click to confirm. And then extrude down again, pressing E.
Go to the modifiers tab and add subdivisions Surfaces and set the parameter to 3 both.
And now let’s add some loops so it doesn’t lose the shape. One down, one up. 2 for each corner. Remember with CTRL R.
Press tab to exit edit mode, right-click on top on the object and press shade smooth
The floor
Now press A to select all. Press the red button with X on the top right corner to go side view. And with G and Z move everything on top of the green line.
Press SHIFT A, mesh, and plane to add.
Press tab, to enter edit mode. And with S scale the plane a little so it goes out. Click to confirm
Go to modifiers tab and add solidifier with thickness 0.1 and subdivision surface and set 3 on the parameters
Let’s add some loops as we did before. With CTRL R in and 2 for each corner.
Select vertices on the corner. You can select multiple vertices with SHIFT and if you are not in vertex mode press 1 in the keyboard. Then right-click and select bevel vertices, move the mouse wheel up once so we have 3 vertices. Click to confirm
Press A to select everything and then I to inset the selection. click to confirm. Press tab to exit edit mode.
These last 2 steps we did it so the corner looked a little better. Than before.
Select the floor, press SHIFT+D to duplicate, then Z so we can move it at let it be just on top of the floor
Press tab to enter edit mode. Press A to select all. Press S to scale. And write .4s or so, press enter.
Press G to move, and then X so it set on the front of the house and the outer line of the floor.
Star selecting groups of vertices. And move it so it looks like a rug. We do it this way and not just scaling so we don’t lose the curves we have done before.
Press tab to exit edit mode and go to the solidify modifier and set the thickness to 0.05
Now just move the plane so it sits on top of the floor. With G and Z.
Now we just create two more planes to cap the holes on the window and the door. If you need to scale remember to enter edit mode.
I am going to tweak a little the general design. So I show here the changes I made. I am using all the same shortcuts and techniques so far. So if you want to tweak yours, feel free to do it. And if you forget something just go back up and take a look.
That it for this post, keep an eye out for Part II where we will continue with shading, light, and render. We hope you learned something new today please share your experience with us! Make sure to tag us when you upload your progress. Don’t forget to share and follow us for more content like this!
See you next time!
