In today’s tutorial, we’re going to pull out our architect hats and learn how to “build” our very own miniaturized set of New York’s most iconic buildings, using nothing more than the basic shapes and tools that we work with on a daily basis.
So, assuming you’ve
already refilled your coffee mug, let’s get to it!
And don’t forget, you can always expand your collection by going over to
GraphicRiver, where you’ll find tons of awesome vector buildings.
1. How to Set Up a New Document
Since I’m hoping that you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:
- Number of Artboards: 1
- Width:800 px
- Height:600 px
- Units:Pixels
And from the Advanced tab:
- Color Mode: RGB
- Raster Effects: Screen (72ppi)
- Preview Mode: Default
Quick tip: some of you might have noticed that the Align New Objects to Pixel Grid option is missing, which is because I’m running the new CC 2017 version of the software, where great changes have been made to the way Illustratorhandles the way shapes snap to the underlying Pixel Grid.
2. How to Set Up a Custom Grid
Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little grid so that we can have full control over our shapes, that is if we’re running the older version of the software.
Step 1
Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:
- Gridline every: 1 px
- Subdivisions: 1
Quick tip: you can learn more about grids by reading this in-depth piece on how Illustrator’s Grid System works.
Step 2
Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.
Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my how to create pixel-perfect artwork tutorial, which will help you widen your technical skills in no time.
3. How to Set Up the Layers
With the New Document created, it would be a good idea to structure our project using a couple of layers, since this way we can maintain a steady workflow by focusing on one icon at a time.
That being said, bring up the Layers panel, and create a total of four layers, which we will rename as follows:
- layer 1: reference grids
- layer 2: empire state building
- layer 3: chrysler building
- layer 4: world trade center building
4. How to Create the Reference Grids
The Reference Grids (or Base Grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.
Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make when you start a new project, since you’ll always want to start from the smallest possible size and build on that.
Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 128 x 128 px, which is a fairly large one.
Step 1
Start by locking all
but the reference grid layer, and then grab the Rectangle Tool (M) and create a 128 x 128 px orange (#F15A24) square, which will help define the
overall size of our icons.
Step 2
Add a smaller 120 x 120 px one (#FFFFFF) which will
act as our active drawing area, thus giving us an all-around 4 px padding.
Step 3
Group the two squares composing the reference grid using the Control-G keyboard shortcut, and then create three copies at a distance of 40 px from one another, making sure to align them to the center of the Artboard.
Once you’re done, lock the current layer and move on to the next one where we’ll start working on our first icon.
5. How to Create the Stamp Frame
Let’s kick off the project by creating the stamp-like frame which will be the repeating element for each of our icons. That being said, make sure you’re on the right layer (that would be the first one) and then zoom in on the first reference grid.
Step 1
Create the frame’s outer section using a 100 x 116 px rectangle, which we will
color using #45576B and then center align to the underlying active drawing
area.
Step 2
Adjust the shape that we’ve just created by positioning a couple of 8 x 8 px circles (highlighted with red) exactly 8 pxfrom one another both horizontally and vertically, which we will then cut out from the larger rectangle using Pathfinder’s Minus Front Shape Mode.
Step 3
Continue adjusting the resulting shape by flipping its Fill with its Stroke (Shift-X), and then setting its Weightto 4 px from within the Stroke panel.
Step 4
Create the frame’s colored fill section using a 76 x 92 px rectangle (#EFA28B), which
we will center align to the larger outline.
Step 5
Finish off the frame by adding an outline to
the colored fill section using the Strokemethod. Create a copy of it (Control-C)
which we will paste in front (Control-F)
and then adjust by changing its color to #45576B and then flipping its Fill with its Stroke (Shift-X). Set
the path’s Weight to 4 px, and then select and group all
three shapes together using the Control-Gkeyboard shortcut.
Step 6
Once we’ve finished working on the frame, we can
create two copies of it (Control-C >
Control-F) and position them onto the remaining reference grids, making
sure to paste each one of them onto their respective layer (that would be the
third and the fourth). Then before you lock the layers back, change the color
of the second frame’s fill section to #8CC1ED and the third one’s to #8CEAC8.
6. How to Create the Empire State Building
With the frames in place, we can now begin working on the actual buildings, so make sure you’re back on the right layer (that would be the second one) and zoom in on the first reference grid so that you can have a better view of the shapes.
Step 1
Start working on the Empire State Building’s
base by creating a 22 x 18 px rectangle
with a 4 px thick Stroke (#45576B) which we will bottom
align to the fill section’s outline, positioning it at a distance of 5 px from its left edge.
Step 2
Create another slightly taller 14
20 px rectangle with the same 4
px thick Stroke (#45576B), which
we will position on top of the one from the previous step.
Step 3
Create the right section of the building’s base by placing a copy (Control-C > Control-F) of the two shapes that we have onto the opposite side of the frame, keeping the same 5 px gap between them and the larger outline.
Step 4
Start working on the building’s center section,
by creating a 38 x 10 px rectangle
with a 4 px thick Stroke (#45576B) which we will center
align to the frame, positioning it on top of the base shapes.
Step 5
Adjust the shape that we’ve just created by opening up its path, by adding a new anchor point to the center of its bottom edge using the Add Anchor Point Tool (+)and then removing it by pressing Delete.
Step 6
Continue working your way up by creating a 30 x 12 px rectangle with a 4 px thick Stroke (#45576B), which we will center align to the previous shape,
positioning it on top.
Step 7
Start working on the building’s upper section by creating a 22 x 6 px rectangle
with a 4 px thick Stroke (#45576B), which, as you’ve
probably already guessed, we’ll position on top of the previous shape.
Step 8
Add another 6
x 12 px rectangle with a 4 px thickStroke (#45576B) on top of the shape
that we’ve just created, making sure to center align the two afterwards.
Step 9
Finish off the building’s structure, by adding
the antenna using a 14 px tall 4 px thick Stroke (#45576B), which we will of course position on top of all
the other shapes.
Step 10
Next, we’re going to take a
small detour and add in the little highlights before starting work on the
windows themselves. So, using the Rectangle
Tool (M), create a bunch of 2 px tall
white (#FFFFFF) rectangles, which will cover the upper visible section of most
of the building’s composing sections.
Step 11
Adjust the shapes that we’ve just created so that they turn up looking like actual highlights, by selecting them all and then lowering their Opacity to just 60%.
Step 12
With the highlights in place, it’s time to start working on the windows,
which we will create by drawing them using a couple of 2 px thick vertical Stroke
lines (#45576B) positioned 4 px from
one another (if you’re using the Align
panel’s Distribute options). Take
your time, and add the lines to each section of the building, selecting and
grouping (Control-G) both them and
the larger composing shapes together as you go along.
Step 13
Add the hard shadows by creating a couple of
rectangles (#45576B) which we will position so that they overlap the path of each building’s outline.
Step 14
Adjust the shadows (all except the top center one) by individually selecting their top inner anchor points and then pushing them to the bottom by a distance of 1 pxfor the top ones and 2 px for the rest. You can use the Move Tool (right click > Transform > Move > Vertical > + / -2 px depending on which side you start with).
Step 15
Finish off the icon by drawing in the sky using a couple of 2 px thick Stroke lines (#45576B). Take your time, and once you’re done, group
all the lines together using the Control-Gkeyboard shortcut, doing the same for all of the icon’s composing sections
afterwards.
7. How to Create the Chrysler Building
Assuming you’ve already finished working on the first icon, move on up to the next layer (that would be the third one), locking the previous one, and then zoom in on the second reference grid so that we can get started.
Step 1
Start working on the building’s bottom section by creating a 48 x 16 px rectangle with a 4 px thick Stroke (#45576B) which we will center align to the bottom of the
colored fill section’s outline.
Step 2
Create a smaller 32 x 10 pxrectangle with a 4 px thick Stroke (#45576B) which we will position
on top of the previous shape, making sure to center align the two.
Step 3
Finish off this section by adding a 16
x 20 px rectangle with a 4 px thickStroke (#45576B), which we will
adjust by setting the Radius of its
top corners to 8 px from within the Transform panel’s Rectangle Properties.
Step 4
Select all three shapes, and turn them into a single larger path by uniting them using Pathfinder’s Unite Shape Mode.
Step 5
Start working on the building’s left side section by creating a 6 x 18 px rectangle with a 4 px thick Stroke (#45576B), which we will position onto the first step of the
larger shape.
Step 6
Add a little ledge to the shape that we’ve
just created, using a 4 px wide 4 px thick Stroke line (#45576B) which we will position onto its top-left
corner. Once you’re done, select and group the two together using the Control-G keyboard shortcut.
Step 7
Create the building’s right-lower section using a copy (Control-C > Control-F) of the one that we’ve just finished working on, which we will vertically reflect (right click > Transform > Reflect> Vertical) and then position onto the opposite side of the building.
Step 8
Create the building’s center section using a 32 x 28
px rectangle with a 4 px thick Stroke (#45576B) which we will position
on top of its base.
Step 9
Adjust the shape that we’ve just created by setting the Radius of its top corners to 16 px from within the Transform panel’s Rectangle Properties.
Step 10
Continue adjusting the resulting shape by adding a new anchor point to the center of its bottom edge using the Add Anchor Point Tool (+), and then removing (Delete) in order to open up its path.
Step 11
Continue working your way up by creating a 24 x 14 px rectangle with a 4
px thick Stroke (#45576B) which
we will adjust by setting the Radius
of its top corners to 12 px and then
opening up its bottom path. Once you’re done, position the resulting shape on
top of the previously created one.
Step 12
Add another 16 x 12 px rectangle
with a 4 px thick Stroke (#45576B), which we will adjust
by setting the Radius of its top
corners to 8 px, opening up its
bottom path as we did with the previous shape. Then, once you’re done, position
the resulting shape on top of the building’s center section.
Step 13
Start working on the building’s upper section by creating a smaller 8 x 6 px rectangle with a 4 px thick Stroke (#45576B), which we will adjust by setting the Radius of its top corners to 4 px, positioning the resulting shape
on top of the previous shape, making sure to open up its bottom path.
Step 14
Create the final piece of the building’s upper section using a 6 x 16 px ellipse with a 4 px thick Stroke (#45576B) which we will adjust by cutting it in half by
selecting and then removing its bottom anchor point. Center align the resulting
shape at a distance of 4 px from the
active drawing area’s top edge, making sure to extend its bottom section onto
the previous shape, using the Pen Tool
(P).
Step 15
Add the antenna using an 8 px tall4 px thick Stroke line (#45576B), which we will center align to the previously
created shape.
Step 16
As we did with the previous building, start adding the little highlights
using white (#FFFFFF) as your main fill color, lowering their Opacity to 60% once you’re done. Create the straight highlights using regular
rectangles, while using cutouts for the arched ones, making sure to send them
to the back of the building afterwards (right
click > Arrange > Send Backward).
Step 17
Start adding details to the upper section of the building by creating a
2 x 2 px circle, which we will color
using #45576B and then position in the center of its second shape.
Step 18
Create three 2 x 4 px ellipses (#45576B) which we will position 1 px from
one another, moving the center one to the top by 1 px. Group (Control-G)
the shapes and then position them in the center of the top section’s third shape.
Step 19
Create a second set of 2 x 4 px ellipses
(#45576B), which we will distance at 2
px from one another, grouping (Control-G)
and then positioning them towards the center of the top section’s fourth shape.
Step 20
Using nine 2 x 2 px squares
(#45576B), add the little windows to the arched section of the building,
grouping them together afterwards using the Control-G keyboard shortcut.
Step 21
Create a 6 x 41 px rectangle
with a 2 px thick Stroke line (#45576B), which we will
adjust by setting the Radius of its
top corners to 3 px, center aligning
the resulting shape to the bottom of the colored fill section’s outline.
Step 22
As we did with the first building, take your time and draw in the
windows using a couple of 2 px thickStroke lines (#45576B) positioned 2 px from one another, selecting and
then grouping (Control-G) them
together once you’re done.
Step 23
Add the shadows using a couple of rectangles which we will position so that they follow the path of the building’s composing sections.
Step 24
Adjust the shadows, by individually selecting their top inner anchor points, and then pushing them to the bottom by a distance of 2 px using the Move Tool (right click > Transform > Move > Vertical > 2 px.
Step 25
Finish off the icon by drawing in the sky using a couple of 2 px thick Stroke lines (#45576B). Take your time, and once you’re done, group
all the lines together using the Control-Gkeyboard shortcut, doing the same for all of the icon’s composing sections
afterwards.
8. How to Create the World Trade Center Building
We are now down to our third and last icon, so assuming you’ve already moved on up to the next layer (that would be the fourth one), zoom in onto its reference grid, and let’s finish this.
Step 1
Create the building’s main shape using a 36 x 56 px rectangle with a 4 px thick Stroke (#45576B) which we will center align to the bottom edge of
the colored fill section’s outline.
Step 2
Start working on the building’s upper section by creating the antenna using a 36 px tall4 px thick Stroke (#45576B), which we will position on top of the larger shape.
Step 3
Create the bottom section of the roof platform
using a 28 px wide 4 px thick Stroke (#45576B), which we will center align to the building’s main
shape, positioning it at a distance of 6
px from it.
Step 4
Add the platform’s support legs using a 16 x 6 px rectangle with a 4 px thick Stroke (#45576B), which we will center align to the larger rectangle’s
top edge.
Step 5
Create the upper section of the platform using
another 28 px wide 4 px thick Stroke (#45576B), which we will center align to the bottom section,
positioning it at a distance of 6 px from
it.
Step 6
Connect the platform’s two sections using two
sets of 6 px tall 4 px thick Stroke lines (#45576B), which we will position 4 px from one another using the Align panel’s Distribute options, placing one on each side of the antenna.
Step 7
Quickly grab the Pen Tool (P), and then draw in the diagonal support rods using a 2 px thick Stroke line (#45576B), starting from the top section of the
platform and going up onto the center section of the antenna.
Step 8
Finish off the upper section of the building by
adding an 8 px wide 4 px thick Stroke line (#45576B) which we will center align to the antenna.
Then, once you’re done, select and group all of the current section’s shapes
together using the Control-G keyboard
shortcut.
Step 9
Add the main highlights using seven 32 x 2 px rectangles (color: white; Opacity: 60%) which we will vertically stack 6 px from one another, grouping (Control-G) and then center aligning them to the building’s main body.
Step 10
Start working on the front section of the
building by creating the windows using twelve 20 px wide 2 px thick Stroke lines (#45576B) vertically
stacked 4 px from one another.
Once you have the lines, group (Control-G)
and then center align them to the tower’s main body, at a distance of 4 px from its top edge.
Step 11
Add the front section highlights using six 20 x 2 px rectangles (color: white; Opacity: 60%) vertically stacked 6 px from one another, which we will group (Control-G) and then center align to the windows, positioning them underneath the first Stroke line. Then, once you’re done, select and group both the windows and highlights together using the Control-G keyboard shortcut.
Step 12
Create the front section’s main outline using a 20 x 56 px rectangle with a 4 px thick Stroke (#45576B), which we will center align to the building’s main
body.
Step 13
Adjust the rectangle by individually selecting its top anchor points and pushing them to the inside by a distance of 8 px using the Move tool (right click > Transform > Move > Horizontal > + / - 8 px depending on which side you start with).
Step 14
Create a copy (Control-C > Control-F) of the resulting shape, and then use it to mask the front section’s windows and highlights (right click > Make Clipping Mask), making sure to send them to the back afterwards (right click > Arrange > Send Backward).
Step 15
Add the background windows using a couple of 2 px thick Stroke lines (#45576B), vertically stacked 4 px from one another. Start from the outer edge of the larger
outline and go all the way to the front section’s one. Then, once you’re done, select and group all of the building’s shapes together using the Control-G keyboard shortcut.
Step 16
Finish off the icon by drawing in the sky using
a couple of 2 px thick Stroke lines (#45576B). Once you’re
done, group (Control-G) all the lines
together, doing the same for all of the icon’s composing sections.
Hats Down!
Great work! Our little icon pack is completely finished!
I hope you’ve managed to follow each and every step, and as always learned something new and useful during the process.
