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.
Recommended Reading: 40+ Web Interface Design Photoshop Tutorials
More Photoshop tutorials:
- Photo Effect Tutorials
- Smoke Effect Tutorials
- Text Effect Tutorials
- Water Effect Tutorials
- Vintage and Aging Photo Effect Tutorials
A detailed tutorial with step-by-step illustrations on how to create a detailed Retina audio rotary knob UI element in Photoshop and Illustrator.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This short but clear tutorial will show you how to use Photoshop to create a modern pricing table in just 5 steps.
In this advanced Photoshop tutorial, you will learn how to create a realistic-looking pencil icon by using gradients, shadows, and transformation tools.
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.
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.
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.
Learn how to use Photoshop to create a flat, clean contact form in just 40 minutes. This tutorial is intended for beginner Photoshop users.