{"id":2684,"date":"2014-03-10T02:54:35","date_gmt":"2014-03-10T06:54:35","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=2684"},"modified":"2014-03-10T02:54:35","modified_gmt":"2014-03-10T06:54:35","slug":"download-icon","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/download-icon\/","title":{"rendered":"Download Icon"},"content":{"rendered":"

Step 1 : Create an Document<\/strong>
\nCreate a new document with preferred size.
\nFill the background with #f0eae1<\/strong><\/p>\n

\"1\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2685\"\r\n <\/div><\/a><\/p>\n

Step 2 : Draw a circle<\/strong>
\nUse shape tool to draw circle.
\nCtrl+Click<\/strong> on the circle and add some anchor points to make some shape changes.<\/p>\n

\"2\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2686\"\r\n <\/div><\/a><\/p>\n

Add the following layer styles to that shape<\/p>\n

Gradient overlay<\/strong>
\n Inner shadow<\/strong>
\n Stroke<\/strong><\/p>\n

Next draw a little lip at the bottom of the main shape<\/p>\n

\"3\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2687\"\r\n <\/div><\/a><\/p>\n

Give the following layer styles to this lip shape
\nDrop shadow<\/strong>
\n Inner shadow<\/strong>
\n Color overlay<\/strong><\/p>\n

\"4\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2688\"\r\n <\/div><\/a><\/p>\n

Now the shape will be like this<\/p>\n

\"5\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2689\"\r\n <\/div><\/a><\/p>\n

Step 3 : Inner circle<\/strong>
\nDraw a small circle inside the main shape and apply following layer styles.
\nDrop Shadow<\/strong>
\n Inner shadow<\/strong>
\n Inner glow<\/strong>
\n Gradient overlay<\/strong><\/p>\n

\"6\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2690\"\r\n <\/div><\/a><\/p>\n

Step 4 :Overloading shape<\/strong>
\nNow it\u2019s time to draw loading shape for this once again draw a circle behind small circle.
\nApply\u00a0the following layer styles to overloading shape
\nDrop Shadow<\/strong>
\n Inner shadow<\/strong>
\n Inner glow<\/strong>
\n Color overlay<\/strong>
\n Stroke<\/strong><\/p>\n

\"7\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2691\"\r\n <\/div><\/a><\/p>\n

Create a new layer ctrl+click<\/strong> the orange shape layer.
\nSet the blending mode to soft light, opacity to 70%.
\nGrap brush tool and play on orange shape laye
\nOnce again create new layer, ctrl+click<\/strong> on orange layer and hit delete<\/p>\n

\"8\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2692\"\r\n <\/div><\/a><\/p>\n

Now apply the following layer style
\nDrop shadow<\/strong>
\n Inner shadow<\/strong>
\n Gradient overlay<\/strong><\/p>\n

\"9\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2693\"\r\n <\/div><\/a><\/p>\n

Step 5 : Add text<\/strong>
\nNow type the number 85% and 530kb to denote the loading.
\nAfetr making some changes finally the icon will be like this.<\/p>\n

\"10\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2694\"\r\n <\/div><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Step 1 : Create an Document Create a new document with preferred size. Fill the background with #f0eae1 Step 2 : Draw a circle Use shape tool to draw circle. Ctrl+Click on the circle and add some anchor points to make some shape changes. Add the following layer styles to that shape Gradient overlay Inner […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2684","post","type-post","status-publish","format-standard","hentry","category-whats-trending-web-design"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=2684"}],"version-history":[{"count":7,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2684\/revisions"}],"predecessor-version":[{"id":2701,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2684\/revisions\/2701"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}