How to Create a Flat Design Rolled Sushi Icon Set in Adobe Illustrator

Final product image
What You'll Be Creating

The increasing popularity of rolled sushi has resulted in the spread of this dish around the world. Nowadays, there are so many variations and fillings that we can all find something to our taste. 
In this tutorial we’ll create our own rolls and combine them into a set of colorful icons. We’ll create a base with some simple shapes and transformations and then use it to create as many variations as we can by replacing separate details, like in a constructor. Let’s start!
First of all, let’s form the basic part of our future roll. Either take the Rectangle Tool (M) and draw an even square by holding down the Shift key and dragging, or double click on the Rectangle Tool (M) in the Tools panel and make a 30 x 30 px square from the pop-up menu. Now double-click the Rotate Tool (R) and set a 45 degree Angle for our square.    

create a square with the Rectangle Tool

Switch to the Selection Tool (V) and select the shape. Grab one of the circled Live Corners markers inside our square and drag it closer to the center, rounding the corners. This feature is available only in CC version of Adobe Illustrator. For earlier versions, use Effect > Stylize > Round Corners with a bigger Radius value to make the shape almost round.

make the corners rounded with live corners feature

Keeping the shape selected, go to Object > Path > Offset Path and set the Offsetvalue to 5 px, creating a bigger shape beneath the initial one.

use offset path 1

Select the first shape again and create another Offset Path, but this time with -7 px Offset value, creating a smaller square inside the initial one.

use offset path 2

Apply the dark-blue color (#404E69) to the larger shape. This will be the outer part of our roll, the nori wrapping. Fill the middle part with light yellow (#FCFDDD) for the rice and, finally, color the middle part with vivid green (#93C13A) for the avocado filling.

apply colors to sushi base

Let’s add some details to our roll. Take the Ellipse Tool (L) and form a squashed ellipse, depicting a grain of rice. Make a darker Stroke (#F1F2D4), set the Weightto 0.3 pt in the Stroke panel, and Align Stroke to Outside. Duplicate the grain several times and spread the copies over the middle part of our roll. Make the Fillcolor of some of the grains lighter.

add grains of rice with the ellipse tool and stroke

Let’s work on the inner part of the roll. Take the Knife Tool (you can find it in the same dropdown menu as the Eraser Tool (Shift-E) in the Tools panel) and draw a curved line across the green shape, dividing it into two halves. Make the left part slightly lighter.

use the knife tool to split the filling

Now that we have the top view of our roll, let’s add an isometric effect to it in order to make the item three-dimensional. Select all parts of our roll and Group (Control-G)them.
Keep a copy of this group, as we’ll need some of its elements later. Select the created group and go to Effect > Distort & Transform > Free Distort. Use the Free Distort options window to make the bottom part of the image wider than the top part, creating the perspective.

use free distort to modify the shape

Object > Expand Appearance to apply the effect and squash the shape a little bit more by taking the Selection Tool (V) and dragging the upper edge of the shape down.

expand appearance and squash the shape

Now we need to create the “body” of our rolled sushi. Hold down Alt and Shift and drag the top shape down, creating a copy of the top shape of our roll. Select the bottom group and use the Unite function of Pathfinder panel to turn it into a single shape. Fill the shape with a darker color than the nori part and Send the shape to Back (Shift-Control-[ or right mouse click > Arrange > Send to Back).

form the bottom with unite in pathfinder panel

Take the Rectangle Tool (M) and create a shape, connecting the side points of the top and bottom parts of our roll. I use red here just to make it more visible in the screenshots. Unite the created shape with the bottom part, creating the “body” base of the roll.

form the body of the roll and unite it in pathfinder panel

Copy the body part and Paste it in Front (Control-C > Control-F). Take the Eraser Tool (Shift-E) and, holding down the Alt key, erase the left part of the shape. Make the remaining half darker, forming a gentle, flat-style shadow.

add flat shadow to the body of the roll

Arm yourself with the Pencil Tool (N) and draw a thin and slightly curved shape. Make several copies and place them on the nori part of our roll, creating texture.

add texture to the body of the roll

This time we’ll render a rounded roll. Create an even circle with the Ellipse Tool (L), either by holding down the Shift key and dragging, or by double-clicking the Ellipse Tool (L) icon in the Tools panel and making a 30 x 30 px ellipse.
Use Object > Path > Offset Path with 5 px Offset value to create a bigger circle around the initial shape.

create a circle roll base with ellipse tool and offset path

Create a smaller shape inside with -7 px Offset value.

add center part with offset path

Let’s add some color to our sushi! Fill the outer shape with a gentle orange tone (#F2805B) for the salmon wrapping, make the middle shape light yellow (#FCFDDD) for the rice and, finally, fill the inner part with white (#FFFFFF) for the cream-cheese filling, wrapped in nori (dark blue #404E69). Add some separate pieces of rice, as we did previously, to make the top of our roll more detailed.

color the roll using the palette

Use the Effect > Distort & Transform > Free Distort function to make the shape squashed and Object > Expand Appearance to apply the effect.

use Free Distort to add isometric effect

Start forming the “body” of our salmon roll. Use the copy of the top part of the roll to create its bottom. Then take the Rectangle Tool (M) and connect the two parts together, by creating a rectangle between them. 
Finish up by Uniting the bottom part and the rectangle in the Pathfinder panel, turning them into a single shape. Make the body part slightly darker than the salmon wrapping of the top part in order to separate these shapes from each other.

form the body of the roll

Let’s add some details to make the salmon part of our roll more true-to-life. Use theRectangle Tool (M) to create a narrow pink stripe and rotate it to 45 degree angle, either by rotating the shape manually with the Selection Tool (V) or using theRotate Tool (R).

make a stripe with the rectangle tool

Place the created stripe above the roll, as shown in the screenshot below, then hold the Alt key and move the shape to the right, creating a copy. Press Control-D several times to repeat your last action, thus creating more copies.

add more stripes by duplicating them

Group (Control-G) the stripes and apply Effect > Warp > Arc with 15% Vertical Bend value, making the stripes slightly arched.

use arc warp effect to bend the stripes

Duplicate the basic “body” shape of our roll and Bring it Forward (Control-]), placing it above the stripes. Select both the stripes and the created copy, right click and Make Clipping Mask, thus hiding the unwanted pieces inside the mask.

create clipping mask for the stripes

Use the Reflect Tool (O) to flip the stripes over the Vertical Axis. Create another copy of the roll body shape and delete one of its halves with the Eraser Tool (Shift-E). Switch the remaining half to Multiply Blending Mode and place it above the stripes, creating a gentle flat shadow.

reflect the shape and create a shadow in multiply blending mode

Now we have these two shapes, which will serve as a basis for our future icon set. We’ll be using their parts in a construction set, creating different variations. Let’s try it out!

finished sushi base

Duplicate the salmon roll and remove the Clipping Mask containing the stripes. Now take the Direct Selection Tool (A) and select the bottom anchor points by clicking and dragging the mouse cursor over the desired area. Finally, hold the Shift key and drag the selected points down, making the shape taller.

make the shape longer with direct selection tool

Delete the center part on top of our roll and change the salmon colors to dark-blue nori tints. Add texture strokes on the body of the roll.

recolor the shape

Let’s create caviar for the topping of the roll. Make four circles of about 10 x 10 pxsize with the Ellipse Tool (L). Add tiny details to some of the caviar pieces. Leave the other circles blank in order not to make the combination of these elements look too noisy.

create caviar with the ellipse tool

Place the caviar on top of the roll and start adding more copies. Rearrange the pieces, placing the dark elements next to the light ones, creating contrast.

place cavial on the roll base

Add more copies, covering the top of our rolled sushi and creating a thick layer of caviar.

add more pieces of caviar

Let’s move on and create an avocado roll, using the salmon roll base again. Delete the stripes and change the salmon colors to bright tints of green (you can pick the colors from the screenshot below, using the Eyedropper Tool (I)). Split the topping with the Knife Tool and change the colors to bright yellow.

recolor the object making an avocado roll

For our next sushi, let’s use the squared roll base that we created at the beginning of this tutorial. Recolor the body part into light yellow, creating a base made of rice. Use the filling from the previous roll, creating a round yellow center on the top part. Take separate grains of rice from the top sushi shape that we created at the beginning, and place the rice on the body shape, making the roll more textured.

recolor the nori roll and add more rice grains

Combine the elements of the square and round rolls to create an entirely new type of this tasty dish.

combine different rolls to make new types

Make up as many variations as you need. Here are six types of rolls that we’ve created, using the basic shapes.

make six different rolls

Now we will gather the created sushi into a set of icons. First of all, let’s make the icon base, using the Ellipse Tool (L) and creating a 120 x 120 px even circle. Make four circles and fill them with the same bright colors that we used for our rolls—green, pinky-orange, light yellow and bright yellow.

create the base of our icon

Place our rolls on the icon circles, combining the contrasting colors. Duplicate some rolls, creating pairs to make the set more rhythmic and varied.

place the created rolls on the icon base

Great job, guys and girls! You can hardly stop when you combine elements, making more and more new rolls! Let's end up with 16 icons. 
As a result, we’ve created a big colorful set of yummy rolls and learned how to transform basic shapes, making the objects isometric, and used a simple basis to create a wide range of different roll types. I hope you’ve found some useful tips and tricks to master your skills. Good luck!

finished result with a set of rolled sushi icons set


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


Copyright @ 2013 KrobKnea.

Designed by Next Learn | My partner