The assignment of this week is to model (raster, vector, 2D, 3D, render, animate, simulate, …) a possible final project, and post it on my class page. My experience and skills needed for this weeks assignment is in the 2D modeling part. I know my way around in Illustrator and Photoshop. 3D modeling will be a bigger challenge for me because I never really grasped the concept of a 3D program. I did try to work with ThinkerCad and Sketch but I never managed to make something the way I wanted.

Files, planning and tools



  • learn how to work with a 3D program
  • try different programs than Adobe for 2D modeling
  • make sketches and drawing of my final project
  • digitalizes these drawings in vector and raster format
  • model my idea in 3D


  • Zotero for references
  • Sublime text
  • Gimp
  • Abobe Illustrator
  • Adobe Photoshop
  • Fushion 360

This week I will create sketches, 2D and 3D models of my final project. I will mainly experiment with possible shapes and forms it can have. My tree can be realistic or more an abstract form, during the following weeks I want to experiment with different forms and shapes. This makes me think of Piet Mondrian and his abstraction of a tree.

Mondriaan's trees Piet Mondriaan’s development towards abstraction based on trees

Research and inspiration

This weeks inspiration mainly came from Mondriaan and from the books Minibijbel Bomen: een rijkgeïllustreerde gids over bomen uit de hele wereld written by Tony Russel and Catherine Cutler (2014) and the book The Hidden Life of Trees: What They Fell, How They Communicate - Discoveries from a Secret World written by Peter Wohlleben (2016)

What I did – step-by-step

My starting point is always paper, I can better organize my thoughts on paper than on screen. So I started with sketches, followed by 2D cut outs and a 2D collage and I finished with my first 3D-model. I mentioned before I do have experience with 2D design but none with 3D. I wanted to incorporate the spiral project development within this development. For me this is from a leaf to a branch, to multiple leaves on multiple branches, toward a tree.

In the end I only used Fushion 360 as 3D program and I didn’t look into other 3D programs this week because I found using different 3D modeling modes within Fushion 360 already overwhelming. Time wise I therefore didn’t manage to try out other 3D-programs. My goal is to try out different programs later on in the Fab Academy. In week 6 I looked into Blender as extra 3D-program as Rutger mentioned that it’s more useful when designing organic forms. More information on this part can be found in my documentation of week 6.


As mentioned I like to start with sketch on paper. In the mindset of Fab Academy I tried a different, for me new technique, namely pastels. Normally I use pencils, oil wax or acrylic. I still find the coloring of the pastels a bit dull I added water to get a more intense effect, however I’m not really satisfied. It’s messy and I dull. But this is OK because I’m going to edit it digitally anyway. So I scanned them to be able to edit them.

Sketches of final project parts Sketches of my final project

Raster vs Vector

The difference between Raster and Vector 2D modeling is that vector uses paths and raster uses pixels. As mentioned on Wikipedia “Vector graphics are computer graphics images that are defined in terms of 2D points, which are connected by lines and curves to form polygons and other shapes. Each of these points has a definite position on the x- and y-axis of the work plane and determines the direction of the path; further, each path may have various properties including values for stroke color, shape, curve, thickness, and fill” (Vector graphics) and a “raster graphics or bitmap image is a dot matrix data structure that represents a generally rectangular grid of pixels (points of color), viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats. A bitmap is a rectangular grid of pixels, with each pixel’s color being specified by a number of bits” (Raster graphics).

Vector vs Raster Vector vs Raster

How to use Gimp to cut out images.

I have some experience with Adobe Photoshop. Therefore I tried Gimp to see how a different image editing program would work. I used Gimp for cutting out my sketches by hand. I exported it to ‘png-files’, with a transparent background. And I used Photoshop to create a collage from these images. And to adjust the colors.

I used Gimp for the first time. As I prefer to work with paths I used it to create a path and cut out each item and export it as png-file without a transparent background.

Step-by-step walk trough GIMP Sketches of my final project

  1. File > Open image
  2. Menu left: choose the Path Tool (B)
  3. Trace the shape with the path tool by clicking on the place
  4. If you don’t want a straight line hold the mouse after the click and move it for the right curve.
  5. Follow the whole object this way.
  6. When finished right click: select > from path (shift + V)
  7. Right click: select > invert (cmd + i )
  8. Right click: edit > clear
  9. Go to layer > right click: add alpha
  10. Go to path > unclick the eye
  11. Right click: edit > clear.
  12. Go to File > export as > nameFile.png
  13. Click export

Overview of all the parts Overview of Final Project elements with auto color Photoshop - GIMP + Photoshop edited files

How to use Photoshop to create a collage and use auto color

I used the images that I edited in GIMP for my collage. The first one provides an overview of all the possible elements of my final project. The second collage is a branch with leaves, which can be all possible shapes. But for now I created a basic tree like shape.

  1. Create new file: file > new > custom > 20 x 30 > create
  2. Go to folder on finder > select all images
  3. Drag the images from finder folder to your Photoshop canvas
  4. For each images you need to change sizes > dragging the corner + shift
  5. Press Enter: the image size is set and a layer is created
  6. Continue this for all images
  7. Right click on the layers > rasterize layer
  8. Move the images around the way you want by clicking on them and moving your mouse
  9. Select all layers except background
  10. Go to Image > auto color
  11. Want some more personal changes go to image > adjustments > Hue/Saturation and Brightness/Contrast

Collage of branch Collage of leaves on branch - Photoshop edited

How to use Illustrator to trace an image and make a vector model

I used Illustrator to trace the leaf I made and create a digital 2D vector model.

Vector leaf image trace Vector leaf made from image trace raster file

  1. Open image in Illustrator. Go to layers and lock this layer
  2. Add an extra layer, this is the layer where I will create my trace.
  3. Go to to line and fill selection on the menu on the right, make sure the fill is deselected and the line has a color that has a good contrast with the background image.
  4. Select the pen tool (hotkey: P), this is my favorite tool in illustrator.
  5. Trace the outlines of the image with the P tool by clicking on outside line. Make sure than whenever the line is not straight to move the move while pressing down. This creates a curve.
  6. Use Alt-click to make the line straight again.
  7. Follow outside of the image of image this way. After that do the same for the inside.
  8. Whenever I want to combine the paths from the inside line with the outside one, or the nerves with the backbone, I will use the Pathfinder. You can find this under: window - pathfinder. Use the pathfinder toolset to combine or subtract shapes.

Illustrator Trace Image trace of leaf on illustrator


The Waag FabLab organized a full day workshop for Fushion 360 taught by Mauro Jannone from the Rome FabLab. He is an amazing teacher and he learned us all the basics and a lot more all in one day. This workshop really helped me to get an understanding of how 3D drawing are build up, and what possibilities there are.

After Thursday I did my own attempt to create a representation of my final project. I’m not totally satisfied yet about the result but I’m very happy that I managed to create two version of tree with two different techniques. You can find the details about the ‘how to’ in the Fushion 360 lesson section. I will first describe a short explanation of my process to create each tree.

Tree 1

This first tree is created in the ‘model workspace’. The steps and parts I used to create this are:

  1. a sketch with the ground shape
  2. a sketch with the trunk spline
  3. an offset plane to create to top of the tree
  4. with an loft I create the trunk
  5. I used these steps over and over again to create each branch.

The more details of each step can be found in the Fushion 360 lesson tutorial.

tree 1 Tree 1 - made in the model workspace

Tree 2

The second tree is created in the ‘sculpt workspace’. So I started with create > form.

  1. create a box
  2. edit shape
  3. ctrl + 1 –> I started in the polygon view to edit by moving the paths around
  4. ctrl + 3 –> I moved around the object dot by dot, like clay, till I had something that sort of looked like a tree.

tree 2 Tree 2 - made in the sculpt workspace

Fushion 360 lesson

These are my notes from the lesson by Mauro Jannone on Thursday. It went really fast so some might be a bit basic.

Overall general notes about Mauro’s lesson to my self

  • Project –> defines the folder
  • Design –> is a single file
  • Put z-axis up in preferences (see in you account/profile)
  • Scroll = zoom in and zoom out
  • Pressing scroll = move around
  • Press scroll + shift = pan
  • esc = leave mode and/or tool you’re in.
  • Each menu item, uses it’s on sub menu on the left.
  • Never switch of the lamps of the folder. You can switch off the lamp of a single object.
  • Typical mistake in the beginning: each sketch is like a different type of paper. Creating a new sketch is taking a new paper. So it’s good to remember where the object are. And change the sketch, you don’t have to create a new one each time . you can use the time line to get back and forth in ‘time’ - its not about how, but WHEN did I it.
  • Make use of the time line with masters: you can edit this master late
  • You can change parameters back and forth – for example to change sizes afterwards.
  • you can invite my people with the people tab and their email address
  • You work with sketch, adding details later.


inerface fushion 360 Interface of Fushion 360

What’s on the menu?

  • Browser: the objects I created
  • Lower menu bar: the history of comments of what I did –> Fushion 360 works with a time line
  • In the middle lower part: view comments to modify and customize the view experience like the environment, wire frame mode
  • Right top navigation cube: always in perspective mode but you can change this and customize it. Put z-axis up.
  • Navigation tube settings: perspective with Ortho Faces –> This way you can understand the alignments of parts better. When it is in 3D its perspective, it can change by itself without perspective.
  • Home icon: set you back to home-view
  • set background - lower menu

How to save

  • With save it keeps track of changes and versions
  • Cmd + s: every new save prompts you to save new version. Just click enter. If I change name it creates other object
  • On left you see your version in the project
  • Click on version: you can go to your Webhub of Fushion 360
  • It automatically saves your design in the cloud
  • With share you can set the sharing settings like: allowed to download, allowed to share.

How to combine designs and project

  • Right click on the left menu for project
  • Insert into other design
  • If you work on both files (example with the glasses)
  • Linked object you need to update in the other file
  • You can work with different designs, add them together in het project
  • Right click on the object file: break link ==> unlinks the design

History – time line Comments

  • In the menu bellow you see the history of your steps.
  • You can go back in time to change you features e.g. the dimensions or the shape.
  • Try to optimize your time line.
  • Use this wise, you can design masters and
  • To select a history item –> right click edit

time line fushion Use the time line Fushion 360 to go back and forth

Different workspaces

There are different working spaces, which represent different ways to work with 3D. You know in which workspace you are by looking at the top left.

  • Model is the default –> work with sketches and build up
  • Patch
  • Sheet Metal
  • Render
  • Animation –> not cinema effect
  • Simulation –> testing and stressing your design, more engineering
  • manufacture workspace –> you can communicate directly with your CNC & laser
  • drawing

SKETCH: menu item

I didn’t know this but you can start you 3D design with a 2D sketch. I will first explain the steps how to use this sketch option in Fushion 360. Followed by the other menu items on the top bar.

how to create a sketch

  • gives you a cube with 3 sides and you can choose which one
  • we choose bottom one
  • new sketch palette –> menu on the right
  • new icon on top bar –> stop sketch
  • only need palette menu on the right this gives you all the tools

How to draw?

  • select line
  • simple left click with the mouse
  • move mouse
  • click sets point
  • continues in this mode
  • line-mode stays connected. If you want to leave the “line mode” click esc
  • continue but on different part, click on check mark
  • closed form get different color –> orange

How to use the line tool?

  • to set exact sizes for your lines type dimensions while setting line, don’t click.
  • use tab to go to the degrees of the line
  • enter sets the figures. don’t forget use TAB! and then press enter.
  • press x –> or sketch palette option: construction line: this makes it a dotted construction line
  • there are two types of lines the normal line and the functional construction line
  • you can use the construction lines for the alignment of objects

How to use items on the sketch palette

sketch palette Fushion Sketch palette of Fushion 360

  • this connects the lines. You can select the lines and give them a constrain.
  • The more constrains you manage the more parametric your design will be.
  • parallel: click lines you want to be parallel, they are always connected.
  • to remove right click delete.
  • rectangle: you can modify each line part add and subtract constrains.
  • horizontal/vertical added to palette
  • delete dimensions (click d + delete)
  • you can choose the objects or lines you want to be equal in size.

How to stop your sketch

  • when you’re finished with your sketch press on the menu top right: stop sketch
  • now you moves away from 2D and you are in different view
  • the sketch you created is added to the folder on the left.
  • to change something go to your time line and right click edit sketch.

How to work with projection

  • to to sketch > select project include > project
  • select object
  • click on circle
  • red dot/line
  • close the lamp of the sketch you projected
  • you still see projection, you see the silhouette of the sketch
  • useful if you want to combine sketches and to see where the other sketch is placed.

CREATE: menu item

The next step is to create a 3D body from the sketch you just made. There are different tools and techniques to create this. This are some of them, they can be found under the create menu item.

How to use extrude

  • go to create on menu bar
  • select add extrude
  • gives you a new menu on right
  • select plane - this changes in a different color
  • use the arrow to ‘get it up’ - extrude
  • every time you do an extrusion of the object hide the sketch, it doesn’t remove it you just don’t see it.

extrusion Fushion Extrusion in Fushion 360

How to use revolve

  • go to create on menu bar
  • select revolve
  • select profile –> select the circle
  • select axis –> select line
  • combine circle with line it creates a donut.
  • you can move around with the line in your sketch to change shapes and dimension of the donut.

How to use sweep

  • create sketch: draw one circle
  • this circle is the profile
  • patch: select spline line
  • perpendicular doesn’t work but parallel does work
  • You need a plane to let the spline “grow” to make it 3D.
  • the profile needs a line from where it builds, ‘grows’ to make it 3D
  • you build up an object with sweep so you first need a good foundation/basic shape.

MODIFY: menu item

How to use fillet

  • go to modify > fillet
  • arrow: to select manually the fillet
  • blue: to fill in the precise measurements

How to add parameters

  • go to modify > parameters
  • set parameters
  • you can use this in the sketch file (go to your history and click edit sketch)
  • you can use the parameters in the dimension part
  • you can use formula like “long / 2” (don’t forget the spaces otherwise it won’t work)
  • this way you always keep the same dimension. However if you want a bit of freedom you can delete the parameter go to offset
  • add offset you can select chain selection - selects all object // without chain selection only one part

parameters in fushion 360 Adding of parameters in Fushion 360

CONSTRUCT: menu item

How to use offset plane

  • create a circle in sketch
  • to to offset plane
  • lick circle
  • move with arrow or fill in the dimensions
  • enter
  • it goes up (like standing on a building looking down)
  • select new plane
  • create sketch
  • make square
  • go to create > loft
  • click the circle
  • click the square
  • It automatically creates shape

How to use tangent

  • select tangent icon
  • click first object
  • click second object


The process within this workspace is similar to the Model workspace however the extrude is not solid. Patches are surfaces, you can design more complex and smooth shapes.

How to use patches - practice assignment
  • create sketch
  • make square
  • go to extrude
  • go back to sketch
  • select move
  • pick a corner –> now your drawing in ‘space’
  • go to create - patch
  • patch creates a surface
  • go to to create –> thicken
  • now you can thicken the object (extrusion only goes up, thicken comments can extrude all the normals).
  • go back to the Model workspace
  • create new sketch
  • draw an circle
  • stop sketch
  • to to create > extrude
  • combine the patch of previous steps with the cylinder
  • click on intersect
  • now you have something that looks like a Pringles

Patch assignment fushion Patch assignment 1 - looks a bit like a Pringles


The previous steps are all very geometric or parametric shapes. But you can also work with NURBs - no uniform rational bodies This is more an organic way, it’s a bit clay like. To work with this in Fushion 360 you need to go to the Sculpt workspace. This is what I used to create my second tree.

  • Go to CREATE > FORM
  • you first get a warning message, press OK
  • now you enter the SCULPT environment
  • you can see the top menu changes in order in color
  • going from left to right you’ll find the most important parts needed in this workspace
  • on the right you see the menu item - ‘finish form’ (similar to finish sketch)
  • Use the different views from polygon to box to shape to see what you’re doing while you’re in edit shape.
  • ctrl +1 –> polygon
  • ctrl +2 –> box
  • ctrl +3 –> shape
  • like in the other workspaces on the left you get a menu for all the options

build a box Build a box - start in sculpt workspace

How draw from an image

You can also replicate an object you’ve seen, e.g. from an image. You can take measures and construct it or you can draw and sculpt it and use the image as a basis.

  • go to insert > attach canvas
  • select the image you want to attach
  • draw over it with create form
  • or use faces and draw the basic shape with squares
  • extrude your drawing to make in 3D
  • use edit form to change and mold the shape

Videos from Youtube and Vimeo in the right size with HTML.

This week I had to catch up with last weeks documentation and dive deep into the 3D-modeling. So I didn’t have that much time to explore the video editing part. However I did do something video-related I used HTML to get the video on my site (on the ‘about’ and ‘my final project’ page) in the right sizes, because they were really small when I use markdown.

tutorial I used:

I used the net-informations Youtube for the HTML-code.

  1. Copy the HTML
  2. Add it to your markdown
  3. change the ‘src= …’ part with your video link - you have to use the embed link
  4. that’s it.
<style type="text/css">
.responsiveRapper {
.responsiveRapper iframe,
.responsiveRapper object,
.responsiveRapper embed {
<div class="responsiveRapper">
	<iframe width="560" height="315"

What I did wrong – and how I solved it

Installing Mypaint and Inktscape

Because I’m quite used to Adobe Illustrator and Photoshop, I thought of trying out Gimp, Mypaint and Inktscape. I managed to install the first one but the second two gave me a headache to install. I had to install Macports and X11 and it still wouldn’t work for Mypaint and Inktscape. My solution: I gave up, because I didn’t have enough time.

What I learned

3D is really 3D

This sounds weird, but while I was working on my own 3D tree designs I realized I was still working 2D, creating a leilinde as we call it in Dutch (I couldn’t find an English word, the picture below shows you the idea). I suddenly realized that I could create something in 3D, so walk around it. Make branches all around the trunk. This really changed the basic idea of 3D in my head.

Leilinde - 2D trees Example of Leilindes, a real life 2D version of a tree

Fushion 360 works with time, not layers

This is still really difficult to live by. I understand the concept but I still find it really hard to use it. In Fushion 360, you move around the timeline to change sketches, bodies, actions etc. This is very different concept than I’m used to with other editing software. This really basic idea I learned that helps me to get a grip on 3D-modeling.

What made me proud!

The steps I made with understanding how a 3D-program works. Even though I still find it difficult to create what’s in my head using a 3D-program, I proud of the development I made this week. Especially the realization that I’m really working in 3D instead of creating a 3D effect in 2D.

Credits and references

The lesson by Mauro really helped me this week, in addition Rutger helped me and explained some tricks in Fushion 360.


  1. Tony Russel, & Catherine Cutler. (n.d.). Minibijbel Bomen. Retrieved February 5, 2019, from
  2. Wohlleben, P. (2016). The Hidden Life of Trees: What They Feel, How They Communicate—Discoveries from A Secret World. Greystone Books.

Image references

Image on the left: My own notes of lesson 02: Computer Aided Design (2019).

Images in the overview of painting by Piet Mondriaan

  1. Piet Mondriaan, ‘Bloeiende bomen’, 1902-05 or 1916-18. Gemeentemuseum, Den Haag
  2. Piet Mondriaan, ‘Polder Landscape with Silhouetted Young Tree’, 1900–01 (detail). Private collection, London
  3. Piet Mondriaan, ‘Willow grove: impression of light and shadow’, 1904-06. Dallas Museum of Art, Dallas (Texas)
  4. Piet Mondriaan, ‘Avond; De Rode Boom’, 1908-10. Gemeentemuseum, Den Haag
  5. Piet Mondriaan, ‘De grijze boom’, 1911. Gemeentemuseum, Den Haag
  6. Piet Mondriaan, ‘Flowering Apple Tree’, 1912. Gemeentemuseum, Den Haag
  7. Piet Mondriaan, ‘Compositie bomen 2’, 1912-13. Gemeentemuseum, Den Haag
  8. Piet Mondriaan, ‘Compositie 2’, 1913. Kröller-Müller Museum, Otterlo
⊲  Previous post 2. Project management Next post   ⊳ 4. Computer controlled cutting