How to Create a Storefront Icon in Adobe Illustrator

Storefront Illustrator Tutorial - how to create a storefront icon

In this tutorial, we’ll go over how to create a storefront icon, simply by using rectangles, Illustrator Effects, and gradients. This icon is great for use in e-commerce sites, and the techniques in this tutorial can easily be applied to other icons, illustrations, and logos.

Final image: simple storefront icon

Ready to create a storefront icon for your own shop or design? Below is the final vector we will be illustrating.

create a storefront icon using adobe illustrator

Tutorial details: how to create a storefront icon

  • Program: Adobe Illustrator CS4 – CC
  • Difficulty: Beginner / Intermediate
  • Topics Covered: Rectangle Tool, Gradients, Bulge Warp
  • Estimated Completion Time: 30 min – 1 hour

Step 1

In order to create a storefront icon, first begin a new document and make a rectangle with the Rectangle tool (M). Keep this rectangle about half as long as it is tall. Within the rectangle, create two more rectangles. One will be the window and the second will be a door.

how to draw a store online

Step 2

Select all the rectangles and go Object > Path > Offset. In the Offset dialog, change the Offset to -5 px. This value might be different depending on the the original size of your rectangles.

design a store in adobe

Step 3

Select your main store shape and fill it with a gray color. Select the offset of the main store shape a fill it with a radial gradient from the Gradient panel. Change the first color stop in the radial gradient to a light gray and the second color stop to a gray slightly lighter than the main store shape color.

how to illustrate store awning

Step 4

Select both the main window and door shapes as you create your storefront icon, and go ahead and fill them with a dark gray.

Next, select the offset window and door shapes and fill them with a linear gradient. Change the first swatch in the linear gradient to a gray lighter then the original window and door shapes and the second swatch a darker gray then the original window and door shapes.

Change the angle to 90 from the Gradient panel.

shop illustration how-to

Step 5

Select both the window and door offsets and go Object > Path > Offset. In the Offset dialog, change the Offset to -5 px.

Change the fill of the new offset to a radial gradient with the first color stop a light cyan color and the second color stop to a darker cyan color.

shop icon tutorial

Step 6

Select both the new offsets and Copy (Command + C) and Paste in Front (F).

shop illustration tutorial

Step 7

With the Rectangle tool (M), create a rectangle about one half the width of the door. With the Selection tool (V), hold the Shift key and rotate the rectangle 45 degrees.

Place the rotated rectangle over the top right side of the door. Select the cyan door copy and the rectangle and press the Intersect button from the Pathfinder panel.

how to illustrate a little shop

Step 8

Fill the new intersected shape with a linear gradient and change both color stops to white.

Select the first white color stop and change the Opacity 45 and change the second white color stop’s opacity to 0 from the Gradient panel.

how to design my store as a vector

Step 9

Repeat steps 7 and 8 for the window.

create a storefront icon in adobe illustrator

Step 10

Create a thin rectangle slightly wider then the main store shape and place right below the main store shape. Fill the new rectangle with the same linear gradient as the first offset window and door shapes.

Adjust the gradient with the Gradient tool (G) from top to bottom so the lighter part of the gradient is at the top of the rectangle.

how to draw a storefront

Step 11

Create another rectangle about one fourth the height of the previous one you made, and place it inside the previous rectangle. Fill the new rectangle with a linear gradient.

For this gradient, we need to add another color stop. Simply click right below the center of the Gradient Slider in the Gradient panel.

Now that there are three color stops, fill the first with the same lighter gray as the previous rectangle, the second color stop white, and the third the same gray as the first color stop.

vector icon tutorial storefront facade

Step 12

When you create a storefront icon, the trick is to add small, realistic touches. In this step, we’ll add a subtle window apron to make your illustration pop.

To add the apron, create another thin rectangle, fill it will the same gradient as the sidewalk, and place below it the window.

how to design a storefront in adobe illustrator

Step 13

To add some life to our store vector, we can create a simple sign for the window. Start by typing out some text and change the font size to fit within the window.

Create a rectangle slightly bigger than your text and go Object > Arrange > Send Backward (Command + [ ). Fill the rectangle in with a linear gradient. Make the first color stop red and the second a dark red.

Adjust the gradient so the lighter part of it is at the top of the rectangle. Next, fill the text in with white.

To complete the sign, select the text and rectangle, slightly rotate it with the Selection tool (V), and place over the window.

how to design front of store in adobe illustrator

Step 14

To add just a little more panache, create a small rectangle and fill it with a dark grate color for the door handle.

how to illustrate a facade

Step 15

Now on to the store awning (since we can’t create a storefront without a colorful awning!)

Make a rectangle that is a little taller than the main door shape, half the width of the door, and fill it with red. With the new rectangle selected, go Effect > Stylize > Round Corners.

In the Round Corners dialog, change the Radius to 20 px. Like your offsets, this might be bigger or smaller depending on the size of your building. Next, go Object > Expand Appearance.

Create a rectangle to cutoff the top rounded corners of the rectangle, select both shapes, and press the Minus Front button from the Pathfinder panel.

storefront icon tutorial

Step 16

With the Selection tool (V) hold down the Shift key and the Alt / Option key (Shift constrains movements and Alt / Option copies) and drag a copy of the red shape to the right side of the original.

Change the fill of the the copy to a light gray. Select both shapes and drag out copies like you just did, making sure they line up with the right side of the gray shape.

Again, select all the shapes (you should have a total of four) and drag out a copy to the right of the last shapes. You should now have a total of eight shapes.

When dragging out the copies, I like to have Smart Guides enabled ( Command U). Having smart guide activated will snap objects together when editing the shapes, making it a lot easier. (For more info on Smart Guides, check my quick tip The Power of Smart Guides.)

Step 17

You’re over halfway to knowing how to create a storefront icon vector of your very own! Your next step is selecting all the awning shapes and group the objects (Object > Group).

Then go Effects > Warp > Bulge. In the Warp Options dialog, check Vertical, Change the bend to 40, Horizontal Distortion to 0, and the Vertical Distortion to 28. Next, go Object > Expand Appearance.

storefront vector tutorial

Step 18

Select the red shapes and fill them with a linear gradient. Add two color stops to the gradient so you have a total of four.

Change the first color stop to red, the second to lighter red, the third to red, and the last on to a dark red. With the Gradient tool (G) adjust the gradient from top to bottom.

In the gradient panel, change the Location of the third color swatch to 80 and the location of the second color stop to 55.

create a storefront vector

Step 19

Select the gray shapes in the awning and repeat the previous steps, but change the first color stop to a light gray, the second to white, third to light gray, and the fourth to gray. Place all the awning shapes over the top of the store.

create a storefront vector icon

Step 20

Select the main store body shape, Copy (Command C ), and Paste in Front (Command + F). Select all the awning shapes, Copy (Command C ), and Paste in Back (Command + B).

With the shapes still selected, move them down slightly and Group (Command G) them together.

Select the copied awning shapes and the copied building shape, hold down the Alt / Option key, press the Intersect button from the Pathfinder panel, and then press the Expand button from the Pathfinder panel.

Fill the new shape with a linear gradient, with the first color stop being a light gray color and the second a darker gray color. Adjust the gradient with the Gradient tool (G), so the light part of the gradient is at the bottom.

create a storefront vector illustration

Step 21

Select the bottom two long, thin rectangles, Copy (Command + C) and Paste (Command + V). Move the copies to the top of the awning and scale them horizontally, matching the top width of the awning shapes.

create a storefront illustration

Step 22

Create an ellipse a little wider than your main store shape with the Ellipse tool (L). Fill this with a radial gradient, change the first color stop to black, and then change the second to white.

Squish the ellipse with the Selection tool (V) to about an eighth of its original size, and place it behind and toward the bottom of the artwork. Set the Blending Mode of the ellipse to Multiply from the Transparency panel, and you are all done!

Take a deep breath, because you just learned to create a storefront icon.

create a storefront vector

Awesome job! You now know how to create a storefront icon.

Now that you’ve learned to create a storefront icon of your very own, you can use this vector illustration for banners, websites, and much more.

create a storefront icon

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Facebook
  • Mixx
  • TwitThis

98 thoughts on “How to Create a Storefront Icon in Adobe Illustrator

  1. I just want to mention I am beginner to blogs and absolutely loved this blog. Probably I’m going to bookmark your blog . You really have awesome articles. Thanks a bunch for revealing your web-site.

  2. I would like to thank you for the efforts you’ve put in writing this web site. I am hoping the same high-grade blog post from you in the upcoming as well. Actually your creative writing abilities has encouraged me to get my own web site now. Really the blogging is spreading its wings rapidly. Your write up is a great example of it.

  3. I’m impressed, I need to say. Actually not often do I encounter a weblog that’s each educative and entertaining, and let me inform you, you might have hit the nail on the head. Your thought is outstanding; the problem is one thing that not enough people are speaking intelligently about. I am very comfortable that I stumbled across this in my seek for something referring to this.

  4. Unless I am not getting it when i offset and try to fill the offset part it a. either doesn’t fill it or b. it fills the front layer. I’m doing exactly as you said on this tutorial did i miss a step between the offset and fill part?

  5. I had to do this in school. To warp the red and grey pieces all together, you have to group them to get it done right. If not, it just makes distorted bubbles next to each other. After warping, you can ungroup them with no problem, but group them first.

  6. Hi, great tutorial , but on step 17 please underline or write with capital letters that the the elements should be in a group. I was stuck on this step for an hour 😀 its good that I read the comments and found my mistake :)Thank you though

  7. I got stuck at the step 3 itself. I cannot fill separately after setting the offset. i.e, the fill occurs over all as a single object. pls help me no this. sorry if this is very basic concept. I am newbie for illustrator.
    thank you

    vino

  8. I believe this tutorial should be both mac and pc friendly. It is a good tutorial though. Really does need to be checked for correctness.

  9. Excellent tutorial, with a great monologue to make it easy to follow.

    Creative Critique though… 😉

    Might it not offer a bit more visual “balance” if there were an ODD number of roof elements? That last one the right being white makes ones eye feel that the roof is missing something.

    Aside from that, a “communal” thanks for your contribution!

  10. Having a problem in step 17 In Warp Bulge the awning shapes are overlapping each other looking like balloons, shouldn’t there be some kind of perspective?

  11. There’s a small error in step 20:

    “Select the main store body shape, Copy (Command C ), and Paste in Front (Command + F). Select all the awing shapes, , Copy (Command C ), and Paste in Back (Command + F).” <– should be Command + B

    Not a big deal, but just letting you know. Great tutorial! 🙂

  12. Great tut, as always. Thanks! At one point you have to group the shapes before you can warp them all together, I think. At least I had to do that…

  13. Nice! But I think it would look better without the shadow, don’t you? I don’t know, it looks a little unrealistic to me. Great otherwise though – simple and effective.

Leave a Reply

Your email address will not be published. Required fields are marked *