20 UI Design Photoshop Tutorials That’ll Come in Handy

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 andweb interface element; 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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
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.

UI design tutorials
Create a Clean Login Form

Learn how to use Photoshop to design a simple login form that has a huge side button with this tutorial. A PSD file is also provided in the tutorial.

UI design tutorials
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.

UI design tutorials
Design a Clean and Modern Pinboard Widget

This tutorial will teach you how to create a clean, minimalist pinboard widget for featuring the most popular posts – handy for bloggers of any kind.

UI design tutorials
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.

UI design tutorials
Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail