Photoshop can be used for many purposes and one of the most common uses is for designing web and mobile User Interfaces (UI). Here are some UI tutorials that will teach you how to design complete sites and various site elements mainly in Photoshop, and also a couple making use of Illustrator. First we’ll start with separate UI elements, such as price tables, drop down menus, sliders, audio players, etc. and then we’ll move on to designing complete sites.
For any site that sells goods or services, a pricing table is a nice addition because it allows to show users at a glance what you sell and at what price. If you want to learn how to design a clean and modern pricing table in Photoshop, check this tutorial.
This tutorial uses Illustrator to create a price range filter. There are only 18 steps to follow and the tutorial itself is pretty straightforward and simple, so if you are intermediate in Illustrator, don’t be afraid to try it.
Audio players might look very simple to create but when your are designing them for the first time, you might have a hard time doing it. This tutorial walks you step by step through the process and at the end you will have a beautiful audio player.
This tutorial will show you how simple it is to create a simple, yet stylish slider in Photoshop.
Creating an amplifier interface might look like rocket science even to designers with some experience, but this tutorial explains it so well that it actually looks like a piece of cake. The interface has all controls, buttons, bars, sparkles, gradients, etc. and the best part is that it starts from scratch – i.e. you won’t need any third-party stuff with unclear rights, you design everything that you need.
While in many cases (i.e. when you use the same template for all your site pages) you can go without creating a separate contact form, if you want to have such a form, you can create its layout in Photoshop. There are multiple way to do it and one of them is described in detail in this tutorial. The tasks to perform are simple, so even if you are a beginner, you can do it.
I know audio players are hardly the most commonly used UI element but since the player in this tutorial looks awesome, I included it in this list. This tutorial uses Illustrator – you could do a similar player in Photoshop or any other design program, but with Illustrator it’s much easier. If you are not familiar with pixel perfect vector shape building techniques, you will have the chance to learn about them in this tutorial.
After all the UI components we have covered so far and while we are still on the player wave, this tut will show you how to design a mobile player interface. This is a more advanced tutorial than the others because in addition to a player bar, it comes with plenty of controls and lists, so be prepared, it might take longer than the other tutorials.
Designing iPad applications does require some familiarity with the look and feel of the iPad interface, so if you lack these, it might be harder for you to follow this tutorial. Anyway, the tutorial explains very well what to do, so even if you are not an iPad interface expert, you will still be able to make it.
Now, this is one big tutorial (as is the image that accompanies it)! Unlike the other tutorials, this is an hour long video tutorial. If you are looking for a quick tutorial, this isn’t one – with all the rewinding back and forward, it might take you 3 to 4 or even more hours to complete but the end result – a crisp looking iOS App brochure website – is definitely worth it.
Mobile apps are all the rage this season, so if you want to design a mobile apps landing page, here is how. This tutorial explains in detail how to create a landing page for a restaurant app but needless to say, with some modifications you can use it for any type of app.
I bet most designers might never have to design an admin dashboard interface but if you do, here is a great tutorial that teaches you step by step how to do it. Similarly to the previous tutorial, it doesn’t start from scratch but uses third party resources. You can bypass this and use only your own stuff but this will drastically increase the time you need to design the interface.
Business sites are among the most common type of sites and even though there are thousands of free templates you can use as a foundation, if you want to design a business layout from scratch, you might want to check this tutorial.
Vintage and retro designs are always in fashion. The design in the tutorial may be called retro but in fact it looks quite modern. Similarly to the other tutorials where complete sites are designed, this one will take you a couple of hours to complete. In addition to familiarity with Photoshop, you will also need some Illustrator skills because some of the shapes used in the tutorial are easier to create with Illustrator than with Photoshop.
This is another pixel perfect tutorial that uses layer styles and basic vector shapes to create a clean Twitter app interface. Since you will be designing a complete app interface, don’t expect the tutorial to be short and fast. This tutorial is huge – it has more than 80 steps to complete, so you’d better devote at least half a day to it. There are many details you need to pay attention to and the good news is that they are explained very well.
If you want to combine a vintage style with your portfolio, then this tutorial is for you. The design is especially good if your portfolio consists of images, videos, and other kinds of graphics because the design is centered around them. The design is clean and minimalistic and if your Photoshop skills are intermediate or better, you won’t have problems recreating it.
This is one more landing page tutorial. It isn’t as minimalistic as the first one but still you wouldn’t call it cluttered. I personally don’t like the large header, but since tastes differ, I am sure many people will love this detail, or you can replace it with a smaller image – this doesn’t change the essence of the tutorial.
Financial sites are considered to be serious and boring, but doesn’t have to be so. The financial site design in this tutorial is simple, stylish, and anything but boring. To complete it, you will need not only plenty time and intermediate Photoshop skills, but also a bunch of images, icons, and gradients, so maybe it’s best if you prepare them before you start.