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 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:
- Photo Effect Tutorials
- Smoke Effect Tutorials
- Text Effect Tutorials
- Water Effect Tutorials
- Vintage and Aging Photo Effect 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.