{"id":3281,"date":"2012-05-31T18:47:27","date_gmt":"2012-05-31T18:47:27","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/bharry\/2012\/05\/31\/a-community-for-storyboard-shapes\/"},"modified":"2024-05-10T10:40:15","modified_gmt":"2024-05-10T17:40:15","slug":"a-community-for-storyboard-shapes","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/bharry\/a-community-for-storyboard-shapes\/","title":{"rendered":"A Community for Storyboard Shapes"},"content":{"rendered":"<p>A while ago, I wrote a <a href=\"http:\/\/blogs.msdn.com\/b\/bharry\/archive\/2011\/06\/21\/the-importance-of-feedback-in-software-development.aspx\">post<\/a> about the importance of feedback in the software development process.\u00a0 In that post I introduced a new storyboarding tool that we\u2019ve built as part of the VS 11 wave of products that enables you to collect feedback on your designs before you write a line of code.\u00a0 In the product, we ship a bunch of pre-canned shapes \u2013 Windows, Web, Sharepoint, Windows Phone, Windows 8, etc.\u00a0 But once you start storyboarding, your imagination can run wild with all of the different ideas of shapes and visuals you might want to use in applications.\u00a0 Of course, you can use any PowerPoint shape or bitmap in existence but tailored application shapes are valuable.<\/p>\n<p>One of our aspirations is to create a community of people sharing shapes they\u2019ve built \u2013 thereby helping everyone else design better, cooler apps.\u00a0 To assist with that, we\u2019ve added a new category on the <a href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/site\/search?f%5B0%5D.Type=SearchText&amp;f%5B0%5D.Value=storyboard&amp;f%5B1%5D.Type=RootCategory&amp;f%5B1%5D.Value=StoryboardShapes&amp;f%5B1%5D.Text=Storyboard%20Shapes\">Visual Studio Gallery for Storyboard Shapes<\/a>.\u00a0 We\u2019ve also prepopulated it with some additional shapes that we\u2019ve built (we hope you find some of them creative <a href=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2014\/02\/8228.wlEmoticon-smile_58CD4724.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-15586\" src=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2014\/02\/8228.wlEmoticon-smile_58CD4724.png\" alt=\"Image 8228 wlEmoticon smile 58CD4724\" width=\"19\" height=\"19\" \/><\/a>).\u00a0 Here\u2019s a screenshot of what the Gallery site looks like.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4064.clip_image002_thumb_437AE725.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16077\" src=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4064.clip_image002_thumb_437AE725.jpg\" alt=\"Image 4064 clip image002 thumb 437AE725\" width=\"804\" height=\"582\" srcset=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4064.clip_image002_thumb_437AE725.jpg 804w, https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4064.clip_image002_thumb_437AE725-300x217.jpg 300w, https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4064.clip_image002_thumb_437AE725-768x556.jpg 768w\" sizes=\"(max-width: 804px) 100vw, 804px\" \/><\/a><\/p>\n<p>We\u2019ve created subcategories and tried to make shapes easy to find. The shapes templates can be free or paid \u2013 all the ones we\u2019ve created so far are free.\u00a0 Installing them is super easy.\u00a0 Just\u2026<\/p>\n<ol>\n<li>Pick the shapes template you want<\/li>\n<li>Click download to load them on your system<\/li>\n<li>Click the &#8216;Import Shapes&#8217; button on the Storyboarding ribbon in PowerPoint and select this file<\/li>\n<\/ol>\n<p>Then you can start designing new storyboards with the shapes.<\/p>\n<p>We\u2019ve also tried to make the download site easy to find.\u00a0 Inside PowerPoint, on the Storyboard shapes window, we\u2019ve provided a \u201cFind more Storyboard Shapes online\u201d link that will take you to the VS Gallery and land you on the Storyboard shapes page.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4162.clip_image0025_thumb_6AA50A8D.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16078\" src=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4162.clip_image0025_thumb_6AA50A8D.jpg\" alt=\"Image 4162 clip image0025 thumb 6AA50A8D\" width=\"332\" height=\"484\" srcset=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4162.clip_image0025_thumb_6AA50A8D.jpg 332w, https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4162.clip_image0025_thumb_6AA50A8D-206x300.jpg 206w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/a><\/p>\n<p>You can use these shapes libraries with the storyboarding tool in the <a href=\"http:\/\/blogs.msdn.com\/b\/bharry\/archive\/2012\/05\/31\/visual-studio-tfs-2012-release-candidate-available-today.aspx\">VS 11 Release Candidate<\/a> we released today and with the RTM version when it is available.\u00a0 In addition we are working on some additional libraries that we hope will be available soon \u2013 like iPhone and iPad but we hope you all will come up with lots of great ideas and share them.<\/p>\n<p>So using them is really easy, but what about creating them?\u00a0 Well, it\u2019s a hair more complicated.\u00a0 Our storyboarding tool is a PowerPoint plugin and our shape libraries are just PowerPoint shapes, right?\u00a0 Yes and no.\u00a0 Yes, they are PowerPoint shapes, but, we\u2019ve added the ability to annotate them with metadata the storyboarding add-in uses.<\/p>\n<p>The most important of these is sizing behavior.\u00a0 When you size a PowerPoint shape, just stretches everything.\u00a0 If you are resizing a list, you don\u2019t want to stretch the list contents, making the individual items, scrollbar, etc. unnaturally bigger.\u00a0 You want to stretch it and have some aspects stretch and others stay the same.\u00a0 To do this, you annotate your shapes with sizing metadata that tells the tool how you want your shapes to stretch.\u00a0 For some shapes, uniform stretching is fine and you don\u2019t need to bother.\u00a0 For others, it\u2019s pretty important.<\/p>\n<p>We also use metadata to annotate shapes with search keywords, category information, etc. to make your shapes easier to find.<\/p>\n<p>All this metadata is just entered as notes on the PowerPoint slides containing your authored shapes.\u00a0 When you\u2019re done with your shapes, you use our \u201c<a href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/75f32d63-8ff2-49f3-b86e-70297d300858\">shape compiler<\/a>\u201d (which admittedly is a goofy command line tool for now) to compile your shape into a shape library (.sbsx file) that can be imported into PowerPoint and used for Storyboarding.\u00a0 The Storyboarding tool download also includes instructions on how to annotate your PowerPoint shapes.<\/p>\n<p>The shape library can also be uploaded to the Visual Studio Gallery by clicking on the Upload link towards the upper right hand corner of the VS Gallery page.\u00a0 You will then be asked to choose what Extension Type you are uploading (in this case Storyboard Shapes).<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4544.image_thumb_18CEE07B.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16080\" src=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4544.image_thumb_18CEE07B.png\" alt=\"Image 4544 image thumb 18CEE07B\" width=\"644\" height=\"234\" srcset=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4544.image_thumb_18CEE07B.png 644w, https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/4544.image_thumb_18CEE07B-300x109.png 300w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><\/a><\/p>\n<p>You can then either upload the shapes file or enter a link to your shapes.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/3146.image_thumb_2BDFE75A.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16081\" src=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/3146.image_thumb_2BDFE75A.png\" alt=\"Image 3146 image thumb 2BDFE75A\" width=\"644\" height=\"269\" srcset=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/3146.image_thumb_2BDFE75A.png 644w, https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/3146.image_thumb_2BDFE75A-300x125.png 300w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><\/a><\/p>\n<p>In the event you want to charge for your shapes, you can advertise them on the Gallery but you\u2019ll need to enter a link to your own commerce site.\u00a0 The Gallery doesn\u2019t have any way to collect money directly.<\/p>\n<p>Lastly, you can fill out the information for your VS Gallery download page:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/8814.image_thumb_7AB086EC.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16082\" src=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/8814.image_thumb_7AB086EC.png\" alt=\"Image 8814 image thumb 7AB086EC\" width=\"604\" height=\"484\" srcset=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/8814.image_thumb_7AB086EC.png 604w, https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2012\/05\/8814.image_thumb_7AB086EC-300x240.png 300w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a><\/p>\n<p>We hope all of you find the Storyboarding shapes on the Gallery useful and we hope some of you take the time to demonstrate your creativity and share some of your own designs.<\/p>\n<p>Thanks and happy storyboarding <a href=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2014\/02\/8228.wlEmoticon-smile_58CD4724.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-15586\" src=\"https:\/\/devblogs.microsoft.com\/bharry\/wp-content\/uploads\/sites\/8\/2014\/02\/8228.wlEmoticon-smile_58CD4724.png\" alt=\"Image 8228 wlEmoticon smile 58CD4724\" width=\"19\" height=\"19\" \/><\/a><\/p>\n<p>Brian<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A while ago, I wrote a post about the importance of feedback in the software development process.\u00a0 In that post I introduced a new storyboarding tool that we\u2019ve built as part of the VS 11 wave of products that enables you to collect feedback on your designs before you write a line of code.\u00a0 In [&hellip;]<\/p>\n","protected":false},"author":244,"featured_media":14617,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[11,5],"class_list":["post-3281","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-announcement","tag-tfs"],"acf":[],"blog_post_summary":"<p>A while ago, I wrote a post about the importance of feedback in the software development process.\u00a0 In that post I introduced a new storyboarding tool that we\u2019ve built as part of the VS 11 wave of products that enables you to collect feedback on your designs before you write a line of code.\u00a0 In [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/posts\/3281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/users\/244"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/comments?post=3281"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/posts\/3281\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/media\/14617"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/media?parent=3281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/categories?post=3281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/bharry\/wp-json\/wp\/v2\/tags?post=3281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}