{"id":361,"date":"2007-02-13T09:21:00","date_gmt":"2007-02-13T01:21:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/2007\/02\/12\/sketch-web-20-interface-in-photoshop\/"},"modified":"2017-11-08T21:44:06","modified_gmt":"2017-11-08T13:44:06","slug":"sketch-web-20-interface-in-photoshop","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/","title":{"rendered":"Design Web 2.0 Interface in Photoshop"},"content":{"rendered":"<p>Understanding the tutorial below is understanding it\u2019s technique, with it you can draw yourself some graphical user interface for a website. <strong>Side navigation<\/strong>, <strong>buttons<\/strong>, <strong>headers<\/strong>, for instance. All Web 2.0 style.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/1-3.jpg\"><\/p>\n<p>Launch a new canvas; any size. Something bigger than 450x300px would be good. Select the <strong>Rounded Rectangular Tool<\/strong> and draw a rectangular as big as shown in the image above.<\/p>\n<hr>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/2-3.jpg\"><\/p>\n<p>Double click on the layer of the Rounded Rectangular to launch the <strong>Blending Options<\/strong>. Alter the settings for the following styles.<\/p>\n<p>\n<strong>Drop Shadow<\/strong><\/p>\n<blockquote><p>\nOpacity:31%\nDistance:1px\nSpread:0%\nSize:5px\n<\/p><\/blockquote>\n<p><strong>Bevel and Emboss<\/strong><\/p>\n<blockquote><p>\nDepth:100%\nSize:0px\nSoften:0px\n<\/p><\/blockquote>\n<p><strong>Gradiant Overlay<\/strong><\/p>\n<blockquote><p>\nDouble click Gradiant and set the following stop points.\nLocation:0%, #1378cd\nLocation:100% #4da5f0\n<\/p><\/blockquote>\n<p><strong>Stroke<\/strong><\/p>\n<blockquote><p>\nSize:5px\nPosition:Inside\nColor:#54abf6\n<\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/3-1.jpg\"><\/p>\n<p>Let\u2019s insert some text, a tagline, URL or something. Have it middle and align right so logo can reside on the left side later. Let\u2019s style the text. I\u2019m using Lucida Sans Unicode; 55pt; smooth; -120 for character tracking (letter spacing). Double click on text layer and set the following in <strong>Blending Options<\/strong>.<\/p>\n<p>\n<strong>Gradient Overlay<\/strong><\/p>\n<blockquote><p>\nDouble click Gradiant and set the following stop points.\nLocation:0%, #9ec7eb\nLocation:100% ecf6ff\n<\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/4-1.jpg\"><\/p>\n<p>You will then need to insert the logo on the left side of the text. I\u2019ll use a rounded rectangular with radius 5px to represent the logo. Here\u2019s the <strong>Blending Option<\/strong> settings for the rounded rectangular.<\/p>\n<p>\n<strong>Inner Shadow<\/strong><\/p>\n<blockquote><p>\nOpacity:45%\nDistance:0px\nSize:43px;\n<\/p><\/blockquote>\n<p><strong>Bevel and Emboss<\/strong><\/p>\n<blockquote><p>\nDepth:100%\nSize:0px\nSoften:0px\nHighlight Mode Opacity:50%\nShadowMode Opacity:100%\n<\/p><\/blockquote>\n<p><strong>Gradiant Overlay<\/strong><\/p>\n<blockquote><p>\nDouble click Gradiant and set the following stop points.\nLocation:0% #0e2f4a\nLocation:47% #001a31\nLocation:48% #002545\nLocation:100% #0f4b7f\n<\/p><\/blockquote>\n<p><strong>Stroke<\/strong><\/p>\n<blockquote><p>\nSize:5px\nDouble click Gradiant and set the following stop points.\nLocation:0% #1468af\nLocation:100% #50abf8\n<\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/5-2.jpg\"><\/p>\n<p>Let\u2019s give it a little glossy effect. Hold <strong>CTRL<\/strong> and left click on rounded rectangular <strong>Layer Thumbnail<\/strong>. When the entire rounded rectangular is selected, changed to <strong>Rectangular Marquee tool<\/strong>, hold <strong>ALT<\/strong> and draws-out the second half of the selected area; just like the image above.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/6-1.jpg\"><\/p>\n<p>Create a new layer; Drag it up so it sits on top of all layers; fill the selected part with white [#ffffff]; change the opacity to 15%.<\/p>\n<p>The tutorial will end here. How you going to make use of this design is entirely up to you. By slightly changing it\u2019s size and colors, it can be used as a web header or buttons. Here\u2019s some example.<\/p>\n<p><strong>Website Header<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/7-1.jpg\"><\/p>\n<p><strong>Website Buttons<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/8-1.jpg\"><\/p>\n<div class=\"download\"><a href=\"https:\/\/assets.hongkiat.com\/uploads\/web20.zip\">Download tutorial<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Understanding the tutorial below is understanding it\u2019s technique, with it you can draw yourself some graphical user interface for a website. Side navigation, buttons, headers, for instance. All Web 2.0 style. Launch a new canvas; any size. Something bigger than 450x300px would be good. Select the Rounded Rectangular Tool and draw a rectangular as big&hellip;<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43],"tags":[1933,1938],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design Web 2.0 Interface in Photoshop - Hongkiat<\/title>\n<meta name=\"description\" content=\"Understanding the tutorial below is understanding it&#039;s technique, with it you can draw yourself some graphical user interface for a website. Side\" \/>\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.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Web 2.0 Interface in Photoshop\" \/>\n<meta property=\"og:description\" content=\"Understanding the tutorial below is understanding it&#039;s technique, with it you can draw yourself some graphical user interface for a website. Side\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2007-02-13T01:21:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-08T13:44:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/1-3.jpg\" \/>\n<meta name=\"author\" content=\"Hongkiat.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat.com\" \/>\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.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/\"},\"author\":{\"name\":\"Hongkiat.com\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7cc686597d92f9086729e4bcc1577ba3\"},\"headline\":\"Design Web 2.0 Interface in Photoshop\",\"datePublished\":\"2007-02-13T01:21:00+00:00\",\"dateModified\":\"2017-11-08T13:44:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/\"},\"wordCount\":415,\"commentCount\":55,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/1-3.jpg\",\"keywords\":[\"Photoshop Tutorials\",\"Photoshop UI effects\"],\"articleSection\":[\"Photoshop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/\",\"name\":\"Design Web 2.0 Interface in Photoshop - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/1-3.jpg\",\"datePublished\":\"2007-02-13T01:21:00+00:00\",\"dateModified\":\"2017-11-08T13:44:06+00:00\",\"description\":\"Understanding the tutorial below is understanding it's technique, with it you can draw yourself some graphical user interface for a website. Side\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/1-3.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/1-3.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-web-20-interface-in-photoshop\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Web 2.0 Interface in Photoshop\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7cc686597d92f9086729e4bcc1577ba3\",\"name\":\"Hongkiat.com\",\"description\":\"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design Web 2.0 Interface in Photoshop - Hongkiat","description":"Understanding the tutorial below is understanding it's technique, with it you can draw yourself some graphical user interface for a website. Side","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.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/","og_locale":"en_US","og_type":"article","og_title":"Design Web 2.0 Interface in Photoshop","og_description":"Understanding the tutorial below is understanding it's technique, with it you can draw yourself some graphical user interface for a website. Side","og_url":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2007-02-13T01:21:00+00:00","article_modified_time":"2017-11-08T13:44:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/1-3.jpg","type":"","width":"","height":""}],"author":"Hongkiat.com","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat.com","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/"},"author":{"name":"Hongkiat.com","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7cc686597d92f9086729e4bcc1577ba3"},"headline":"Design Web 2.0 Interface in Photoshop","datePublished":"2007-02-13T01:21:00+00:00","dateModified":"2017-11-08T13:44:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/"},"wordCount":415,"commentCount":55,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/1-3.jpg","keywords":["Photoshop Tutorials","Photoshop UI effects"],"articleSection":["Photoshop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/","url":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/","name":"Design Web 2.0 Interface in Photoshop - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/1-3.jpg","datePublished":"2007-02-13T01:21:00+00:00","dateModified":"2017-11-08T13:44:06+00:00","description":"Understanding the tutorial below is understanding it's technique, with it you can draw yourself some graphical user interface for a website. Side","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/1-3.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/1-3.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-web-20-interface-in-photoshop\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Design Web 2.0 Interface in Photoshop"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7cc686597d92f9086729e4bcc1577ba3","name":"Hongkiat.com","description":"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/com\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5P","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=361"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/361\/revisions"}],"predecessor-version":[{"id":39388,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/361\/revisions\/39388"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=361"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}