How to Create a Basic House Icon in Photoshop
Download Source Files
In this tutorial, you’ll go through easy steps and techniques to design a simple yet attractive house icon. It’s easy to follow and to play with. There are no intricate curves or complex brush work. Just simple shapes along with layer styles will do the complete job. The aim of the tutorial is to get familiar with the correct use of colors and efficient use of layer styles. I am sure you’ll enjoy following it. Let’s jump in!
Final Image Preview
Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. You can view the final image preview below.
Tutorial Details
- Program: Photoshop CS and newer
- Difficulty: Beginner
- Estimated Completion Time: 30-45 mins
Step 1
First of all, create a new 500px by 500px document with white background. Drag out some guides at the center of the document for convenience. Select the Pen Tool (P) and make a shape like the one shown below.
Step 2
You need to add some colors and a thin-white strip to the shape. To do so, double-click on the layer and apply the following Layer Styles.
Step 3
Duplicate the shape (Command + J) and go to Edit > Transform > Flip Horizontal, move the duplicate shape rightward so that the sides join each other as shown.
Step 4
Due to similar colors, the two shapes give a flat look to the roof. There’s a need to fix that. Open the Layer Styles of the duplicate layer, and apply the following changes.
Step 5
Set foreground color to “830F00.” Draw a shape like that shown below with Pen Tool (P). Name the resulting shape “roof left”.
Step 6
Duplicate the shape and name it “roof-right”. Go to Edit > Transform > Flip Horizontal and move the duplicate shape rightward so that you get something like this.
Step 7
With Pen Tool (P), draw another shape like the one shown below, name it “body.”
Step 8
Double-click on the layer and give it these Layer Styles.
Step 9
You need to put the roof’s shadow on the body of the house. To do so, Command-click on the “roof left” layer, then Command + Shift-click on the “roof right” layer to sum up the selections of the two layers. Move the selection down and on a new layer fill the selection with the color “5F5343.”
Step 10
Go to Filter > Blur > Gaussian Blur, enter 10px and click OK.
Step 11
You might notice that after the filter has been applied, the shadow is flowing outside the house’s body, which doesn’t look right. To fix it, Ctrl-click on the “body” layer, and press Command + Shift + I to invert the selection. With the “shadow” layer selected, press Delete.
Step 12
You now need to add a prominent part of the house – that is the door. Select the Rectangular Marquee Tool (M), and on a new layer fill a selection with black.
Step 13
Give the door the following Layer Styles.
Step 14
Now we need to add some details to the door. Select the Rounded Rectangle Tool (Shift + U) and draw a black rectangle with a 3px radius.
Step 15
Go to its Blending Options and apply these settings.
Step 16
Duplicate the shape and move it down so that you have something like this.
Step 17
A handle can now be added to the door. Use the Ellipse Tool (U) to make a small circle on the door.
Step 18
Give the circle a Drop Shadow and a Radial Gradient.
Step 19
You can add a slab above the door. Use the Pen Tool (P) to make a shape like the one shown below.
Step 20
Go to its Blending Options and give it a Gradient Overlay of a similar tone as that of the roof.
Step 21
With the Pen Tool (P), make another shape like the one below.
Step 22
Give the shape the following Layer Styles.
Step 23
Create a new layer and fill a selection with black on it. Make sure that this layer is placed below the “door” layer in the Layers Palette.
Step 24
Give the black strip a Gradient Overlay of the following colors.
Step 25
As a further detail, you can add a door-step to the house. Make a shape like the one below with Pen Tool (P).
Step 26
Give the door-step a Gradient Overlay.
Step 27
To give the door-step a 3D look, add some thickness to it. Set the foreground color to “A26431″ and draw a shape like the one shown below.
Step 28
It’s time to add windows to the house. Start doing so by filling a selection with black on a new layer.
Step 29
Using the Rectangular Marquee Tool (M), fill a selection with white on a new layer as shown.
Step 30
Go to the Blending Options of the windows cross section, and give it these styles.
Step 31
Now, you need to make shutters. Just like you made the door, make a shutter and put it on one side of the window. Make a copy of it and move it to the other side, give a Drop Shadow to the shutters if you want.
Step 32
Just for increasing details, add a slab to the window like you did for the door. The only difference is that you need to apply the Layer Styles of the door-step to the slab you are making for the window.
Step 33
Create a layer set and put in it all layers that constitute the window. Duplicate the layer set twice and transform it to 60% of its original size. Put the smaller windows on the right side of the door.
Step 34
You can now add a chimney to the house. Create a new layer and on it, fill a selection with black.
Step 35
Give it a Gradient Overlay with these colors.
Step 36
Make a shape like the one below to give the chimney a 3D look.
Step 37
Make another shape of any color for the chimney.
Step 38
Give the shape a Gradient Overlay with these colors.
Step 39
Set the foreground color to “D6C08D” and make a shape like this.
Step 40
It’s time to give shadows to the base of the house icon. Create a new layer, then use the Rectangular Marquee Tool (M) to fill a selection with black.
Step 41
Apply Filter > Blur > Gaussian Blur and then Filter > Blur > Motion Blur with these settings.
Step 42
Make a similar shadow for the door-step. You can set the Opacity of the shadows from 80-90% or from 20-30%. I added some grass and ended up with this.
Conclusion
The final image is shown below! I hope you enjoyed creating this icon design!
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Asher Abbasi
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice! :D
cool
It’s great, but why not create something like this in Illustrator, so that it is easily scalable… assuming that you would want to scale an icon.
I’m also a little confused about that little box floating on the chimney, but everything still looks nice.
Providing you don’t rasterize any of the layers, then it’s fully scalable just like a vector, because well, it’s using photoshops vector tools.
Watch this
http://lucky13.deviantart.com/art/Vector-Art-The-Myth-Revealed-8818843
Woah! That just blew my mind! Haha… that’s cool
I like the color palette. Aevion is right, though, the box on the chimney is off perspective-wise.
Anyway the reason this was done in Photoshop is because this is a Photoshop website, easy enough. Also glows and shadows are kind of clunky in Illustrator, so the workflow would be different.
Nice work.
I tried my best to make the icon free of perspective errors but I still missed somethings, I’ll try to eliminate those errors next time.
Thanks for explaining though :)
great jobs !!!
Looks great! Only issue is that we can see a little too much of the roof. That seems to be what’s throwing off the perspective compared to the windows and doors. Thank you though!
I like it overall, but there are quite a few perspective issues.
I dunno how I skipped them, may be my eyes can’t detect them at all.
The real aim of the tutorial is to get you familiar with the creative use of Layer Styles and other techniques as explained.Once you get a good grip on them, you’ll be able to create your own unique and flawless icon :)
Because of the perspective issue I see them now if I would go inside naked everybody would see my wiener when I stand in front of the Window ;)
Nice tut and I understand the tought behind it to get familiar with the techniques… thanks!
This tutorial created such a cute house. I was able to preform it in Paint Shop Pro 9 and come up with a similar, yet personalized, version. fabulous! :D
I gotta say, for all the detail put into the lower part of the house, the lack of detail around the roof/chimney area is surprising. Not that it looks bad, it’s just inconsistent. Going in either direction (less detail in lower part or more detail in top part) would’ve been fine. Still, good job!
Actually, the icon was intended to be designed in smaller sizes like 128×128 and 64×64.I chose bigger size for the tutorial so that I could make everything clear.You will get pretty detailed outcome if you go for smaller sizes.
http://img4.imageshack.us/img4/6847/homevt.png
I enjoyed trying to follow your tut but was lost on several commands especially at step 9, 10 and 11. I could not get the same results. Directions were not clear and when I did exactly what was written I got other reactions in photoshop cs4 I had to convert to smart object to apply blur. maybe you can tell me where I sent askew?
In Step 9, you have to load the selection of roof’s upper face.To do so, first Ctrl-Click any of two layers constituting the roof then Ctrl+Shift-Click on the other layer.After you have successfully loaded the selection, fill it with “5F5343″ on a new layer.After that, I hope you’ll face no problem on step 10 and step 11.
I follow those steps because those are the steps in the tut but for some reason It fails to load properly secondly I cannot hide the shadow on the following steps. oh well since you just wrote the exact same thing as in the original steps it must only be my technique. thanks .
i really like the colors :D
My only comment would be to use shape layers + smart objects instead of standard layers when you need filter effects. For example, when you generated the shadow for the roof (step 9), you filled a selection on a new layer. Would be better to:
1. Create the shape layer with your intended shape.
2. Convert it to a smart object (right click the shape layer for the option).
3. Apply the blur to that smart object.
This way you get the blur, but if you double click the layer icon you can manipulate the shape layer in a separate window. Also, the blur itself is now treated as a filter so you can adjust it/disable it, etc.
Sounds like a good technique but the only problem is I that I am using Photoshop CS and I think it does not have any such option as “smart objects”.
excellent tutorial i will create a similar yet unique icon for myself. Amazing inspiration thank you!
looks very simple :)
Thank you!
nice tutorial
but it is handy if you add a vanishing point… makes perspective easier, and more acurate.
nice result btw :)
Lovely icon, easy to follow, well structured. Well done!
thanks for this great tutorials.
This is really useful article as one can learn lots of things from this single tutorial. I’ll also be launching my icon set soon….
cool!
i like
Great!!
Really good, but windows aren’t black and have gloss…
awesome and really useful!
thank you very much :)
Cool Design…
I like it…
I think I have learned more from this site..
thank 4 all…
well. useful one….. cool….
I like it but i think the perspective is a little wrong!
keep up the good work…
Really like the colors, but I hate the grass. It’s the same shaped bushes and it looks really cheap, but overall a great final result (ignoring the perspective issues).
Besides a few things on the perspective, I love the style, very useful techniques
You have made a rather large problem with this. If you have noticed, using blending options in photoshop for such a large icon, when you re-size it (down size), the blending options values, stay the same. Meaning that it will not look that great – at all.
Really? http://img4.imageshack.us/img4/6847/homevt.png
I thought this was a great tutorial. I love your design and don’t think the perspective issues cause any distress. It’s an icon, not an architectural drawing. Very cute little house! Thanks.
Great Job but you can make this was faster in Illustrator.
Although I think what you are saying is somewhat true. Some of the effects (ie Inner Shadow) the author has applied are not as easily applied in Illustrator. But in the context of the graphic I think that some of the effects may go unnoticed anyway making Illustrator a more viable option.
I like the window effect. Nice.
Thank you
i like the orthographic perspective
clean stuff – i like ;D
nice tutorial but i think as its only icon…. u have done very detail work..
i love your design.
Great effort
i Most Like in This
Very Good
Great tut. Finished it, only had problem with creating the grass. I’m okay with the pen tool, but always have trouble drawing.
The only criticism would be step 29 , when adding the cross to the window. You don’t really explain it, yet the level of the tutorial is beginner. If I was a true beginner, I might have some trouble with it.
Otherwise great job!
A simple cross made from selection tools appeared to me too simple to mention, that’s why I skipped it :)
Yes, but the way you worded it, threw me for a second. And a true newbie I think needs each step explained. Not a biggie, maybe a video tutorial would help :P
l like it well done, l will try this in the morning.
Great work…..
i like the house icon, from my perspective ,it’s good .
nice tuto, thanks
very nice….
simply wonderful
Nice Tut! You can also import a 3D model in CS3 or CS4 extended, to get a similar look: http://3dvia.tv/three-great-uses-for-3dvia-for-photoshop/
vercy good tut. my house looks not that cool as yours, but im satisfied :)
i think you are all deusche bags. get a life
not nice !! hmm no no no !
hello nerds !
go away RIP>> no lifer
Wooh, how did I miss this?
I enjoyed trying to follow your tut but was lost on several commands especially at step 9, 10 and 11. I could not get the same results.
Those steps direct you to add roof’s shadow on the body of hut.If you are familiar with basic selection techniques then it won’t create much trouble.
You can also add the shadow in your own way if you find it difficult to follow those steps :)