How to Create a Cloud Icon in Adobe XD

Post pobrano z: How to Create a Cloud Icon in Adobe XD

Final product image
What You’ll Be Creating

With cloud computing on the rise, a simple „cloud” icon will always come in handy. Learn how to create one in this video from my course, Icon Design With Adobe XD.

How to Create a Cloud Icon in Adobe XD


Create the Basic Shapes for the Cloud

To start, set up a 60 x 60 px artboard, and then select it and turn on the Grid in the toolbar on the right. The grid is set to 1, so every one pixel there will be a horizontal and vertical guideline.

Select the Ellipse Tool and just left-click and hold Shift to draw a fairly small circle. Then go to Edit > Duplicate, move the copy up and to the right, and hold Shift and scale it up.

First two circles of the cloud shape

Drag over both of them and deselect the fill. And then select the smaller circle, and go to Edit > Duplicate again. Hold Shift and left-click and drag it to the right so it stays perfectly in line. 

Adding a third circle

Then go to Edit > Duplicate again. Make this new circle a little bit bigger by holding Shift, left-clicking, and scaling from one of the corners. 

Adding a fourth circle

Now select the Rectangle Tool and draw a horizontal rectangle. Then drag over everything and go to Object > Align to Pixel Grid. That just helps everything snap in place and line up at the bottom in particular.

Rectangle added over the circles

Drag this rectangle out a little, and then double-click the shape and select the top two corners and drag them in if they’re extending outside of the cloud icon. 

Rectangle being adjusted inwards

Create a Single Cloud Shape and Adjust It

Now, this does look like a mess of different shapes at the moment. However, in Adobe XD we can combine multiple shapes into a single shape. 

Simply drag over everything, and from the options at the top of the Property Inspector, select Add, and it will combine all of the shapes together into one shape. 

Create a single shape

You can see that at the bottom, we’ve got a little bit of an anomaly. But that’s fine—just zoom in, double-click, and try to adjust that path a little bit. Just moving that circle a little bit will help smooth out the curve. 

Anomaly being adjusted

Then drag over everything and give it a Border of 2. And from the color picker, select the color #4A4A4A, and deselect the fill. Scale it up a little, holding Alt-Shift and scaling from the center.

Again, go to Object > Align to Pixel Grid if you need to. You can see it shuffles it a little bit, so you may need to adjust some of the shapes again, as we did before. 

Full cloud shape

Add the Final Detail

The last thing that we’re going to do is add a little curve, just to give the cloud a bit more detail.

Select the Pen Tool and just left-click, left-click again to create a curve, and press Escape to complete it. Then select that same #4A4A4A swatch from the color picker. And the last thing that we can do is drag over everything and go to Object > Group so that we can move it around as one object.

Cloud with detail line added

You’ll see that our cloud is ever so slightly off the pixel grid. So you can just drag over everything, and go to Object > Group to group it all together. And then go over to the toolbar and adjust the y value so that instead of being 15.5, it’s rounded down to 15. And you’ll see it now aligns to the pixel grid nicely.

Watch the Full Course

In the full course, Icon Design With Adobe XD, you’ll learn how to use the tools available in Adobe XD to design a variety of different icons. As well as the cloud, you’ll learn to create a phone, browser, pencil icon and more, picking up some useful Adobe XD skills along the way.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 440,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.