How to Create Traditional Romanian Objects in Adobe Illustrator

Post pobrano z: How to Create Traditional Romanian Objects in Adobe Illustrator

Final product image
What You’ll Be Creating

In today’s
tutorial, we’re going to take a close look at the process of creating a particularly
interesting icon pack, since we’re going to illustrate some Romanian traditional
objects that are the living definition of what “home” was back before the
digital age. As always, we’re going to use and abuse Illustrator’s geometric
shapes, in combination with some basic tools such as the Align panel and
Pathfinder.

That being said, grab a fresh batch of coffee and let’s dive in!

Also, if you’re
looking to expand the project, you can do so by heading over to GraphicRiver
and checking out some of their home-themed icons.

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
setting up a new document

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.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust
the following settings:

  • Gridline
    every:
    1 px
  • Subdivisions: 1
setting up a custom grid

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
    : pan flute
  • layer 3: sewing frame
  • layer 4: wooden spoons
setting up the layers

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 on 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 grids” 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.

creating the main shape for the reference grid

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.

creating the main shape for the active drawing area

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.

creating and positioning the remaining reference grids

5. How to Create
the Pan Flute

The pan flute,
also known as panpipes, is a simple yet interesting musical instrument dating all
the way back to the ancient Greeks. It takes its name from Pan, the god of
nature and protector of shepherds. The name itself is a derivative of the word “paein”
which means “to pasture”, which is probably the reason why so many cultures,
including mine, have associated the instrument with the act of herding.

To me, this little
object has a special meaning, since it manages to take me back to a time and
place when life was simpler, and home wasn’t all about the place, but the
people that made it home.

Now, without wasting any more time, make sure you’re on the right layer
(that would be the second one) and let’s get kick off the project by recreating
it.

Step 1

Start working on the pan flute’s upper section, by creating an 8 x 6 px rectangle, which we will color
using #899E47 and then align to the top edge of the active drawing area,
positioning it at a distance of 4 px from
its top edge and 20 px from its left
one.

creating and positioning the main shape for the upper section of the pan flutes body

Step 2

Give the shape an outline using the Stroke method, by creating a copy of it
(Control-C) which we will paste in
front (Control-F) and then adjust by
changing its color to #2B3249 and then flipping its Fill with its Stroke (Shift-X). Set the Stroke’s Weight to 4 px, selecting and grouping both
shapes together afterwards using the Control-G
keyboard shortcut.

adding the outline to the main shape of the pan flutes upper body

Step 3

Create nine copies of the shape that we’ve just
grouped (Control-C > Control-F nine
times), and then horizontally distribute them onto the original’s right side,
using the Align panel so that their
outlines end up overlapping.

creating and positioning the remaining shapes for the pan flutes upper section

Step 4

Create the pipes using ten rectangles (#A8755A—see the dimensions
below) with a 4 px thick outline (#2B3249),
which we will horizontally stack next to one another, grouping (Control-G) and then positioning them
underneath the smaller rectangles.

  • first pipe: 8 x 110 px
  • second pipe: 8 x 102 px
  • third pipe: 8 x 94 px
  • fourth pipe: 8 x 82 px
  • fifth pipe: 8 x 74 px
  • sixth pipe: 8 x 66 px
  • seventh pipe: 8 x 54 px
  • eighth pipe: 8 x 46 px
  • ninth pipe: 8 x 38 px
  • tenth pipe: 8
    x 30 px
creating and positioning the main shapes for the pan flutes pipes

Step 5

Add an 8
px
wide 4 px thick Stroke line (#2B3249) to the first,
fourth and seventh pipe’s lower section, positioning it at a distance of 2 px from their outlines. Once you’re done, select and group all the shapes that we have so far using the Control-G keyboard shortcut.

adding the horizontal detail lines to the pan flutes pipes

Step 6

Create the horizontal section holding all the
pipes together using a 92 x 16 px rectangle
(#CE9D78) with a 4 px thick outline
(#2B3249), which we will group (Control-G)
and then center align to the pipes, positioning it at a distance of 12 px from the active drawing area’s
top edge.

creating and positioning the main shapes for the section holding the pan flutes pipes together

Step 7

Start adding details to the section from the
previous step, by creating the center flower using eight 2
x 2 px
circles (#2B3249), which we will position around another 2 x 2 px one (2B3249). Once you have
them in place, don’t forget to select and group (Control-G) them together so that they won’t get separated by
accident.

creating and positioning the main shapes for the pan flutes center flower

Quick tip: for the current and
following step I recommend you turn on Pixel
Preview
mode (Alt-Control-Y)
since it will give you the ability to carefully position each and every circle
as seen in the reference image. Once you’re
done, exit the mode by pressing Alt-Control-Y
again.

Step 8

Start working on the left decorative wave
pattern using a couple of 2 x 2 px circles
(#2B3249), which we will position as seen in the reference image. Once you’re
done, select and group (Control-G)
all the circles together before moving on to the next step.

creating and positioning the main shapes for the pan flutes left decorative pattern

Step 9

Finish off the current icon by adding the right
segment of the decorative pattern, using a copy of the one from the previous
step (Control-C > Control-F),
which we will position onto the opposite side of the flower, making sure to
vertically reflect it once we have it in place (right click > Transform > Reflect > Vertical). Once you’re
done, select and group (Control-G)
the decorative pattern to the underlying section, doing the same for all of the
icon’s composing shapes afterwards.

finishing off the pan flute icon

6. How to Create the Sewing Frame

Living in a digital age can really erase some of the older arts from one’s
mind, especially if that person never encountered them in real life. Sewing,
which is thought to have originated way back in the Stone Age, was and in some
places still is a powerful part of the Romanian culture and tradition, since it
has been used as a means of decoration of both the home and the clothes and
tools used back in the day.

To me personally, sewing brings back so many fond
memories from my childhood, when I used to sit next to my grandmother and watch
her spend hours creating beautiful art pieces to decorate her
home.

That being said, let’s get back to our own art, by first making sure we’re on
the right layer (that would be the third one) and then creating our
second icon.

Step 1

Start working on the frame’s main body by
creating a 106 x 106 px circle (#CE9D78)
with a 4 px thick outline (#2B3249),
which we will group (Control-G) and
then center align to the underlying active drawing area’s top edge.

creating and positioning the main shapes for the sewing frames larger body

Step 2

Create a smaller 90 x 90 px circle (#A8755A) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then center align to the
one from the previous step.

creating and positioning the main shapes for the sewing frames inner body

Step 3

Add the canvas using a 78 x 78 px circle (#EFD4C5) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then center align to the
previous section. Once you’re done, select and group (Control-G) all three sections together as well.

creating and positioning the main shapes for the sewing frames canvas

Step 4

Start working on the frame’s bottom section by
creating its outline using a 20 x 18 px rectangle
(#2B3249), which we will center align to the active drawing area’s bottom edge,
making sure to send it to the back of the larger circles (right click > Transform > Arrange > Send to Back).

creating and positioning the main shape for the outline of the sewing frames bottom section

Step 5

Add the fill section using a smaller 12 x 14 px rectangle (#CE9D78) which we
will center align to the top edge of the previously created shape.

adding the fill shape to the bottom section of the sewing frame

Step 6

Create an 18
px
tall 4 px thick Stroke line (#2B3249), which we will
center align to the shape from the previous step.

adding the vertical detail line to the sewing frames bottom section

Step 7

Start working on the little tightening screw, by creating its main body
using a 44 px wide 4 px thick Stroke line (#2B3249), which we will
position towards the bottom section of the frame, leaving a 2 px gap between it and the larger
outline.

creating and positioning the main shape for the body of the sewing frames tightening screw

Step 8

Add the screw’s cap using an 8 x
8 px
square (#2B3249), which we will center align to the
body’s right anchor point. Once you’re done, select and group (Control-G) the two shapes together,
sending them to the back of the bottom section afterwards (right click > Transform > Arrange > Send to Back).

adding the head to the sewing frames tightening screw

Step 9

Start working on the actual decorative flower by creating the center
section using four 2 x 2 px squares
(#2B3249) which we will position so that they end
up forming a plus sign. Group (Control-G)
the shapes and then center align them to the canvas.

creating and positioning the main shapes for the center section of the sewing frames decorative flower

Step 10

Turn on the Pixel
Preview
mode (Alt-Control-Y) and
create the upper section of the flower’s top-left petal,
using three sets of four 2 x 2 px squares
(#E56F5C) which we will position next to one another, pushing each set 2 px up so that they end up forming a
stair set. Group (Control-G) the
squares and then position them onto the left side of the plus sign, making sure
to leave a 2 px gap between them.

creating and positioning the main shapes for the upper section of the sewing frames top left petal

Step 11

Create a copy of the section from the previous step (Control-C > Control-F), which we
will rotate (right click > Transform
> Rotate > 90º
) and then horizontally reflect (right click > Transform > Reflect > Horizontal),
positioning the resulting shape underneath the original.

creating and positioning the main shapes for the bottom section of the sewing frames left petal

Step 12

Give the petal an outline, by adding a couple of 2 x 2 px squares (#2B3249) around its two composing sections,
making sure to select and group (Control-G)
all of them together once you’re done.

adding the outline to the sewing frames top left petal

Step 13

Create the other petals using three copies (Control-C > Control-F three times) of the one that we’ve just
finished working on, which we will position around the center plus sign,
reflecting them as needed.

adding the remaining petals to the sewing frames flower

Step 14

Continue adding details to the flower by creating four copies (Control-C > Control-F four times) of
its center plus sign, which we will position on the outer edge of space found
between each pair of petals.

adding the remaining plus signs to the sewing frames flower

Step 15

Finish off the flower, and with it the icon itself, by adding diagonal lines to each of its petals, using four sets of 2 x 2 px squares (#2B3249). Once you’re done, select and group (Control-G) all of the flower’s
composing shapes together, doing the same for the entire icon afterwards.

finishing off the sewing frame icon

7. How to Create
the Wooden Spoons

We are now down to
our third and last icon, which is composed of a set of traditional handmade
spoons, which are another powerful means of expression of Romanian people’s minds, used not only to decorate but also as a tool within their households.

I’m not even going
to talk all that much about this art form, since I’m really hoping that by
creating this little icon you’ll gain a powerful enough curiosity to search for more information on it.

That being said, make sure you’re on the right layer (that would be the
fourth one) and let’s finish this.

Step 1

Start working on the first spoon by creating an 8 x 8 px circle (#D3685E) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position at a
distance of 16 px from the active
drawing area’s left edge, making sure to align it to its top edge afterwards.

creating and positioning the upper circular section of the first wooden spoon

Step 2

Create a slightly larger 12
x 12 px
circle (#CE9D78) with a 4 px
thick outline (#2B3249) on top of which we will add another 4 x 4 px circle (#2B3249). Group (Control-G) all three shapes together,
and then position them below the previous section.

adding the second circular section to the first wooden spoons handle

Step 3

Create the spoon’s first set of petals using two 10 x 10 px rectangles (#CE9D78), which we will adjust by setting
the Radius of their lower outer
corners to 8 px and their upper
inner ones to 4 px from within the Transform panel’s Rectangle Properties. Give the resulting shapes a 4 px thick outline (#2B3249),
individually grouping (Control-G)
each petal, and then positioning them below the previous section.

adding the first set of petals to the first wooden spoons handle

Step 4

Create the remaining sets of petals using three
copies (Control-C > Control-F three times) of the ones that we already have, vertically
stacking them underneath one another.

adding the remaining sets of petals to the first wooden spoons handle

Step 5

Adjust the color of some of the petals by
carefully selecting them using the Direct
Selection Tool (A)
and then changing the color to #A8755A.

adjusting the color of some of the first wooden spoons petals

Step 6

Create a copy (Control-C > Control-F) of the spoon’s two circular sections, which we will position below its petals,
making sure to horizontally reflect them (right
click > Transform > Reflect > Horizontal
) and change the color of
the larger one’s fill shape to #A8755A.

adding the bottom circular sections to the first wooden spoons body

Step 7

Create the section connecting the small bowl to
the spoon’s handle using an 8 x 16 px rectangle (#A8755A) (1),
which we will adjust by adding a pair of side anchor points at a distance of 4 px from its top edge using the Add Anchor Point Tool (+) (2). 

Then,
individually select and push the shape’s top anchors to the inside by a
distance of 2 px (right click > Transform > Move >
Horizontal > + / – 4 px
depending on which side you start with) (3) giving
the resulting shape a 4 px thick
outline (#2B3249) (4).

creating the main shapes for the section connecting the first wooden spoons body to its bowl

Step 8

Add two 8
px
wide 2 px thick Stroke lines (#2B3249) vertically stacked 3
px
from one another, grouping (Control-G)
and then positioning the current section below the smaller circle.

positioning the connecting section onto the first wooden spoons body

Step 9

Finish off the spoon by creating its bowl using
a 16 x 16 px circle (#CE9D78), which we will
adjust by selecting and pushing its lower anchor point to the bottom by a
distance of 6 px (right click > Transform > Move > Vertical > 6 px). Give the resulting shape a 4
px
thick outline (#2B3249), grouping (Control-G)
and then positioning the two shapes onto the previous section. Once you’re
done, select and group (Control-G)
all of the spoon’s composing shapes together, before moving on to the next one.

finishing off the first wooden spoon

Step 10

Start working on the icon’s second spoon by
creating an 8 x 20 px rectangle (#A8755A)
which we will adjust by setting the Radius
of its top corners to 4 px from
within the Transform panel’s Rectangle Properties. Give the
resulting shape a 4 px thick outline
(#2B3249) followed by three 2 x 2 px circles (#2B3249) vertically stacked at 2 px from one another, grouping (Control-G) and then positioning the
shapes onto the right side of the first spoon, at a distance of 24 px.

creating and positioning the main shapes for the upper section of the second wooden spoons body

Step 11

Add the circular section using a 12 x 12 px circle (#A8755A) with a 4 px outline (#2B3249) on top of which we will add a smaller 4 x 4 px circle (#2B3249), grouping (Control-G) and then positioning the shapes below the previously
created section, so they end up slightly overlapping them.

adding the circular section to the upper section of the second wooden spoons body

Step 12

Create a 12 x 16 px rectangle
(#CE9D78) which we will turn into a diamond by adding a new anchor point to the
center of each of its edges using the Add
Anchor Point Tool (+)
, removing the corner ones afterwards using the Delete Anchor Point Tool (-). Give the
resulting shape a 4 px thick outline
(#2B3249), grouping (Control-G) and
then positioning them both at the back of the circular section (right click > Transform > Arrange
> Send to Back
).

adding the diamond section to the second wooden spoons body

Step 13

Create two 8 x 8 px circles
(#899E47) with a 4 px thick outline
(#2B3249), individually grouping (Control-G)
and then positioning them onto each side of the upper section of the diamond.

adding the two side circular sections to the upper section of the second wooden spoons body

Step 14

Start working on the spoon’s main body by creating an 8 x 10 px rectangle (#A8755A), followed
by a larger 12 x 34 px one (#A8755A),
which we will unite and then position below the previous sections.

creating and positioning the main shapes for the second wooden spoons main body

Step 15

Adjust the shape by setting the Radius
of its top corners to 4 px, adding a
pair of side anchor points at a distance of 14 px from its bottom edge. Then, individually select and push the
bottom anchor points to the inside by a distance of 4 px (right click >
Transform > Move > Horizontal > + / – 4 px
depending on which side
you start with).

adjusting the shape of the second wooden spoons main body

Step 16

Create the body’s lighter section using a 12 x 12 px square (#CE9D78) which we will center align to the
larger shape, positioning it at a distance of 15 px from its top edge.

adding the lighter section to the second wooden spoons body

Step 17

Give the larger body a 4 px thick
outline (#2B3249), followed by five 12
px
wide 2 px thick Stroke lines (#2B3249) vertically
stacked 3 px from one another,
which we will group (Control-G) and
then center align to the section’s lighter rectangle.

adding the outline and the horizontal detail lines to the second wooden spoons main body

Step 18

Add two pairs of two 2 x 2 px circles
(#2B3249) vertically stacked 2 px from
one another, positioning one on the upper section of the body and the other
one on the bottom. Once you’re done, select and group all of the current
section’s composing shapes together using the Control-G keyboard shortcut.

adding the little circles to the second wooden spoons main body

Step 19

Add an 8
x 8 px
circle (#899E47) with a 4 px thick
outline (#2B3249), which we will group (Control-G) and then position on top of
the previous section, at a distance of 22
px
from the active drawing area’s bottom edge.

adding the circular section to the bottom of the second wooden spoons body

Step 20

Finish off the spoon, by adding the bowl using a
16 x 22 px ellipse (#A8755A) with a 4 px thick outline (#2B3249), which we will group (Control-G)
and then position below the smaller circle. Once you’re done, select and group
(Control-G) all of its composing
sections together as well, before moving on to the third and last spoon.

finishing off the second wooden spoon

Step 21

Start working on the third spoon, by creating a 12 x 16 px ellipse (#CE9D78) with a 4 px thick outline (#2B3249) on top of which we will add a 4 x 4 px circle (#2B3249), grouping (Control-G) and then positioning all three shapes at a distance of 20 px from the second spoon’s right
edge.

creating and positioning the main shapes for the upper circular section of the third wooden spoons body

Step 22

Create an 8 x 8 px circle (#CE9D78)
with a 4 px thick outline (#2B3249)
which we will group (Control-G) and
then position below the previous section, at a distance of just 3 px.

adding the smaller circular section to the third wooden spoons body

Step 23

Create two more 8 x 8 px circles (#D3685E) with a 4 px thick outline (#2B3249), which we
will individually group (Control-G)
and then position onto the sides of the two sections that we have so far.

adding the side circular sections to the third wooden spoons body

Step 24

Create a slightly larger 12 x 12 px circle (#A8755A) with a 4 px thick outline (#2B3249) on top of
which we will add a 4 x 4 px circle
(#2B3249). Group (Control-G) all
three shapes together and then position them below the smaller circular
section.

adding the larger circular section to the third wooden spoons body

Step 25

Start working on the spoon’s flower by creating its petals using four 10 x 10 px squares (#CE9D78), which we will adjust by setting the Radius of two of its corners to 6 px from within the Transform panel’s Rectangle Properties. Give the resulting shapes a 4 px thick outline (#2B3249), and then
position them slightly over the previous section, selecting and grouping (Control-G) all four of them together.

creating and positioning the main shapes for the third wooden spoons flower petals

Step 26

Change the color of the bottom-left and
top-right petals to #A8755A, and then add an 8 x 8 px circle (#D3685E) with a 4 px thick outline (#2B3249) in their
center, grouping all of them together afterwards using the Control-G keyboard shortcut.

adding the circular section to the third wooden spoons flower

Step 27

Create a copy (Control-C >
Control-F
) of the circular section found above the spoon’s flower, and
position it below it, making sure to change the color of its fill shape to #CE9D78.

adding the bottom circular section to the third wooden spoons body

Step 28

Create the spoon’s lower body using a 20 x 32 px rectangle (#A8755A), from the bottom of which we will remove
two 14 x 24 px ellipses (highlighted
with red) using Pathfinder’s Minus Front Shape Mode. Once you’re
done, position the resulting shape below the previous section.

creating and positioning the lower section of the third wooden spoons body

Step 29

Set the Radius of the
resulting shape’s top corners to 10 px (2),
adding a lighter 20 x 12 px rectangle
(#CE9D78) which we will position at a distance of 6 px from its top edge (3). Then, add five 20 px wide 2 px thick Stroke lines (#2B3249) vertically
stacked 3 px from one another,
which we will group (Control-G) and
then center align to the smaller shape’s center (4). 

Add a 4 x 4 px circle (#2B3249) to the top of the larger shape (5),
followed by a 4 px thick outline (#2B3249)
(6), selecting and grouping (Control-G)
all the shapes together afterwards.

adding details to the lower section of the third wooden spoons body

Step 30

Finish off the spoon, and with it the icon itself, by adding its little
bowl using a 16 x 22 px rectangle (#CE9D78)
which we will adjust by setting the Radius
of its top corners to 8 px from
within the Transform panel’s Rectangle Properties. Give the resulting
shape a 4 px thick outline (#2B3249),
grouping (Control-G) and then
positioning the two below the previously created section. Once you’re done,
select and group (Control-G) all of
the icon’s composing sections as well.

finishing off the wooden spoons icon

It’s a Wrap!

Great work! I hope that you’ve managed to
follow and understand each and every step, and most importantly learned something
new and useful along the way.

finished project preview