20 UI Design Photoshop Tutorials That’ll Come in Handy

By Nancy Young. in Photoshop. Updated on April 1, 2023.

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 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’s design, design a new mobile app, or simply to improve your Photoshop skills.

More Photoshop tutorials:

How to Create a Detailed Audio Rotary Knob Control

A detailed tutorial with step-by-step illustrations on how to create a detailed Retina audio rotary knob UI element in Photoshop and Illustrator.

How to Design a Chatroom iPhone UI

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’re looking to improve your Photoshop skills.

Create a Flat Countdown Timer

Learn how to design a countdown timer with this tutorial. You’ll learn how to play around with colors, styles, and backgrounds to achieve unique results.

Create a Realistic Telephone Keypad Using Layer Styles

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.

Create an Instagram Widget

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.

Design a Photorealistic App Icon

Have you seen lots of realistic-looking app icons on Dribble before? Using layer masks and styles, this detailed step-by-step tutorial will show you how to design a record player app icon that will look just as realistic as those icons you’ve seen on Dribble.

Create a Clean Twitter App Interface

An extremely detailed tutorial (more than 80 steps involved) on how to design a minimalist Twitter app interface. If you’re thinking of becoming a mobile interface designer, this might be the best tutorial for you to start with.

Design a Glossy Coming Soon Box/Layout

Learn how to use Photoshop to design a smooth and stylish "Coming Soon" layout that even comes with a loading bar.

How to Design a Realistic Takeout Coffee Icon

If you’ve seen my previous showcase of beautiful coffee cup designs, you can use this tutorial to learn how to create an attractive coffee cup design just like one of those featured in the showcase.

How to Design an iPhone Music Player App Interface

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 music player app UI.

Create a Mobile Calendar App

In this 25-step tutorial, you will learn how to design a bright orange mobile calendar app interface using Photoshop. This tutorial is intended for intermediate Photoshop users.

Design a Slider with Ribbon Elements

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.

Design a Slick Modern Pricing Table UI

This short but clear tutorial will show you how to use Photoshop to create a modern pricing table in just 5 steps.

How to Create a Super Shiny Pencil Icon

In this advanced Photoshop tutorial, you will learn how to create a realistic-looking pencil icon by using gradients, shadows, and transformation tools.

Design an iPad App UI

This tutorial will teach you how to create a design for an iPad app by using grid structures and masking tools. You’ll also learn how to develop different pages in a single document.

Create a Simple Contact Form

Learn how to use Photoshop to create a flat, clean contact form in just 40 minutes. This tutorial is intended for beginner Photoshop users.