{"id":21359,"date":"2011-10-21T10:51:44","date_gmt":"2011-10-21T10:51:44","guid":{"rendered":"http:\/\/eagrapho.com\/?p=21359"},"modified":"2011-10-21T10:51:44","modified_gmt":"2011-10-21T10:51:44","slug":"create-a-beautiful-portfolio-landing-page-in-adobe-photoshop","status":"publish","type":"post","link":"https:\/\/eagrapho.com\/?p=21359","title":{"rendered":"Create A Beautiful Portfolio Landing Page In Adobe Photoshop"},"content":{"rendered":"<p style=\"font-family: arial, sans-serif; line-height: normal;\">In this tutorial we will be making an awesome, beautiful portfolio in Adobe Photoshop. The landing page will contain a header section, slider, an eye-catching about you text, what you do, a section for your current project, a footer that will contain about you, latest news, and latest tweets. This tutorial will be detailed so that beginners can follow through. Let\u2019s get started!<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Here is what we will be making, click on the image for a full preview:<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><a style=\"color: #2244bb;\" title=\"Preview\" href=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-fullsize.jpg\" target=\"_blank\"><img decoding=\"async\" class=\"quimby_search_image\" style=\"border-style: initial; border-color: initial;\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-preview.jpg\" alt=\"\" \/><\/a><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Resources for this tutorial<\/h2>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li><a style=\"color: #2244bb;\" title=\"Search\" href=\"http:\/\/browse.deviantart.com\/?qh=&amp;section=&amp;q=ademmm#\/d172dcg\" target=\"_blank\">Pattern<\/a><\/li>\n<li><a style=\"color: #2244bb;\" title=\"Social Icons\" href=\"http:\/\/www.iconfinder.com\/icondetails\/34127\/16\/feed_rss_icon?r=1\" target=\"_blank\">Social Icons<\/a><\/li>\n<li>Illustrations \u2013 Credits to\u00a0<a style=\"color: #2244bb;\" title=\"\" href=\"http:\/\/giorgos93.deviantart.com\/\" target=\"_blank\">giorgos93<\/a>.<\/li>\n<\/ul>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 1: Setting up the Document<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Start by creating a\u00a0<strong>1400px<\/strong>\u00a0x\u00a0<strong>1750px<\/strong>\u00a0document in Photoshop.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Ruler Tool<\/strong>\u00a0is very useful for this tutorial make sure that\u00a0<em>rulers<\/em>\u00a0and\u00a0<em>guides<\/em>\u00a0is turned on.<\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Rulers: Ctrl + R<\/li>\n<li>Guides: Ctrl + ;<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Also one important thing when using\u00a0<strong>Ruler Tool<\/strong>\u00a0is the\u00a0<strong>Info(Information) Panel<\/strong>. This is very useful when you are measuring using the ruler as the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to\u00a0<em>Windows \u2013 Info<\/em>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-1.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">The total width of this site will be\u00a0<strong>960px<\/strong>. So, let\u2019s create our first guide by going to\u00a0<em>View \u2013 New Guide<\/em>, set the value to\u00a0<strong>220px<\/strong>. Repeat the step of create a guide but now change the value to\u00a0<strong>1180px<\/strong>, this will make a total of<strong>960px<\/strong>\u00a0to the center of our canvas.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-2.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 2: Working on Background<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-3.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Fill the\u00a0<em>background<\/em>\u00a0layer with\u00a0<strong>#d8e4d6<\/strong>. Download the\u00a0<em>pattern<\/em>\u00a0from the resource above. Now, select\u00a0<strong>Paint Bucket Tool(G)<\/strong>\u00a0set it to\u00a0<em>pattern<\/em>\u00a0from the dropdown menu.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-4.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Select a pattern as shown in the screenshot below. Create a new layer above the background layer and fill it, and lastly set the blend mode to\u00a0<em>Soft Light<\/em>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-5.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Select\u00a0<strong>Rectangle Tool(U)<\/strong>, set the fill color to\u00a0<strong>#23353e<\/strong>. Create a\u00a0<strong>100%<\/strong>\u00a0by\u00a0<strong>330px<\/strong>\u00a0shape at the very top of the page.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-6.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Stroke: #1a272e<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-7.jpg\" alt=\"\" \/><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Drop Shadow: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-7-1.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Go to\u00a0<em>Filter \u2013 Convert for Smart Filters<\/em>, again go to\u00a0<em>Filter \u2013 Noise- Add Noise<\/em>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-8.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 3: Working on Header<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-9.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">The header section will contain a\u00a0<em>Logo<\/em>\u00a0and\u00a0<em>Navigation<\/em>. Remember it is important to organize your layers by naming and grouping them. I will leave it up to you how you organize and name your layers.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">First we will create a\u00a0<em>zigzag<\/em>\u00a0pattern the same as on the preview above. To create it create a new document size<strong>15px<\/strong>\u00a0by\u00a0<strong>15px<\/strong>, background to\u00a0<em>transparent<\/em>. Using\u00a0<strong>Pencil Tool (B)<\/strong>\u00a0fill color\u00a0<strong>#1a272e<\/strong>\u00a0create a shape a shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-10.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Go to\u00a0<em>Edit \u2013 Define Pattern<\/em>\u00a0name it\u00a0<em>zigzag<\/em>. Now, using\u00a0<strong>Rectangle Tool (U)<\/strong>\u00a0with the same fill with our pattern, create a\u00a0<strong>100%<\/strong>\u00a0by\u00a0<strong>20px<\/strong>\u00a0shape at the very top of the canvas.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-11.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Using\u00a0<strong>Rectangular Marquee Tool (M)<\/strong>\u00a0create a\u00a0<strong>100%<\/strong>\u00a0by\u00a0<strong>15px<\/strong>\u00a0selection and fill it with the pattern we made using\u00a0<strong>Paint Bucket Tool (G)<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Drop Shadow: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-12.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Result<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-13.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Logo<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-14.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">For the logo I used a font name\u00a0<strong>Lobster Two<\/strong>\u00a0that you can find on Google Fonts. Let\u2019s put up our site logo using<strong>Text Tool(T)<\/strong>, size\u00a0<strong>36pt<\/strong>, color\u00a0<strong>#fff<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-15.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Drop Shadow: #000<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-16.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Navigation<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-17.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">For the navigation I used the font\u00a0<strong>Museo<\/strong>\u00a0that can also be found on Google Fonts. Select\u00a0<strong>Text Tool (T)<\/strong>, Museo\u00a0<strong>700<\/strong>, size\u00a0<strong>16pt<\/strong>, color\u00a0<strong>#fff &amp; #67b256<\/strong>\u00a0and add this navigation links\u00a0<em>home, portfolio, blog, contact<\/em>.<\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 4: Working on Slideshow<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-18.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">The sideshow section will contain\u00a0<em>image preview, description, and controls<\/em>.<\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Image Preview<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">We need to create a base layer to hold the images for our image preview. To do this select\u00a0<strong>Rectangle Tool(U)<\/strong>and create a\u00a0<strong>960px<\/strong>\u00a0by\u00a0<strong>300px<\/strong>\u00a0shape.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-19.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Stroke: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-20.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Now that we have a base layer we will create a shadow on both corners so that it will pop up and have some depth. To create a shadow create a shape using\u00a0<strong>Pen Tool(P)<\/strong>\u00a0as shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-21.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Fill the shape with\u00a0<strong>#000<\/strong>. Go to\u00a0<em>Filter \u2013 Blur \u2013 Gaussian Blur<\/em>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-22.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Again go to\u00a0<em>Filter \u2013 Blur \u2013 Motion Blur<\/em>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-23.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">lastly set the layer\u00a0<em>Opacity<\/em>\u00a0to\u00a0<strong>50%<\/strong>.<\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Text Description<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Using\u00a0<strong>Text Tool(T)<\/strong>\u00a0add text as shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-24.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Slider Controls<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-25.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">To create the\u00a0<em>next &amp; previous<\/em>\u00a0buttons select\u00a0<strong>Rounded Rectangle Tool(U)<\/strong>\u00a0<em>Radius<\/em>\u00a0to\u00a0<strong>10px<\/strong>. Refer to the screenshot below for the guide.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-26.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Merge both shapes and resize it about\u00a0<strong>13px<\/strong>\u00a0by\u00a0<strong>21px<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Drop Shadow: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-27.jpg\" alt=\"\" \/><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Inner Shadow: #000<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-28.jpg\" alt=\"\" \/><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Color Overlay: #cce7df<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-29.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Duplicate the arrow and transform it on the other side. Change the\u00a0<em>Color Overlay<\/em>\u00a0to\u00a0<strong>#fff<\/strong>\u00a0and place it as shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-30.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Now that we have our\u00a0<em>previous &amp; next<\/em>\u00a0button, let\u2019s create the\u00a0<em>identifier \u201ccircles\u201d<\/em>\u00a0or what ever they call it. Using<strong>Ellipse Tool<\/strong>\u00a0create a\u00a0<strong>19px<\/strong>\u00a0by\u00a0<strong>19px<\/strong>\u00a0shape color\u00a0<strong>#cce7df<\/strong>. Apply the same\u00a0<em>Inner Shadow &amp; Drop Shadow<\/em>\u00a0as we did in our\u00a0<em>Previous &amp; Next<\/em>\u00a0buttons.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-31.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Make a selection of the circle by pressing\u00a0<strong>Ctrl + Click<\/strong>\u00a0to the vector mask thumbnail of the shape in the layers panel. Go to\u00a0<em>Select \u2013 Modify \u2013 Contract<\/em>. Contract it by\u00a0<strong>5px<\/strong>\u00a0and fill with\u00a0<strong>#fff<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-32.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Drop Shadow: #000<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-33.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Group the circles that we have just created and duplicate it 2 times. Select 1 of the circles and change the fill color to\u00a0<strong>#67b256<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-34.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 5: Working on About Text<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-35.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">To start let\u2019s create first the\u00a0<em>dashed<\/em>\u00a0lines pattern. Create a\u00a0<strong>20px<\/strong>\u00a0by\u00a0<strong>20px<\/strong>\u00a0<em>transparent<\/em>\u00a0document. Using\u00a0<strong>Pencil Tool(B)<\/strong>\u00a0color\u00a0<strong>#9b9b9b<\/strong>\u00a0create a shape as shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-36.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Name the pattern anything. Now, create a selection\u00a0<strong>960px<\/strong>\u00a0by\u00a0<strong>20px<\/strong>\u00a0and fill it with the pattern we just made. Duplicate the layer and apply a\u00a0<em>Color Overlay<\/em>\u00a0<strong>#fff<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-37.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Let\u2019s add our About text using\u00a0<strong>Text Tool(T)<\/strong>. After placing the text add a drop shadow color\u00a0<strong>#fff<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-38.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Make another selection\u00a0<strong>40px<\/strong>\u00a0below the text and repeat the step as we did in making our dashed lines. Delete the middle section of dashed lines. You may have something that looks like in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-39.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">We will be placing a cool shape on the middle. Select\u00a0<strong>Shape Tool(U)<\/strong>\u00a0and select a shape as shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-40.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Create that shape with the same fill color of our dashed lines and drop shadow.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-41.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 6: Working on What I Do<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-42.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">For this section we will just make a\u00a0<em>title<\/em>\u00a0header and a sample\u00a0<em>description<\/em>\u00a0about what you can offer. Also, we will be making a\u00a0<em>read more<\/em>\u00a0button. This section will be divided into 3 columns the width for each column will be<strong>300px<\/strong>\u00a0and the distance from each columns will be\u00a0<strong>30px<\/strong>\u00a0I\u2019ll leave you to create a guide for that.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Now, select\u00a0<strong>Text Tool(T)<\/strong>\u00a0and add a title header and a sample description, refer to the screenshot below for the format.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-43.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">For the read more button. Select\u00a0<strong>Rounded Rectangle Tool(U)<\/strong>, set the\u00a0<em>Radius<\/em>\u00a0to\u00a0<strong>3px<\/strong>\u00a0the color will be\u00a0<strong>#67b256<\/strong>. Create a button using it the size will be\u00a0<strong>90px<\/strong>\u00a0by\u00a0<strong>25px<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Inner Shadow: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-44.jpg\" alt=\"\" \/><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Stroke: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-45.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Result!<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-46.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Duplicate it twice and place it according to your guides.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-47.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 7: Working on My Current Projects<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-48.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">In this section we\u2019re obviously placing our most current projects. The header will be the same text format and color as we did in our what I do. Using\u00a0<strong>Text Tool(T)<\/strong>\u00a0place the header text\u00a0<strong>60px<\/strong>\u00a0below the\u00a0<em>read more<\/em>\u00a0button.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Select\u00a0<strong>Rectangle Tool(U)<\/strong>. For the images we will first make a base layer to hold the images, the size will be<strong>300px<\/strong>\u00a0by\u00a0<strong>150px<\/strong>. Place it\u00a0<strong>30px<\/strong>\u00a0below the header.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Outer Glow: #000<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-49.jpg\" alt=\"\" \/><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Stroke: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-50.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">After applying, duplicate it twice and place it accordingly.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-51.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 8: Working on Testimonials<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-52.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">This section will contain thumbnail\u00a0images of client work, testimonials, name, and a website url. For the\u00a0<em>image thumbnail<\/em>\u00a0create a base\u00a0<strong>90px<\/strong>\u00a0by\u00a0<strong>90px #fff<\/strong>\u00a0base shape using\u00a0<strong>Rectangle Tool(U)<\/strong>. Apply the same outer glow as we did in our current project. Place it as shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-53.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Add dummy text for testimonials, name and website url using\u00a0<strong>Text Tool(T)<\/strong>. Refer to the screenshot below for the format.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-54.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Step 9: Working on Footer<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-55.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Footer section will contain\u00a0<em>about, latest news, latest tweets, and copyright text<\/em>. First we will need to create our base layer, this is just a repeated steps as we did in our header section. Using\u00a0<strong>Rectangle Tool<\/strong>\u00a0color\u00a0<strong>#23353e<\/strong>cover the remaining section\u00a0<strong>80px<\/strong>\u00a0below the testimonials. Next, you will convert it to\u00a0<em>smart filters<\/em>\u00a0by going to<em>Filter \u2013 Convert for smart filters<\/em>, again go to\u00a0<em>Filter \u2013 Noise \u2013 Add noise 0.5%<\/em>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-56.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Make a selection using\u00a0<strong>Rectangle Marquee Tool(M)<\/strong>\u00a0and fill it with\u00a0<em>zigzag<\/em>\u00a0pattern. Rotate it vertically as shown in the screenshot below.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-57.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Still this footer section will be divided into three columns. 1st column is for the about section, 2nd for latest news, and 3rd for latest tweets.<\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">About Me<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-58.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">For the header the font and font color has change to\u00a0<strong>#fff<\/strong>\u00a0with a 1px\u00a0<strong>#000<\/strong>\u00a0<em>drop shadow<\/em>. The dummy text for about me the text format is\u00a0<strong>Droid Sans 13pt #a4afb4<\/strong>\u00a0and apply the same\u00a0<em>drop shadow<\/em>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">To create the image thumbnail first you should grab a\u00a0<strong>130px<\/strong>\u00a0by\u00a0<strong>160px<\/strong>\u00a0image.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Outer Glow: #000<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-59.jpg\" alt=\"\" \/><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Stroke: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-60.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Duplicate it twice and transform it by pressing\u00a0<strong>Ctrl + T<\/strong>\u00a0and rotate it a bit to the left and right.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-61.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Latest News<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-62.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">The same header and text. For the\u00a0<em>date<\/em>\u00a0and\u00a0<em>category<\/em>\u00a0color will be\u00a0<strong>667983<\/strong>, size\u00a0<strong>11pt<\/strong>. For the dividers color will be\u00a0<strong>#0f161a, #37515e<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-63.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Grab a copy of read more button, change the color to\u00a0<strong>#286065<\/strong>. Text wil be\u00a0<strong>#fff, #0f161a<\/strong>.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Change Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Stroke: #0f161a<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-64.jpg\" alt=\"\" \/><br \/>\n<strong>Result!<\/strong><br \/>\n<img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-65.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Latest Tweets<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-66.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">The same text format. Link color\u00a0<strong>#67b256<\/strong>.<\/p>\n<h2 style=\"font-family: arial, sans-serif; line-height: normal;\">Copyright<\/h2>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Using\u00a0<strong>Rectangle Tool(U)<\/strong>\u00a0color\u00a0<strong>#1a272e<\/strong>\u00a0create a\u00a0<strong>100%<\/strong>\u00a0by\u00a0<strong>70px<\/strong>\u00a0at the very bottom of the canvas. Apply a noise using the same step as we did to our base layer in our header and footer.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><strong>Apply this Blending Option<\/strong><\/p>\n<ul style=\"font-family: arial, sans-serif; line-height: normal;\">\n<li>Inner Shadow: #fff<\/li>\n<\/ul>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-67.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Using\u00a0<strong>Text Tool(T)<\/strong>\u00a0add your copyright text. Droid Sans\u00a0<strong>12pt<\/strong>\u00a0color\u00a0<strong>#667983<\/strong>. Also, add a 1px\u00a0<em>drop shadow<\/em>. Place this copyright text on the left side, on the other side duplicate a copy of the logo and place it at the bottom right side of our footer.<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><img decoding=\"async\" class=\"quimby_search_image\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-68.jpg\" alt=\"\" \/><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">Wew! Here is our Final Result!<\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\"><a style=\"color: #2244bb;\" title=\"Preview\" href=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-fullsize.jpg\" target=\"_blank\"><img decoding=\"async\" class=\"quimby_search_image\" style=\"border-style: initial; border-color: initial;\" src=\"http:\/\/www.1stwebdesigner.com\/wp-content\/uploads\/2011\/10\/artthatworks-tutorial-img-preview.jpg\" alt=\"\" \/><\/a><\/p>\n<p style=\"font-family: arial, sans-serif; line-height: normal;\">I hope you enjoyed and learned something from this tutorial. If you have questions just drop it below. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial we will be making an awesome, beautiful portfolio in Adobe Photoshop. The landing page will contain a header section, slider, an eye-catching about you text, what you do, a section for your current project, a footer that will contain about you, latest news, and latest tweets. This tutorial will be detailed so [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-21359","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/21359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21359"}],"version-history":[{"count":1,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/21359\/revisions"}],"predecessor-version":[{"id":21360,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/21359\/revisions\/21360"}],"wp:attachment":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=21359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=21359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}