Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Illustrator in 60 Seconds: How to Create a Home Button

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called 60 Second Video Tutorials.
Photoshop in 60 Seconds: How to Create Custom Brush Sets
Photoshop in 60 Seconds: How to Apply a 3D Anaglyph Effect
Create 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 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 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 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 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 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
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.