{"id":37302,"date":"2016-09-09T10:21:38","date_gmt":"2016-09-09T17:21:38","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=37302"},"modified":"2016-09-09T10:21:38","modified_gmt":"2016-09-09T17:21:38","slug":"designing-progress-bar-adobe-xd","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/designing-progress-bar-adobe-xd\/","title":{"rendered":"Designing a Progress Bar in Adobe XD"},"content":{"rendered":"<p>In this tutorial, we&#8217;re going to learn how to design a progress bar in Adobe XD.<\/p>\n<p><iframe loading=\"lazy\" title=\"Design a Progress Bar Adobe XD Tutorial\" width=\"1200\" height=\"675\" data-src=\"https:\/\/www.youtube.com\/embed\/YDJn4gRpT3s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/p>\n<p>1. Create a new artboard <strong>1920 x 1080<\/strong>.<\/p>\n<p>2. Select the artboard by <strong>Left-clicking<\/strong> on the artboard name top-left, and in the <strong>Property Inspector<\/strong> on the right, select a <strong>Background Fill Colour<\/strong>. In this tutorial the colour used was <strong>#182F38<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37304 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-1-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-1\" width=\"625\" height=\"352\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/352;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37304\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-1-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-1\" width=\"625\" height=\"352\" \/><\/noscript><\/p>\n<p>3. Select the <strong>Rectangle Tool<\/strong>, and draw a long thin rectangle the size that you would like your progress bar to be. In the <strong>Property Inspector<\/strong> change the radius to a\u00a0particularly\u00a0high number, to fully round off all corners. Select either the colour <strong>#FFFFFF<\/strong> or <strong>#10232C<\/strong>.<\/p>\n<p>4. Press <strong>Cmd\/Ctrl + D<\/strong> to duplicate the rectangle, and in the <strong>Property Inspector<\/strong>, select the other\u00a0radius icon that will allow you to edit the radius of each corner individually. Change the top-right and bottom-right radius to <strong>0<\/strong>.<\/p>\n<p>5. Next, with the rectangle selected, set the <strong>Fill<\/strong> colour to <strong>#67D9F4<\/strong> or a colour of your choice.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37305 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-2-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-2\" width=\"625\" height=\"352\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/352;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37305\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-2-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-2\" width=\"625\" height=\"352\" \/><\/noscript><\/p>\n<p>6. <strong>Double-click<\/strong> the coloured rectangle, and drag from the right edge to adjust the completion percentage for your progress bar.<\/p>\n<p>7. To add some texture to the progress bar, select the <strong>Rectangle Tool<\/strong> and create a small vertical rectangle that is either equal to, or greater than, the height of your progress bar. The angle of this rectangle can also be adjusted.<\/p>\n<p>8. Select the <strong>Repeat Grid Tool<\/strong> in the <strong>Property Inspector<\/strong> and <strong>Drag<\/strong> from the right edge to repeat the shape up to where your coloured rectangle ends. Adjust the spacing between each of the copied shapes by hovering between the gaps and <strong>Left-clicking<\/strong> and dragging when the pink guides appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37306 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-3-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-3\" width=\"625\" height=\"352\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/352;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37306\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-3-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-3\" width=\"625\" height=\"352\" \/><\/noscript><\/p>\n<p>9. Select the coloured part of your progress bar, and press <strong>Cmd\/Ctrl + D<\/strong> to create a copy, and move this shape up on top of the repeated shapes\/bars. Select both the repeated shapes and the coloured rectangle copy, and in the <strong>Pathfinder <\/strong>options in the <strong>Property Inspector<\/strong>, select <strong>Intersect<\/strong>. Selecting this option will crop the repeated shapes\/bars to the dimensions of the coloured shape.<\/p>\n<p>10. A <strong>Fill<\/strong> or <strong>Gradient<\/strong> can also\u00a0be applied to the cropped version of the repeated shapes, and it can then be moved back down to sit on top of the original coloured shape, giving it some texture. The <strong>Opacity<\/strong> of the repeated shapes\/bars can also be adjusted.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37307 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-4-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-4\" width=\"625\" height=\"352\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/352;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-37307\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/09\/designing-progress-bar-adobe-xd-4-1024x576.png\" alt=\"designing-progress-bar-adobe-xd-4\" width=\"625\" height=\"352\" \/><\/noscript><\/p>\n<p>11. <strong>Drag<\/strong> over all of your shapes and go to <strong>Object &gt; Group<\/strong> to group all shapes together and move around as one object.<\/p>\n<p><a href=\"http:\/\/www.adobe.com\/uk\/products\/experience-design.html\">Download <\/a>Adobe Experience Design CC (Adobe XD).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;re going to learn how to design a progress bar in Adobe XD. 1. Create a new artboard 1920 x 1080. 2. Select the artboard by Left-clicking on the artboard name top-left, and in the Property Inspector on the right, select a Background Fill Colour. In this tutorial the colour used was [&hellip;]<\/p>\n","protected":false},"author":1899,"featured_media":37308,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7635,476,508,378,932,4,31,11,479],"tags":[615,8602],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/37302"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1899"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=37302"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/37302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/37308"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=37302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=37302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=37302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}