Sunday, December 12, 2010

Family Tree Tutorial


This tutorial has taken waaaaay longer to create than I ever imagined!  Because I'm new to the blogging world I'm sort of ignorant to all the blogging laws and etiquette no-no's.  In my head I imagined I'd show you a couple of family trees I liked from Etsy and then give some suggestions on how you might make something similar.  Then I realized that would be quite rude.  So I had to make all these family trees myself before I could write the tutorial!  None of these trees are very difficult but all can be very time consuming.  So go check out Etsy for inspiration but don't be a copycat!  If you find something you can't live without... buy it and support handmade!

On With the Tutorial
If you do a quick search for "family tree"on Etsy, the giant handmade marketplace that makes me drool, squeal and run to my sewing room to grab my scissors, glue and fabric on a daily basis, you'll find 996 listings. 325 of those listings are considered art... to hang on your wall or place on your mantle.

These family tree's make great gifts for mom and dad or grandma and grandpa to show them the beautiful family they've created.

I make one of these tree's every year for my husbands large family that is constantly growing.  This year we've added 2 babies to the tree!

With a bit of Gimp know-how, creativity and a nice frame, you can create a great gift!

If you've checked out Etsy for these tree's than you know that just about every one of those 325 trees have differences but are basically the same set up.  A tree trunk to represent the head of the family, large branches and/or leaves to represent their children and smaller branches and/or leaves to represent their grandchildren.

On Etsy I've seen the tree made with photos of real trees, sketched trees, abstract trees, words and even real branches!

Tree #1

This is the easiest kind of tree to create.  

1.  Find a basic tree silhouette.  I found this one as well as some others for free at karens whimsy.  You can also try creating your own from scratch!

2.  Open your image up in Gimp.  I like to make sure my image is all one color with no lines traced around the edges so I use the posterize tool to reduce the image to only 2 colors.  You can find the posterize tool under the "Colors" menu, change it to "2" and click "ok".  Now you can change the color of your tree to any color you'd like.  I love this apple green color!

3.  Start adding your family's names!  Click the giant "A" in the toolbox to open a new next box.  Gimp will automatically open every text box as a new layer which is perfect for what you're doing.  I used a different font and size for the base of the tree, the children and the grandchildren.  Play with different fonts and sizes and the placement until you get something you're happy with.

TIP:  If you get one branch of the family just like you like it but maybe want to move the whole group up 2cm... don't despair!  You don't have to move every name individually!  See the empty box in between the eye and the thumbnail of the layer you want to move?  Click it.  A chainlink should appear telling you that layer is locked.  Click all the layers you want to move and then you can move them all together in one move!  Cool huh?

Tree #2

Okay I lied... this is way easier!

1.  Find your tree image.  You can use a photo or a sketch, an abstract tree or even a silhouette.  Either way you are just looking for something with no leaves.  Try searching "winter tree".  I found this one for free at all free vectors.

2.  Get some ink pads in coordinating colors and frame it up without the glass so your family can stamp their thumbprints and write their names at the family Christmas party!

TIP:  If you find a tree you love but it has leaves, try erasing the leaves and see if it'll work!  If the leaves are a different color from the rest of the tree use the "select by color" tool found in the toolbox  (it looks like a finger pointing at 3 colors).  click on a leaf and it will select everything in your image that is the same color!  Now you can erase the leaves without erasing the tree! 

Tree #3
This one is a bit more work but oh so pretty!

1. Find your tree.  I really like the way these look with an abstract tree but you can also try it with a silhouette or a sketch.  Again you want something like a "winter tree" with no leaves or you can try erasing them like suggested above in the tip.  I found this one for free on  all free vectors  but I had to erase the leaves.

2. Find an image of a leaf or create one yourself.  Play with the size and color of your leaf until you get it just right for your tree.  Now you should copy your leaf and paste it as a new layer.  You can do this buy clicking "edit", then "paste as", then "new layer.  You will want one leaf for every member in the family.  Place your leaves in family groups.  I used each big branch with a big leaf to represent the children and the smaller branches with smaller leaves to represent the grandchildren.

3.  After you're happy with the look of your tree it's time to start adding your names.  Just like step 3 of the first tree, open a text box and type each name in a new text box.  Move your names into place and play with sizing, color and font until you are happy with it!

TIP:  I didn't on my tree but should have included my mother and father in-law's names and the year of their marriage or something like that on the trunk or even under the tree.

TIP 2:  If you have a ton of scrapbook paper like me try using it for your leaves.  Cut a simple shape or you can find a leaf shaped hole punch at Hobby Lobby.  You can hand write each name on the leaves after they are cut or if your handwriting is as yucky as mine print them on your cardstock before you punch them out!

Tree #4
This tree is definitely the most complicated and tedious but oh so worth it when it's finished don't ya think?
1.  Find a basic tree image.  This isn't so important as it's not going to be seen but you'll need it as a guide for your trunk and branches. 

2.  Once you've opened your image in Gimp you need to add a transparent layer.  To do this, simply click the plain sheet of paper thumbnail in the "layers, channels, paths, undo" dock.  When the new screen pops up, make sure "transparency" is selected and click "ok".  You wont be able to see this new layer because it's transparent but you want to make sure it is on top of the other layers.  You can do this by dragging the new layer to the top of the list of layers.

3.   Next we are going to design our paths.  In the toolbox menu you can click on the "Paths Tool"  If you hover over each thumbnail it'll tell you the name but this is a very crummy picture of the paths tool thumbnail:  
4.  Lets start with the trunk.  Click at the bottom of the trunk and then towards the top of the trunk.  That will give you a straight line connecting the two points.  Now you can manipulate your line into the shape of your trunk by dragging the line up and down.  Once you are happy with the shape of your path you can click on any other tool in your toolbox and then back on the path tool again. ( I know this doesn't sound like it makes any sense but I haven't figured out another way to do this!  If you keep creating new paths without resetting the path tool then you'll end up with only one path with several components rather than one path for every branch... confusing I know!!) Do this until you have one path for your trunk and enough paths for every subfamily on your tree. 

TIP:  After you create your path it completely disappears unless you mark it visible.  To do this go to your "layers, channels, paths, undo" dock and click the "Paths" tab.  You'll see all of your paths.  To make them visible click the first empty box that appears to the right of each path when you hover over it.  An eye will appear and your path is now visible on your image!
Are you still with me?  Things are about to get confusing as we toggle back and forth between the "layers" tab and the "paths" tab!
5.  Okay...   Next we are going to make your text follow the shape of the paths.  (I would do this one at a time so you don't get completely lost!!)  In the path menu choose one of your paths and decide what text you'd like to appear in it's place.  Open a text box and type your name(s).  Edit the size and font.  You'll sort of have to eyeball this because you wont be able to go back and adjust this later without using "undo".  After you are happy with your font and size of your text click the "text along path" button found at the bottom of the text menu. Your text should appear along the path but don't get too excited... you're not done yet!  
6.  Back in the layers tab open a new transparent layer.  Jump back to the path tab and right click on your new path (Gimp named it for you!) and click "path to selection".  Grab your paintbrush tool and paint over the name.  You probably can't see it very well to know if you're happy with it or not.  So delete the path you just finished working with and then jump back to the layer tab and delete the text layer for the name you just finished.  Now "select none" by hitting "shift+ctrl+A" on your keyboard.

And now you can see your name in the shape of your tree trunk and in the right color and font... right?

Now work slowly but surely (using the undo button liberally!) until you've finished up all the names on your family tree!

TIP:  As you finish each name and path delete them.  It'll help keep your lists manageable so you don't get overwhelmed with layers and paths!

TIP:  If you keep forgetting a step (I always forgot to hit "path to selection" and would scribble all over the tree!)  write out a simple checklist and post-it to your monitor.


You're happy with your tree and it's time to print but first lets make sure the resolution is high enough or you'll end up with a pixelated tree that looks yucky.  Click "image" and then "image properties" at the bottom of the drop down menu.  Look for the resolution info.  You want it to be somewhere around "300 x 300 ppi" for good print quality.  

I've heard Walmart doesn't have the best quality for printing but I've never had a problem and the convenience factor is so much more important for me! I can send it to them and pick it up (don't forget the frame and mat) while I'm grocery shopping!!

And since you've already done all the hard work go ahead and make several gifts out of this!  I like to make one for myself, a large one for my mother-in-law and smaller ones for each of my husband's siblings.  I can get 6 gifts out of this project and spend well under $20!

I usually get my frames from the dollar tree but Ana-White has a tutorial on how to build your own barnwood picture frame that would look great housing your beautiful family tree!

Good luck and if you get lost just ask! 

I'm linking up here:


Show and Tell Green 

A Crafty Soiree

 The DIY Show Off


  1. Thanks for the ideas! I've been wanting a family tree, but these would also make great gifts!

  2. Love the instructions. Thank you so much for sharing. I think tree #1 is awesome. You are the best!

  3. What a lovely gift idea! I just got my Silhouette SD yesterday and I know this would be an awesome idea to break it in! Thanks!

  4. Thank you for showing us! These are all so pretty and I love the modern twist on a family tree!

  5. I love these but I don't know if I can do it.

  6. I'm sure you can pull it of Cindy! Anything I can help with?

  7. Great ideas! I love how yours turned out! I drool over Esty for ideas, too : )

  8. I really like the first tree. How did you change the color to the green apple color?

  9. Thanks for all the comments girls!

    Rachel- After you posterize the tree down to 2 colors in step #2 you can change the color by either using the "fuzzy select tool" or the "select by color tool". The fuzzy select tool looks just the fairy god mothers magic wand. The select by color tool looks like a finger pointing at a blue, red and green bar. Use either of those to select the black portion of the tree. Then click on the "bucket fill tool" (it looks like a paint bucket being poured out), choose a color by clicking on your foreground color square and paint your tree! Hope that helps!!

  10. Love the tutorial! Thanks for all the great family tree ideas. Thanks for linking up to Thrilling Thursday @ Paisley Passions. Hope you stop by again soon :)

  11. Thank you. That helped a ton. I can't wait to give it to my family.

  12. This is brilliant! I did not know what I was going to do for my inlaws for Christmas and now I do, thanks to you. Would you mind sharing the name of the fonts you used in the first tree? Thanks so much for sharing!!!

  13. So cute! I'd love to do Tree #4, I'm a Photoshop junkie, but I cannot for the LIFE of me find that tree you used in your tutorial. Can you help me with that or can you make it available on your blog? Thanks!!

  14. I am having trouble saving it so that I can upload it to Walmart's website for printing... any suggestions?

  15. Rikelle- I'm so sorry I forgot to come back and tell you those fonts... I hope it's not too late for you! The main font is "the king and queen font" The next is called "the quickest shift" and the smallest is called "rage italic" Hope that helps!

    Holly- are you saving it as a jpg? What problem are you running into when uploading?

  16. Hi, I saw you on Nap Time Crafters and started looking around. I did this exact same thing for Christmas! Found something I loved on Etsy, but thought I could do it myself. I did the bare branches and had everyone add their fingerprints at Christmas.

  17. Any help on how to become more proficient with the Gimp software?? I have a vision but can't get it to do ANYTHING I want! haha. I'm pulling my hair out over here. I want so badly to do one of these trees.


Related Posts Plugin for WordPress, Blogger...