To create the arrow we’re going to subtract another shape from this semi-circle. We can then select both shapes and, using the Boolean Operators in the Properties panel, we can subtract the top half of the circle. When resizing it you’ll notice it snaps neatly to the halfway point on the circle. We’ll then use the Rectangle tool to create a shape overlapping the top of the circle. We’ll remove the border by altering the settings in the right hand Properties panel, then change the fill to something suitable.
We’ll start with the Ellipse tool and use it to draw a circle of about 85px wide. By using XD’s vector tools wherever you can, instead of flat bitmaps (like JPG, PNG etc.) when you hand the design over to a developer they’ll be able to take those vector graphics and turn them directly into SVG code. It has the main content area at the top of the page already, and now I want to add a button with an arrow which will encourage users to scroll down to view more content.Īdobe XD is not a fully-fledged vector editing program but there’s still quite a bit you can do with it. I’ll be using a website design which is part of a new course called “Code Friendly Design With Adobe XD”. Quick Tip: Design an SVG Arrow Graphic in Adobe XD
0 kommentar(er)
