1. Introduction

1.1 Introduction

Do you wanna try yourself in icon design or a maybe you create icons but this time you want to make it in affinity designer, this course is for you. We'll go through a descriptive process of creating a set of fun shopping icons using the draw persona of affinity designer which is used to make scalable back to graphics. We’ll be working with basic geometric shapes transforming them. Using various separations to combine the shapes, learning how to align and arrange them, working with colors, and getting used to the main functions of the program. By the end of this course, you'll be able to expand the graded set. Or to create any other kind of flat icons of any topic. For example, hiking icons, food icons birthday icons and so on. Such things are widely used in web design, advertisement design and illustration. I guess you're already willing to start creating our first set Let's move on to our next video and start right from the point to discover the essential functions of Affinity Designer and to create the first icon from our set, a shopping bag. See you in the next lesson.

2. Creating Flat Shopping Icons

2.1 Shopping Bag Icon

Hello guys and welcome to the course how to design flat icons in Affinity Designer with US Global at Tuts+. In this lesson, we’ll be making our first icon, a shopping bag. We'll be discovering the basic functions of the program before moving to more complicated ones. Let's begin. We'll be working with Draw Persona of Affinity Designer creating vector graphics. First of all, let's make a new file. Select a Web type of file, as we'll be creating icons which are mostly used in web design. Let's make an 800x600 pixels document. Take the Rectangle Tool and let's start drawing a shopping bag. Hold Shift to make an even square, or just hold and drag to make a rectangle of custom size. We can adjust the size of the shape in the Transform panel, setting the values to 130 by 140 pixels. And let's change the fill color to a nice shade of pink in the Color panel on top using the color wheel. Now if we want to transform or modify our shape, we need to convert it to curves from the control toolbar on top. Take the Node Tool, select the top left node of the shape and either move it using the arrow keys, or head to the Transform panel, and here we can add or subtract the needed value. For example, let's add five pixels by typing +5 in the horizontal position to move the node five pixels to the right. Do the same for the opposite node, this time typing -5 for the horizontal position. Looking good. But let's move the nodes a bit closer to each other. Now take the Ellipse Tool and let's shape a small hole in the back. Hold down Cmd+Shift and make an even circle of about seven by seven pixel size. Change the fill color to dark pink. Now press Cmd+C and Cmd+V to duplicate the shape and make the copy a bit larger. Change the color of the copy to lighter pink. Select both shapes hold Option+Shift and drag to the right, making a copy for the second hole. Select both holes, click right mouse button, and group the shapes. Now let's take the Pencil and form a handle for our bag. Start from the hole, hold down Shift and make a vertical line. Click to make a node, hold Shift and make a horizontal line. Finish up with the line and use the Node Tool to select the nodes and move them around, making the line fit the bag. Set the stroke color to dark pink, And increase the rate of the stroke to three and a half points in the control toolbar on top. Now let's select the node and make it smooth from the convert menu on top. Use either smooth or smart function to make the corner rounded. Grab the node handle with the Node Tool and place it vertically. Hold Shift, adjust the lengths of both handles, and move the nodes down a bit to make the handle look smooth and rounded. And let's add some details. Use the Rectangle Tool to make a light pink stripe. Hold Option+Shift and drag down making the copy. Group the stripes. And in the Layers panel, drag the group over the bean bag shape until you see a short blue stripe as you see it now. This way we place the elements inside the bag shape, hiding their unneeded parts. Now let's design the icon forming a circle icon base. Make a large circle holding Cmd+Shift. In the last panel drag it beneath the bag, but do not place it inside the bag. You will see a long blue stripe this time, indicating that you put one object beneath the other. And we can adjust the size in the Transform panel, setting it to 260 by 260 pixels. Switch the fill color to light blue. Group all the elements of the bag. Select both the bag and the circle and use the Align panel on top to center both objects vertically and horizontally. Now let's make a trendy long shadow. Make a rectangle. Set the Blend mode to Multiply in the Layers panel. And place it beneath the bag. Hold Shift, and rotate the shape by 45 degrees. Now we need to make a shadow fit the bag. Convert it to curves. And use the Node tool to move the nodes this way hiding the unwanted pieces behind the bag. Click the edge of the shape to make an additional nodes and move them around. Finally, drag the shadow shape over the circle icon base in the Layers panel, to place it inside the circle. And done. Our first fledged shopping icon is ready, great job. In our next video, we'll be designing a discount badge icon, discovering some new tools of Affinity Designer, stay tuned.