{"id":35439,"date":"2016-05-16T15:00:09","date_gmt":"2016-05-16T22:00:09","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=35439"},"modified":"2016-05-18T20:29:28","modified_gmt":"2016-05-19T03:29:28","slug":"design-profile-ui-adobe-illustrator","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/design-profile-ui-adobe-illustrator\/","title":{"rendered":"How to Design a Profile UI in Adobe Illustrator"},"content":{"rendered":"<p>In this tutorial, we&#8217;re going to learn how to design a social profile user interface (UI) in Adobe Illustrator.<\/p>\n<p><iframe loading=\"lazy\" title=\"Learn How to Design a Social Profile UI in Adobe Illustrator | Dansky\" width=\"1200\" height=\"675\" data-src=\"https:\/\/www.youtube.com\/embed\/KG4AbY3C3EY?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<h2>The Steps (1-18)<\/h2>\n<p>1. Create a new document, 3000 x 3000 pixels, with the colour mode set to &#8216;RGB.&#8217;<\/p>\n<p>2. Using the <strong>Rectangle Tool<\/strong>, select a light grey and draw a four-sided shape that covers the entire artboard. You can then double-click the layer name in the <strong>Layers<\/strong> palette and rename the layer to \u2018Background\u2019, and click in the empty box alongside to lock the layer (you should see a padlock icon appear to confirm that the layer has been locked).<\/p>\n<p>3. Create a new layer from within the <strong>Layers<\/strong> palette, give this layer a name of your choice, and then paste in the profile photo that you wish to use. Make sure that this new layer is above the \u2018Background\u2019 layer. Move the photo off of the artboard for now, and we\u2019ll come back to this later in the tutorial.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-35569 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-1024x576.png\" alt=\"design-social-profile-ui-1\" width=\"625\" height=\"352\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1.png 2048w\" data-sizes=\"(max-width: 625px) 100vw, 625px\" 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-35569\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-1024x576.png\" alt=\"design-social-profile-ui-1\" width=\"625\" height=\"352\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-1.png 2048w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/noscript><\/p>\n<p>4. Using the <strong>Rectangle Tool<\/strong>, draw a new four-sided shape (approximately 775 x 490 pixels). Give this shape a fill colour of white.<\/p>\n<p>5. Select the <strong>Ellipse Tool<\/strong>, and hold <strong>Shift<\/strong> to draw a circle (approximately 290 x 290 pixels). Fill with any temporary colour for now, and align the circle centrally inside the rectangle that we created in <strong>Step 4<\/strong>. Different shades of grey are particularly useful when working on a layout to get the basic structure, and can then be refined later in the design process.<\/p>\n<p>6. Select the <strong>Type Tool<\/strong> and click anywhere on the artboard to start typing a number of your choice, then press <strong>Return<\/strong> and type the word \u2018Likes\u2019.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-35570 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-2-1024x576.png\" alt=\"design-social-profile-ui-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-35570\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-2-1024x576.png\" alt=\"design-social-profile-ui-2\" width=\"625\" height=\"352\" \/><\/noscript><\/p>\n<p>7. Select central text alignment, pick a font, and style using bold\/italics as desired.<\/p>\n<p>8. Position the new text object in the bottom left corner of the rectangle, with plenty of\u00a0space from the left\/bottom edge.<\/p>\n<p>9.<strong> Copy\/Paste<\/strong> the text object two more times, and spread all three horizontally across the width of the rectangle. Use the alignment options if necessary to distribute the 3 text objects equally apart. The numbers can also be adjusted, as well as the titles. For example, consider using Shares, Downloads, Followers etc as ideas for titles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-35571 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-1024x576.png\" alt=\"design-social-profile-ui-3\" width=\"625\" height=\"352\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3.png 2048w\" data-sizes=\"(max-width: 625px) 100vw, 625px\" 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-35571\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-1024x576.png\" alt=\"design-social-profile-ui-3\" width=\"625\" height=\"352\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-3.png 2048w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/noscript><\/p>\n<p>10. Remember the profile photo that we put to one side earlier? Move the photo over half of the circle, so part of the circle is still visible. Then select <strong>Object &gt; Arrange &gt; Bring to Front<\/strong> to ensure that the circle is on top.<\/p>\n<p>11. Select both the circle and photo together holding <strong>Shift<\/strong> when selecting, and then go to <strong>Object &gt; Clipping Mask &gt; Make<\/strong>. This will crop your photo inside the circle shape. Double-click on this object to now go inside of the shape and adjust the crop of your image. To then exit that specific object group, click the arrow pointing left, in the upper left corner of the document window.<\/p>\n<p>12. Next, we can create a circle with similar dimensions to the profile photo, remove the fill, and give this shape a stroke width and colour as desired. This step is optional,\u00a0adding a border around your profile photo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-35572 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-1024x576.png\" alt=\"design-social-profile-ui-4\" width=\"625\" height=\"352\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4.png 2048w\" data-sizes=\"(max-width: 625px) 100vw, 625px\" 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-35572\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-1024x576.png\" alt=\"design-social-profile-ui-4\" width=\"625\" height=\"352\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-4.png 2048w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/noscript><\/p>\n<p>13. Select the <strong>Polygon Tool<\/strong> and specify creating a shape with\u00a03 sides (triangle). Select white as the fill colour for this shape, reduce in size, and position centrally and underneath the main rectangle, ensuring that the triangle is pointing in a downwards direction.<\/p>\n<p>14. Ensure that both of these shapes are touching, and in the <strong>Pathfinder<\/strong> palette, select the <strong>Unite<\/strong>\u00a0option to merge these two shapes into one shape.<\/p>\n<p>15. Using the <strong>Ellipse Tool<\/strong>, create a narrow ellipse that is a similar width to the main rectangle, and position this underneath. With this shape selected, open the <strong>Gradient<\/strong> palette and create a new gradient that has black on the left and right sides, with white in the centre. You can drag swatches from the <strong>Swatches<\/strong> palette on\u00a0to the <strong>Gradient<\/strong>\u00a0<strong>Slider<\/strong> to add these to your gradient.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-35573 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-1024x576.png\" alt=\"design-social-profile-ui-5\" width=\"625\" height=\"352\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5.png 2048w\" data-sizes=\"(max-width: 625px) 100vw, 625px\" 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-35573\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-1024x576.png\" alt=\"design-social-profile-ui-5\" width=\"625\" height=\"352\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-5.png 2048w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/noscript><\/p>\n<p>16. The next step is to go to <strong>Effect &gt; Blur &gt; Gaussian Blur<\/strong>, and specify a value for the desired amount of blur. The aim here is to create a \u2018floating shadow\u2019 for the main rectangle, and you can adjust the amount of blur accordingly. The overall opacity of this shadow can also be adjusted in the <strong>Transparency<\/strong> palette.<\/p>\n<p>17. Increase the height\/width of the main rectangle as required to add any other additional details. For example, this could be someone\u2019s Name, Job Title, or a Description etc.<\/p>\n<p>18. Select the main rectangle, and go to <strong>Effect &gt; Stylize &gt; Drop Shadow<\/strong>, to specify any\u00a0drop shadow settings.\u00a0Adding a subtle shadow can help create a little more distinction between the light grey background, and the white used for the\u00a0main rectangle.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-35574 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-1024x576.png\" alt=\"design-social-profile-ui-6\" width=\"625\" height=\"352\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6.png 2048w\" data-sizes=\"(max-width: 625px) 100vw, 625px\" 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-35574\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-1024x576.png\" alt=\"design-social-profile-ui-6\" width=\"625\" height=\"352\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-1024x576.png 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-500x281.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6-768x432.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/Learn-How-to-Design-a-Social-Profile-UI-in-Adobe-Illustrator-6.png 2048w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/noscript><\/p>\n<hr \/>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\nvar uri = 'https:\/\/impus.tradedoubler.com\/imp?type(js)g(22793580)a(2784243)' + new String (Math.random()).substring (2, 11);\ndocument.write('<sc'+'ript type=\"text\/javascript\" src=\"'+uri+'\" charset=\"ISO-8859-1\"><\/sc'+'ript>');\n\/\/ ]]><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;re going to learn how to design a social profile user interface (UI) in Adobe Illustrator. The Steps (1-18) 1. Create a new document, 3000 x 3000 pixels, with the colour mode set to &#8216;RGB.&#8217; 2. Using the Rectangle Tool, select a light grey and draw a four-sided shape that covers the [&hellip;]<\/p>\n","protected":false},"author":1899,"featured_media":35448,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7635,476,377,378,603,932,4,31,11,519,8031,8030,479,506],"tags":[615,21,66,8705,8711,8709,8021,8701,1685,9,7709],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/35439"}],"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=35439"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/35439\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/35448"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=35439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=35439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=35439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}