{"id":34499,"date":"2014-05-15T13:47:00","date_gmt":"2014-05-15T13:47:00","guid":{"rendered":"https:\/\/www.zilliondesigns.com\/blog\/?p=34499"},"modified":"2026-04-17T13:59:01","modified_gmt":"2026-04-17T13:59:01","slug":"how-to-make-web-2-0-play-button-in-adobe-illustrator","status":"publish","type":"post","link":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/","title":{"rendered":"How to Make a Web 2.0 Play Button in Adobe Illustrator"},"content":{"rendered":"<p>If you come across a client that needs buttons, you need to know how to make the basic button shapes like round buttons, rectangles, squares, pentagons, and whatever else your client requires for their project.<\/p>\n<p>This tutorial helps you design an icon you see on the web every day, the round play button! I know, it <em>looks<\/em> simple. Trust me, it takes a lot of layers to make! If you haven&#8217;t made 3D objects before, it is best to start with a simple shape like a circle and go from there.<\/p>\n<p>Now it&#8217;s time to create a three-dimensional object from a two-dimensional shape!<\/p>\n<p align=\"center\"><iframe data-src=\"https:\/\/www.slideshare.net\/slideshow\/embed_code\/34728982?rel=0\" width=\"512\" height=\"421\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px 1px 0; margin-bottom:5px; max-width: 100%;\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"> <\/iframe> <\/p>\n<p>Flat design is the largest trend in icon and button design lately, and the pressure is on to go flat. We&#8217;re not saying you should cave to design trends, and we&#8217;re all for you staying true to your own style and flair, but know that it&#8217;s hard to resist switching from 3D. The process is easier without nearly as many layers and as I said, it&#8217;s popular.<\/p>\n<p>Have you designed something in 3D for a client recently? Let us know in the comments or on twitter @ZillionDesigns!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you come across a client that needs buttons, you need to know how to make the basic button shapes like round buttons, rectangles, squares, pentagons, and whatever else your client requires for their project. This tutorial helps you design an icon you see on the web every day, the round play button! I know, [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":34500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[297],"tags":[],"class_list":["post-34499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web 2.0 Play Button Tutorial on Adobe Illustrator<\/title>\n<meta name=\"description\" content=\"This tutorial helps you design in Adobe Illustrator an icon you see on the web every day, the Web 2.0 Play button!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web 2.0 Play Button Tutorial on Adobe Illustrator\" \/>\n<meta property=\"og:description\" content=\"This tutorial helps you design in Adobe Illustrator an icon you see on the web every day, the Web 2.0 Play button!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/\" \/>\n<meta property=\"og:site_name\" content=\"ZD Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/zilliondesigns\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-15T13:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-17T13:59:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"830\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"ZD Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@zilliondesigns\" \/>\n<meta name=\"twitter:site\" content=\"@zilliondesigns\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ZD Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/\"},\"author\":{\"name\":\"ZD Team\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/person\/02a0cd9f794e713c21a9b769b71cef95\"},\"headline\":\"How to Make a Web 2.0 Play Button in Adobe Illustrator\",\"datePublished\":\"2014-05-15T13:47:00+00:00\",\"dateModified\":\"2026-04-17T13:59:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/\"},\"wordCount\":206,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/\",\"url\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/\",\"name\":\"Web 2.0 Play Button Tutorial on Adobe Illustrator\",\"isPartOf\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg\",\"datePublished\":\"2014-05-15T13:47:00+00:00\",\"dateModified\":\"2026-04-17T13:59:01+00:00\",\"description\":\"This tutorial helps you design in Adobe Illustrator an icon you see on the web every day, the Web 2.0 Play button!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage\",\"url\":\"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg\",\"contentUrl\":\"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg\",\"width\":830,\"height\":400,\"caption\":\"Web 2.0\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.zilliondesigns.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Make a Web 2.0 Play Button in Adobe Illustrator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#website\",\"url\":\"https:\/\/www.zilliondesigns.com\/blog\/\",\"name\":\"ZD Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#organization\",\"name\":\"ZillionDesigns Blog\",\"url\":\"https:\/\/www.zilliondesigns.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/ZD-Blog-Logo.png\",\"contentUrl\":\"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/ZD-Blog-Logo.png\",\"width\":570,\"height\":134,\"caption\":\"ZillionDesigns Blog\"},\"image\":{\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"http:\/\/facebook.com\/zilliondesigns\",\"https:\/\/x.com\/zilliondesigns\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/person\/02a0cd9f794e713c21a9b769b71cef95\",\"name\":\"ZD Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ad9e21922512847a7cd6734a67f13fdfc805007a70364aecd19e5b8d42a7a2a3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ad9e21922512847a7cd6734a67f13fdfc805007a70364aecd19e5b8d42a7a2a3?s=96&d=mm&r=g\",\"caption\":\"ZD Team\"},\"description\":\"ZD Team is the in-house editorial team behind the ZillionDesigns Blog. Specializing in design, branding, and logo strategy, our writers share practical insights, creative trends, and expert guidance to help businesses build stronger visual identities. From brand fundamentals to advanced logo design techniques, our team delivers content crafted for designers and growing brands alike.\",\"url\":\"https:\/\/www.zilliondesigns.com\/blog\/author\/zdteam\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web 2.0 Play Button Tutorial on Adobe Illustrator","description":"This tutorial helps you design in Adobe Illustrator an icon you see on the web every day, the Web 2.0 Play button!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/","og_locale":"en_US","og_type":"article","og_title":"Web 2.0 Play Button Tutorial on Adobe Illustrator","og_description":"This tutorial helps you design in Adobe Illustrator an icon you see on the web every day, the Web 2.0 Play button!","og_url":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/","og_site_name":"ZD Blog","article_publisher":"http:\/\/facebook.com\/zilliondesigns","article_published_time":"2014-05-15T13:47:00+00:00","article_modified_time":"2026-04-17T13:59:01+00:00","og_image":[{"width":830,"height":400,"url":"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg","type":"image\/jpeg"}],"author":"ZD Team","twitter_card":"summary_large_image","twitter_creator":"@zilliondesigns","twitter_site":"@zilliondesigns","twitter_misc":{"Written by":"ZD Team","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#article","isPartOf":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/"},"author":{"name":"ZD Team","@id":"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/person\/02a0cd9f794e713c21a9b769b71cef95"},"headline":"How to Make a Web 2.0 Play Button in Adobe Illustrator","datePublished":"2014-05-15T13:47:00+00:00","dateModified":"2026-04-17T13:59:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/"},"wordCount":206,"commentCount":0,"publisher":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage"},"thumbnailUrl":"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/","url":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/","name":"Web 2.0 Play Button Tutorial on Adobe Illustrator","isPartOf":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage"},"image":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage"},"thumbnailUrl":"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg","datePublished":"2014-05-15T13:47:00+00:00","dateModified":"2026-04-17T13:59:01+00:00","description":"This tutorial helps you design in Adobe Illustrator an icon you see on the web every day, the Web 2.0 Play button!","breadcrumb":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#primaryimage","url":"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg","contentUrl":"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/Web-2-0.jpg","width":830,"height":400,"caption":"Web 2.0"},{"@type":"BreadcrumbList","@id":"https:\/\/www.zilliondesigns.com\/blog\/how-to-make-web-2-0-play-button-in-adobe-illustrator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.zilliondesigns.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make a Web 2.0 Play Button in Adobe Illustrator"}]},{"@type":"WebSite","@id":"https:\/\/www.zilliondesigns.com\/blog\/#website","url":"https:\/\/www.zilliondesigns.com\/blog\/","name":"ZD Blog","description":"","publisher":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.zilliondesigns.com\/blog\/#organization","name":"ZillionDesigns Blog","url":"https:\/\/www.zilliondesigns.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/ZD-Blog-Logo.png","contentUrl":"https:\/\/www.zilliondesigns.com\/blog\/wp-content\/uploads\/ZD-Blog-Logo.png","width":570,"height":134,"caption":"ZillionDesigns Blog"},"image":{"@id":"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/zilliondesigns","https:\/\/x.com\/zilliondesigns"]},{"@type":"Person","@id":"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/person\/02a0cd9f794e713c21a9b769b71cef95","name":"ZD Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.zilliondesigns.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ad9e21922512847a7cd6734a67f13fdfc805007a70364aecd19e5b8d42a7a2a3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ad9e21922512847a7cd6734a67f13fdfc805007a70364aecd19e5b8d42a7a2a3?s=96&d=mm&r=g","caption":"ZD Team"},"description":"ZD Team is the in-house editorial team behind the ZillionDesigns Blog. Specializing in design, branding, and logo strategy, our writers share practical insights, creative trends, and expert guidance to help businesses build stronger visual identities. From brand fundamentals to advanced logo design techniques, our team delivers content crafted for designers and growing brands alike.","url":"https:\/\/www.zilliondesigns.com\/blog\/author\/zdteam\/"}]}},"_links":{"self":[{"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/34499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=34499"}],"version-history":[{"count":1,"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/34499\/revisions"}],"predecessor-version":[{"id":34501,"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/34499\/revisions\/34501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/media\/34500"}],"wp:attachment":[{"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=34499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=34499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zilliondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=34499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}