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!
1. Create a Basic Rolled Sushi Form With Nori
Step 1
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.
Step 2
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.
Step 3
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.
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.
Step 4
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.
Step 5
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.
Step 6
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.
Step 7
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.
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.
Step 8
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).
Step 9
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.
Step 10
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.
Step 11
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.
2. Create a Basic Rolled Sushi Form With Salmon
Step 1
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.
Step 2
Create a smaller shape inside with -7 px Offset value.
Step 3
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.
Step 4
Use the Effect > Distort & Transform > Free Distort function to make the shape squashed and Object > Expand Appearance to apply the effect.
Step 5
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.
Step 6
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).
Step 7
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.
Step 8
Group (Control-G) the stripes and apply Effect > Warp > Arc with 15% Vertical Bend value, making the stripes slightly arched.
Step 9
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.
Step 10
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.
3. Use the Base to Make Various Types of Rolls
Step 1
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!
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.
Step 2
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.
Step 3
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.
Step 4
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.
Step 5
Add more copies, covering the top of our rolled sushi and creating a thick layer of caviar.
Step 6
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.
Step 7
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.
Step 8
Combine the elements of the square and round rolls to create an entirely new type of this tasty dish.
Make up as many variations as you need. Here are six types of rolls that we’ve created, using the basic shapes.
Step 9
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.
Step 10
Place our rolls on the icon circles, combining the contrasting colors. Duplicate some rolls, creating pairs to make the set more rhythmic and varied.
Yatta! Our Rolled Sushi Set of Icons Is Finished!
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!
