1. Design & Illustration
  2. Graphic Design
  3. Icon Design

Illustrator in 60 Seconds: How to Create a Home Button

Scroll to top
Read Time: 2 min
This post is part of a series called 60 Second Video Tutorials.
Photoshop in 60 Seconds: How to Create Custom Brush Sets
How to Create a 3D Anaglyph Effect in Photoshop
Create a Home Button in Adobe IllustratorCreate a Home Button in Adobe IllustratorCreate a Home Button in Adobe Illustrator

Welcome to our Illustrator in 60 Seconds series, in which you can learn an Illustrator skill, feature, or technique in just a minute!

Illustrator in 60 Seconds: Create a Home Button

In today's tutorial, I'm going to show you how to create your very own Home Button using some of Illustrator's most basic tools such as the Shape Tool, Offset Path, and Pathfinder panel. So, if you want to learn something new quickly, this video was tailored specially for you.

How to Create a Home Button in Adobe Illustrator

Create a New Document, using the 64 by 64 pixels artboard reference. Switch over to the Pixel Preview Mode to have full control of your objects.

Create a New Document for the Home ButtonCreate a New Document for the Home ButtonCreate a New Document for the Home Button

Create the button's main shape by selecting the Rounded Rectangle Tool and using it to draw a 52 by 52 pixels object with an 8px Corner Radius. Color it green and then position it towards the center using the Align panel.

Create the Buttons Main Green ShapeCreate the Buttons Main Green ShapeCreate the Buttons Main Green Shape

Give the shape an outline by going over to Object Path off the Path sub menu, and entering 4 pixels into the opposite value field, making sure to change its color to a dark gray to make it stand out.

Give the Shape an OutlineGive the Shape an OutlineGive the Shape an Outline

Next, give the green shape a highlight by creating a Copy. Then using the Control-C, Control-F keyboard shortcuts, apply a -2 pixels Offset which we'll use to create a cutout from the larger shape with the help of Pathfinder's Minus Front Shape Mode. Adjust the shape by changing it to white and setting its Blend Mode to Overlay and its Opacity to 40%.

Create a Highlight Using a CopyCreate a Highlight Using a CopyCreate a Highlight Using a Copy

Create the lower section of the house using a 24 by 12 pixels gray rectangle. Add the door cutout by Subtracting a 6 x 10 pixels rectangle from its lower section. Create a roof by drawing it using the Pen Tool. Finish by adding a 4 by 12 pixels rectangle towards the upper right section of the house.

Create the House for the Home ButtonCreate the House for the Home ButtonCreate the House for the Home Button

Want to see this in action? Check out the video above to see this lesson at work!

A Bit More Detail

Want to learn more about Adobe Illustrator's vast tools and settings? Check out these tutorials below:

60 Seconds?!

This is part of a series of quick video tutorials on Envato Tuts+ in which we introduce a range of subjects, all in 60 seconds—just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you'd like to see explained in 60 seconds!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads