{"id":19211,"date":"2014-01-30T21:01:05","date_gmt":"2014-01-30T13:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19211"},"modified":"2023-04-01T18:52:23","modified_gmt":"2023-04-01T10:52:23","slug":"photoshop-ui-tutorials","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/","title":{"rendered":"20 UI Design Photoshop Tutorials That&#8217;ll Come in Handy"},"content":{"rendered":"<p>Using Photoshop to <strong>create captivating UI elements<\/strong> such as realistic-looking <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-icon-sets-to-bookmark\/\" rel=\"noopener noreferrer\">icons<\/a> and <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/weather-widgets-for-android-home-screens\/\" rel=\"noopener noreferrer\">widgets<\/a> is often a challenging task, especially for those who are still learning the ropes of <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trends-2014\/\" rel=\"noopener noreferrer\">UI\/UX design<\/a>. Many different factors have to be taken into consideration: the lighting, edges, shadows, and so on.<\/p>\n<p>Lucky for us, there are plenty of useful tutorials available online on how to create impressive user and web interface elements; and today, I would like to bring your attention to 20 of them. You can use these tutorials to spice up your website\u2019s design,  design a new <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/building-mobile-app-navigation-with-jquery\/\" rel=\"noopener noreferrer\">mobile app<\/a>, or simply to improve your <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/\" rel=\"noopener noreferrer\">Photoshop skills<\/a>.<\/p>\n<p><strong>More Photoshop tutorials:<\/strong><\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/41-nicest-photoshop-photo-effects-photoshop-tutorials\/\" rel=\"noopener noreferrer\">Photo Effect Tutorials<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/realistic-smoke-effect-photoshop-tutorials\/\" rel=\"noopener noreferrer\">Smoke Effect Tutorials<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/80-best-photoshop-text-effects-tutorials-part-iii\/\" rel=\"noopener noreferrer\">Text Effect Tutorials<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/droplet-water-effect-photoshop-tutorials\/\" rel=\"noopener noreferrer\">Water Effect Tutorials<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/40-incredibly-inspirational-retro-vintage-photoshop-tutorials\/\" rel=\"noopener noreferrer\">Vintage and Aging Photo Effect Tutorials<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/41-nicest-photoshop-photo-effects-photoshop-tutorials\/\" rel=\"noopener noreferrer\">more..<\/a><\/li>\n<\/ul>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medialoot.com\/blog\/how-to-create-a-detailed-audio-rotary-knob-control-in-photoshop-illustrator\/\">How to Create a Detailed Audio Rotary Knob Control<\/a><\/h3>\n<p>A detailed tutorial with step-by-step illustrations on how to create a detailed Retina audio rotary knob UI element in Photoshop and Illustrator.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/1-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"327\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webdesignerdepot.com\/2012\/04\/tutorial-how-to-design-a-chatroom-iphone-ui\/\"> How to Design a Chatroom iPhone UI<\/a><\/h3>\n<p>A comprehensive guide on how to create a chat-based app UI for iPhone. All the different Photoshop tools and layer styles included make it a worthwhile tutorial to use if you\u2019re looking to improve your Photoshop skills.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/2-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"574\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/1stwebdesigner.com\/flat-design-countdown-timer\/\">Create a Flat Countdown Timer<\/a><\/h3>\n<p>Learn how to design a countdown timer with this tutorial. You\u2019ll learn how to play around with colors, styles, and backgrounds to achieve unique results.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/3-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"316\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.tutsplus.com\/tutorials\/create-a-realistic-telephone-keypad-using-layer-styles--psd-14231\">Create a Realistic Telephone Keypad Using Layer Styles<\/a><\/h3>\n<p>Learn how to design a realistic-looking telephone keypad using layer styles and shape layers with this beginner-friendly Photoshop tutorial that will probably just take 30 minutes to complete.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/4-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"600\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/designmodo.com\/instagram-widget-psd\/?u=limhongkiat\">Create an Instagram Widget<\/a><\/h3>\n<p>This tutorial will show you how to design an attractive Instagram widget with Photoshop in just a half an hour. A good way to get more Instagram followers for your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/5-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"415\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.creativebloq.com\/app-design\/design-photorealistic-app-icon-photoshop-5132677\">Design a Photorealistic App Icon<\/a><\/h3>\n<p>Have you seen lots of realistic-looking <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/flat-mobile-app-icon\/\" rel=\"noopener noreferrer\">app icons<\/a> on <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/dribbble-freebie-psd-download\/\" rel=\"noopener noreferrer\">Dribble<\/a> before? Using layer masks and styles, this detailed step-by-step tutorial will show you how to design a record player <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/ios-app-icons\/\" rel=\"noopener noreferrer\">app icon<\/a> that will look just as realistic as those icons you\u2019ve seen on Dribble.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/6-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"336\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.tutsplus.com\/tutorials\/create-a-clean-twitter-app-interface-in-photoshop--psd-16171\">Create a Clean Twitter App Interface<\/a><\/h3>\n<p>An extremely detailed tutorial (more than 80 steps involved) on how to design a minimalist Twitter app interface. If you\u2019re thinking of becoming a mobile interface designer, this might be the best tutorial for you to start with.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/7-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"541\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/designbump.com\/design-a-glossy-coming-soon-boxlayout-in-photoshop\/\">Design a Glossy Coming Soon Box\/Layout<\/a><\/h3>\n<p>Learn how to use Photoshop to design a smooth and stylish \"<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/coming-soon-pages-doing-them-right\/\" rel=\"noopener noreferrer\">Coming Soon<\/a>\" layout that even comes with a <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/beautiful-progress-bars\/\" rel=\"noopener noreferrer\">loading bar<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/8-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"528\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medialoot.com\/blog\/realistic-takeout-coffee-icon\/\">How to Design a Realistic Takeout Coffee Icon<\/a><\/h3>\n<p>If you\u2019ve seen my previous showcase of <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/creative-coffee-cup-designs\/\" rel=\"noopener noreferrer\">beautiful coffee cup designs<\/a>, you can use this tutorial to learn how to create an attractive coffee cup design just like one of those featured in the showcase.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/9-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"605\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.tutsplus.com\/tutorials\/how-to-design-an-iphone-music-player-app-interface-with-photoshop-cs6--psd-21825\">How to Design an iPhone Music Player App Interface<\/a><\/h3>\n<p>In this intermediate-level tutorial, you will learn how to make use of several new features found in Photoshop CS6 to design a stylish iPhone <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/music-app-mobile-designs\/\" rel=\"noopener noreferrer\">music player app<\/a> UI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/10-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"600\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.tutsplus.com\/tutorials\/create-a-mobile-calendar-app-in-photoshop--psd-15058\">Create a Mobile Calendar App<\/a><\/h3>\n<p>In this 25-step tutorial, you will learn how to design a bright orange <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/mobile-calendar-designs\/\" rel=\"noopener noreferrer\">mobile calendar app<\/a> interface using Photoshop. This tutorial is intended for intermediate Photoshop users.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/11-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"646\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/designbump.com\/design-a-slider-with-ribbon-elements-in-photoshop-cs6\/\">Design a Slider with Ribbon Elements<\/a><\/h3>\n<p>Learn how to design a nice sleek slider with ribbons using Photoshop with this tutorial. It also features lots of useful tricks and techniques that may come in handy for you in the future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/12-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"400\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/designinstruct.com\/web-design\/design-a-slick-modern-pricing-table-ui-in-photoshop\/\">Design a Slick Modern Pricing Table UI<\/a><\/h3>\n<p>This short but clear tutorial will show you how to use Photoshop to create a modern pricing table in just 5 steps.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/13-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"456\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.tutsplus.com\/tutorials\/how-to-create-a-super-shiny-pencil-icon--psd-292\">How to Create a Super Shiny Pencil Icon<\/a><\/h3>\n<p>In this advanced Photoshop tutorial, you will learn how to create a realistic-looking pencil icon by using gradients, shadows, and transformation tools.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/15-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"376\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.creativebloq.com\/app-design\/design-ipad-app-ui-5132672\">Design an iPad App UI<\/a><\/h3>\n<p>This tutorial will teach you how to create a design for an iPad app by using grid structures and masking tools. You\u2019ll also learn how to develop different pages in a single document.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/17-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"336\" alt=\"UI design tutorials\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/designmodo.com\/contact-form-psd\/?u=limhongkiat\">Create a Simple Contact Form<\/a><\/h3>\n<p>Learn how to use Photoshop to create a flat, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/\" rel=\"noopener noreferrer\">clean contact form<\/a> in just 40 minutes. This tutorial is intended for beginner Photoshop users.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/20-useful-user-interface-tutorials-photoshop.jpg\" width=\"600\" height=\"600\" alt=\"UI design tutorials\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Using Photoshop to create captivating UI elements such as realistic-looking icons and widgets is often a challenging task, especially for those who are still learning the ropes of UI\/UX design. Many different factors have to be taken into consideration: the lighting, edges, shadows, and so on. Lucky for us, there are plenty of useful tutorials&hellip;<\/p>\n","protected":false},"author":124,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43,3395],"tags":[4102,1933],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 UI Design Photoshop Tutorials That&#039;ll Come in Handy - Hongkiat<\/title>\n<meta name=\"description\" content=\"Using Photoshop to create captivating UI elements such as realistic-looking icons and widgets is often a challenging task, especially for those who are\" \/>\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\/photoshop-ui-tutorials\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 UI Design Photoshop Tutorials That&#039;ll Come in Handy\" \/>\n<meta property=\"og:description\" content=\"Using Photoshop to create captivating UI elements such as realistic-looking icons and widgets is often a challenging task, especially for those who are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/\" \/>\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=\"2014-01-30T13:01:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-01T10:52:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/1-useful-user-interface-tutorials-photoshop.jpg\" \/>\n<meta name=\"author\" content=\"Nancy Young\" \/>\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=\"Nancy Young\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/\"},\"author\":{\"name\":\"Nancy Young\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\"},\"headline\":\"20 UI Design Photoshop Tutorials That&#8217;ll Come in Handy\",\"datePublished\":\"2014-01-30T13:01:05+00:00\",\"dateModified\":\"2023-04-01T10:52:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/\"},\"wordCount\":706,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/photoshop-ui-tutorials\\\/1-useful-user-interface-tutorials-photoshop.jpg\",\"keywords\":[\"Interface Design\",\"Photoshop Tutorials\"],\"articleSection\":[\"Photoshop\",\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/\",\"name\":\"20 UI Design Photoshop Tutorials That'll Come in Handy - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/photoshop-ui-tutorials\\\/1-useful-user-interface-tutorials-photoshop.jpg\",\"datePublished\":\"2014-01-30T13:01:05+00:00\",\"dateModified\":\"2023-04-01T10:52:23+00:00\",\"description\":\"Using Photoshop to create captivating UI elements such as realistic-looking icons and widgets is often a challenging task, especially for those who are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/photoshop-ui-tutorials\\\/1-useful-user-interface-tutorials-photoshop.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/photoshop-ui-tutorials\\\/1-useful-user-interface-tutorials-photoshop.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-ui-tutorials\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 UI Design Photoshop Tutorials That&#8217;ll Come in Handy\"}]},{\"@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\\\/943d20daf5b8c7638175cba309ef6e32\",\"name\":\"Nancy Young\",\"description\":\"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/nancy_young\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 UI Design Photoshop Tutorials That'll Come in Handy - Hongkiat","description":"Using Photoshop to create captivating UI elements such as realistic-looking icons and widgets is often a challenging task, especially for those who are","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\/photoshop-ui-tutorials\/","og_locale":"en_US","og_type":"article","og_title":"20 UI Design Photoshop Tutorials That'll Come in Handy","og_description":"Using Photoshop to create captivating UI elements such as realistic-looking icons and widgets is often a challenging task, especially for those who are","og_url":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-01-30T13:01:05+00:00","article_modified_time":"2023-04-01T10:52:23+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/1-useful-user-interface-tutorials-photoshop.jpg","type":"","width":"","height":""}],"author":"Nancy Young","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Nancy Young","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/"},"author":{"name":"Nancy Young","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32"},"headline":"20 UI Design Photoshop Tutorials That&#8217;ll Come in Handy","datePublished":"2014-01-30T13:01:05+00:00","dateModified":"2023-04-01T10:52:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/"},"wordCount":706,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/1-useful-user-interface-tutorials-photoshop.jpg","keywords":["Interface Design","Photoshop Tutorials"],"articleSection":["Photoshop","UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/","url":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/","name":"20 UI Design Photoshop Tutorials That'll Come in Handy - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/1-useful-user-interface-tutorials-photoshop.jpg","datePublished":"2014-01-30T13:01:05+00:00","dateModified":"2023-04-01T10:52:23+00:00","description":"Using Photoshop to create captivating UI elements such as realistic-looking icons and widgets is often a challenging task, especially for those who are","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/1-useful-user-interface-tutorials-photoshop.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/photoshop-ui-tutorials\/1-useful-user-interface-tutorials-photoshop.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-ui-tutorials\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 UI Design Photoshop Tutorials That&#8217;ll Come in Handy"}]},{"@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\/943d20daf5b8c7638175cba309ef6e32","name":"Nancy Young","description":"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.","url":"https:\/\/www.hongkiat.com\/blog\/author\/nancy_young\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4ZR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19211","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\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19211"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19211\/revisions"}],"predecessor-version":[{"id":65517,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19211\/revisions\/65517"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19211"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}