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.
Recommended Reading: 40+ Greatest Web Interface Design Photoshop Tutorials
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
- more..
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 – iOS 7 Inspired. Learn how to design a iOS 7-inspired 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 (CS6). 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.
Build a Slick Rich User Interface. A comprehensive tutorial that guides you on how to use Photoshop to create a rich and stylish UI with a realistic-looking LED screen. Throughout the tutorial, you will learn a number of complex Photoshop techniques.
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.
Create a Clean Web 2.0 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.
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.
Design a Calendar Widget. Learn how to create a simple but cool Calendar widget with this easy-to-follow tutorial that has lots of illustrations.
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.
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.
     |