By Diana Toma

Final product image

What You’ll Be Creating

Follow
this tutorial and learn how to create a bagel sandwich icon in Adobe
Illustrator. At the beginning you will create the two bagel pieces, and then you will draw all the ingredients for the sandwich: pieces
of lettuce, a slice of cheese and a slice of ham.

The most fun part
is to compose the bagel sandwich, because you can get creative here.
The final thing is to sprinkle some sesame seeds on top with the help
of a scatter brush. If you love food-related tutorials as much as I
do, let’s
start the fun!

1.
Start a New Project

Launch
Illustrator and then go to File > New in order to open a blank
document. Type a name for your file and set up the dimensions, selecting Pixels as Units and RGB as Color Mode.

Next, go to Edit >
Preferences > General
and set the Keyboard Increment to 1 px and
while there, also go to Units to make sure they are set as in the
following image. I usually work with these settings, and they will
help you throughout the drawing process.

start new document

2.
Create the Bagel

Step
1

Grab
the Ellipse Tool(L) and draw two circles with the dimensions
indicated. While having them selected, press Horizontal Align Center
and Vertical Align Center in the Align panel.

create bagel 1

Step
2

With
the circles still selected, go to Object > Compound Path > Make
(Control-8)
and then fill the resulting shape with light brown. I
will name it “bagel-top”, and you will need extra copies of this
shape throughout the tutorial.

create bagel 2

Step
3

With
bagel-top” still selected, add a New Fill in the Appearance
panel above the first. Use the radial gradient shown, and then go to
Effect > Sketch > Bas Relief and apply the settings from the
next image. Set the Blending Mode to Soft Light.

apply bas relief effect to bagel

Step
4

Add
a New Fill in the Appearance panel and use the color brown; then set
the Blending Mode to Soft Light.

create bagel 3

Step
5

Add
a New Fill again and use the color indicated, and then go to Effect >
Sketch > Note Paper
and apply the settings from the next image.
Set this Fill attribute to Blending Mode Overlay and 15% Opacity.

apply note paper effect to bagel

Step
6

To
get rid of the pixelated edge that is generated
by the Note Paper effect, we will create a mask. Select “bagel-top”,
Copy and Paste in Front (Control-F) to make a copy, and then remove
all existing appearances. Now, select both shapes and go to Object >
Clipping Mask > Make (Control-7)
. Name the resulting group “Bagel
Top
”.

create mask for bagel

Step
7

Let’s
create the bottom piece of the bagel. Make another copy of
bagel-top” on your Artboard and use the radial gradient shown to
fill it. We don’t need to add more details because most of it will be
covered by the ingredients in the sandwich.

create bagel bottom

3.
Create a Piece of Lettuce

Step
1

Grab
the Pencil Tool (N) and draw a similar shape, filling it with the
radial gradient shown. Use the Gradient Tool (G) to adjust the
direction if necessary.

create piece of lettuce 1

Step
2

With
the lettuce-shape still selected, go to Object > Path > Offset
Path
and apply a 1.2 px Offset in order to get a slightly bigger
shape. Fill this new shape with the linear gradient shown and make
sure it’s behind the first one.

create piece of lettuce 2

Step
3

Now,
grab the Pen Tool (P) and draw some shapes like below on the lettuce.
Fill them with different shades of green (1). To add some dimension,
draw a few small shapes between the “waves” of the lettuce, but
make sure you send them in back. Use a darker shade of green as the
fill color (2).

create piece of lettuce 3

4.
Create a Slice of Cheese

Step
1

Use
the Rectangle Tool (M) to draw a 73 x 150 px rectangle, and use yellow
as the fill color. Next, draw some circles with the Ellipse Tool (L)
and Group (Control-G) them.

Before you continue, make a copy of this
group, because you will need it in the next step. Now, select the
rectangle along with the group of circles, and press Minus Front in
the Pathfinder panel to obtain the holes in the cheese.

create slice of cheese 1

Step
2

Now,
you will need the copy of the group of circles from the previous step
(1). Select it and Copy and Paste in Front (Control-F) to get
another group of circles (the green ones). Move them a little
down and to the right (2).

Next, select both groups and press Exclude
in the Pathfinder panel, and then Ungroup (Shift-Control-G) from the
Object menu (3). Delete all the resulting shapes from the
bottom-right side of the holes because we don’t need them. If some of
the shapes go over the edge, just take the Delete Anchor Point Tool
(-)
and delete the anchor points at the end that are unnecessary, and
make
small adjustments if needed (4). Fill these shapes with the color
indicated (5).

create slice of cheese 2

5.
Create a Slice of Ham

Step
1

Use
the Pencil Tool (N) to draw a shape like the one in the following image, and
use the linear gradient shown to fill it. Move some of the anchor
points towards the inside with the Direct Selection Tool (A) to
create a more realistic look.

create slice of ham 1

Step
2

Use
the Pencil Tool (N) again to draw a shape at the bottom. Next, select
the ham shape and Copy and Paste in Front (Control-F); then select
this copy along with the black shape and press Intersect in the
Pathfinder
panel. Fill the resulting shape with the linear gradient
shown.

create slice of ham 2

Step
3

As
explained in the previous step, create two new shapes and fill them
with the linear gradient shown in the next image.

create slice of ham 3

Step
4

Grab
the Pen Tool (P) or the Pencil Tool (N) and draw a few random shapes
on the ham in
order to add more details. Fill them with the linear gradient shown
below.

create slice of ham 4

6.
Compose the Bagel Sandwich

Step
1

At
this point all the elements are ready. Before you continue, Group
(Control-G)
all the shapes that compose the lettuce and name the
group “Lettuce”; Group (Control-G) all the shapes that compose
the slice of cheese and name the group “Cheese”, and you guessed it… do the same for the “Ham”. Since they are in vector form, you can also scale them if you want.

compose bagel sandwich 1

Step
2

On
top of the “bagel-bottom”, start to arrange the pieces of lettuce.
Multiply the “Lettuce” group as many times as you want, and
arrange them as you desire. You can be creative here. Also add the
first slice of cheese.

compose bagel sandwich 2

Step
3

Let’s
add some shadows as we go, because it will be more difficult to add
all the shadows at the end. It’s better to work in layers.

Use
the Pen Tool (P) or the Pencil Tool (N) to draw two paths along the
outer edge of the cheese, but don’t go over the edge of the
bagel-bottom”. Give them a 2 pt Stroke using the color
indicated, and then go to Effect > Blur > Gaussian Blur and apply a
Radius of 2 px. Send these two paths behind the “Cheese” group.

While
the paths are still selected, press New Graphic Style at the bottom
of the Graphic Styles panel in order to save it for later use. Name
it Brown Shadow Graphic Style.

compose bagel sandwich 3

Step
4

Now,
make a copy of the “Ham” group and arrange it over the bagel.
With the Pen Tool (P) or the Pencil Tool (N), draw a path in the top
corner and then simply select the Brown Shadow Graphic Style from the
Graphic Styles panel
to add the shadow. Move this path behind the “Ham” group but in
front of the “Cheese” group.

compose bagel sandwich 4

Step
5

Draw
another path in the bottom corner, give it a 2 pt black Stroke, and
then apply a 2 px Gaussian Blur. Move this path behind the “Ham
but in front of the “Lettuce”.

Save
this style in the Graphic Styles panel and name it Black Shadow
Graphic Style
.

compose bagel sandwich 5

Step
6

Arrange
a second slice of ham over the bagel, draw two paths as in the
following image, and select the Black Shadow Graphic Style from the
Graphic Styles panel to add the shadows. Move these two paths behind “Ham”.

compose bagel sandwich 6

Step
7

Arrange
the third slice of ham and draw the two paths like below. For the
black path, select the Brown Shadow Graphic Style, and for the blue
path select the Black Shadow Graphic Style. Don’t forget to send them
behind “Ham” but in front of the first slice (1).

Add
another slice of cheese, draw the green path and select the Brown
Shadow Graphic Style
for it. Send this path behind “Cheese” (2).

compose bagel sandwich 7

Step
8

Now,
grab the “Bagel Top” group and arrange it over the ingredients.
Do not place it directly over “bagel-bottom” but a little
down and to the right.

compose bagel sandwich 8

7.
Add Shadow Under the Bagel Top

Step
1

Select
bagel-top” and Copy and Paste in place (Shift-Control-V).
Remove all existing appearances and just give it a white fill; then
go to Effect > Stylize > Drop Shadow and apply the settings
shown below. Move this copy behind the “Bagel Top” group.

As
indicated by the arrows, there are areas where we don’t have any
lettuce, ham or cheese
sticking out from the bagel, so there is no need for shadow there. To make the shadow not visible
in those specific areas, we will create a mask in the next step.

add shadow under bagel top 1

Step
2

First
lock the “Bagel Top” group in the Layers panel, or hide it for the
moment. Now, select all the ingredients in your bagel (in my case: 3
x “Lettuce”, 3 x “Ham” and 2 x “Cheese”) but without the
shadow-paths and then press Unite in the Pathfinder panel (1). As a
result you will get a compound path (2).

Next, select the white shape
from the previous step along with this compound path (which must be
in front) and go to Object > Clipping Mask > Make (Control-7)
(3). You can see the end result in the following image (4).

mask the shadow

Step
3

Use
the Ellipse Tool (L) to draw a 57 x 57 px circle and then place it in
the center of the bagel. Select white as the fill color; then go to
Effect > Stylize > Inner Glow and apply the settings shown
below. In the Appearance panel, change the Blending Mode for the
white Fill to Multiply to make it transparent. We only want the
shadow to be visible.

add inner shadow

8.
Add the Sesame Seeds on the Bagel

Step
1

Grab
the Pen Tool (P) and draw a sesame-like shape followed by a smaller
shape on top. Use the colors indicated to fill these shapes and
create the white and black sesame seeds. At 100% View the seeds are
very small, so take this fact into consideration.

Drag the white
sesame into the Brushes panel and choose New Scatter Brush. Type a
name for your brush and set the Rotation relative to Path. Leave the
rest of the settings as they are and hit OK. Repeat the same thing
with the black sesame.

create sesame seed scatter brush

Step
2

Take
the Pencil Tool (N) and draw a random path over the “Bagel-Top
and stroke it with the Sesame Scatter Brush saved earlier. The Stroke
Weight
is set at 1 pt but the stroke color is not important. Open the
Stroke Options window from the Appearance panel and change the
settings in order to scatter the seeds as much as possible. Play with
the settings until you like the end result.

apply sesame seed scatter brush 1

Step
3

With
the path still selected, press Add New Stroke in the Appearance
panel. Use the same Sesame Scatter Brush but open the Stroke Options
window and choose different settings. This will add more sesame seeds
on the bagel.

apply sesame seed scatter brush 2

Step
4

Let’s
add a few black sesame seeds. In the Appearance panel, press Add New
Stroke
and this time use the Black Sesame Scatter Brush that you saved earlier. Open the Stroke Options window and play with the
settings.

apply sesame seed scatter brush 3

Step
5

With
the path still selected, choose Expand Appearance from the Object
menu. As a result, the three strokes will turn into three groups of
seeds. Double click on one of the seeds a few times to enter the
Isolation Mode until you are able to select the individual seeds and
delete the ones that go over the edge of the bagel.

When you are
done, exit Isolation Mode by pressing the Back one level arrow in
the top-left corner of your Artboard.

clean up sesame seeds

Step
6

Next,
select the entire group of sesame seeds and go to Effect > Stylize
> Drop Shadow
. Apply the settings from the image below and hit OK.

apply shadow to sesame seeds

9.
Add Shadow Under the Bagel Sandwich

Step
1

Select
the compound path that you made earlier in the tutorial using all the
ingredients in the sandwich, and then Copy and Paste in place
(Shift-Control-V)
. Send the new copy behind everything by going to
Object > Arrange > Send to Back (Shift-Control-

[) (1).

Now,
select “bagel-bottom” and then Copy and Paste in Back (Control-B)
(2). While these two copies are selected, press Unite in the
Pathfinder panel to get a new compound path (3).

add shadow under the bagel 1

Step
2

Select
bagel-top” and then Copy and Paste in place (Shift-Control-V).
Send the new copy behind everything by going to Object > Arrange >
Send to Back (Shift-Control-[)
(1). Now, select the compound path
from the previous step along with the copy of “bagel-top” and
press Unite in the Pathfinder panel again (3).

add shadow under the bagel 2

Step
3

The
shape is now ready. Select black as the fill color and then go to
Effect > Stylize > Drop Shadow. Apply this effect two times
using the settings shown below. In the Appearance panel, set the
Opacity for the black Fill to 0%.

add shadow under the bagel 3

Step
4

Draw
a rectangle in a new layer behind the bagel and use the radial
gradient shown to fill it in order to create the background (1). You
can, of course, add another background if you prefer.

Use
the Ellipse Tool (L) to draw a new 57 x 57 px circle, and place
it in the center of the bagel. Send the circle behind everything by
going to Object > Arrange > Send to Back (Shift-Control-[).
Select black as the fill color and set it to Blending Mode Overlay
(2). This will darken the area in the center of the bagel a little
more (3).

add shadow under the bagel 4

Congratulations!
You’re Done

The
bagel sandwich icon is complete. I hope this was fun for you to
create, and don’t forget to share an image with us. I would love to
see your re-creations. Also, let me know if you want more food-related
tutorials in the future.

Are
you hungry now?

bagel sandwich icon final

Read more here:: Yum! How to Create a Delicious Bagel Sandwich Icon in Adobe Illustrator