Web & Mobile UI Tutorials in Photoshop & Illustrator

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.

UI Tutorials

Clean and Modern Pricing Table in Photoshop

ui tutorials Design a Clean and Modern Pricing Table in Photoshop

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.

Clean and Modern Pricing Table in Photoshop →

Create a Price Range Filter

ui tutorials Create a Price Range Filter

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.

Create a Price Range Filter →

Clean and Elegant Audio Player in Photoshop

ui tutorials Design a Clean and Elegant Audio Player in Photoshop

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.

Clean and Elegant Audio Player in Photoshop →

Slider UI Design with Photoshop

ui tutorials Create a Slider UI Design with Photoshop

This tutorial will show you how simple it is to create a simple, yet stylish slider in Photoshop.

Slider UI Design with Photoshop →

Create an Amplifier Interface

ui tutorials Create an Amplifier Interface

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.

Create an Amplifier Interface →

Simple Contact Form in Adobe Photoshop

ui tutorials Create a Simple Contact Form in Adobe Photoshop

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.

Simple Contact Form in Adobe Photoshop →

Create a Simple Audio Player Bar in Illustrator

ui tutorials Create a Simple Audio Player Bar in Illustrator

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.

Simple Audio Player Bar in Illustrator →

Mobile Player Interface

ui tutorials Mobile Player Interface

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.

Mobile Player Interface →

Awesome Interface for an iPad App

ui tutorials Awesome Interface for iPad App

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.

Awesome Interface for an iPad App →

iOS App Website Design Tutorial

iOS App Website Design Tutorial

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.

iOS App Website Design Tutorial →

Simple and Functional Promotional Mobile Apps Landing Page

Create Simple and Functional Promotional Mobile Apps Landing Page

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.

Simple and Functional Promotional Mobile Apps Landing Page →

Create an Administrator Dashboard Interface

Use New Features in Photoshop CS6 to Create an Administrator Dashboard Interface

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.

Create an Administrator Dashboard Interface →

Design a Business Web Layout

How to Design a Business Web Layout

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.

Design a Business Web Layout →

One-Page Retro Web Design Layout in Photoshop

Create a One-Page Retro Web Design Layout in Photoshop

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.

One-Page Retro Web Design Layout in Photoshop →

Clean Twitter App Interface in Photoshop

Create a Clean Twitter App Interface in 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.

Clean Twitter App Interface in Photoshop →

Vintage Portfolio Layout Using Photoshop

Design a Vintage Portfolio Layout Using Photoshop

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.

Vintage Portfolio Layout Using Photoshop →

Make a Beautiful Landing Page with Photoshop

How to Make a Beautiful Landing Page with Photoshop

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.

Make a Beautiful Landing Page with Photoshop →

Simple and Professional Looking Financial Website Layout

How to Create a Simple and Professionally Looking Financial Website Layout

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.

Simple and Professional Looking Financial Website Layout →

Author: (26 Posts)

Ada is a fulltime freelancer and enjoys every second of it. She is also the Blogger Relations Manager at WinkPress.com, which is a web resource about leveraging WordPress, its themes, and plugins to create versatile and unusual websites.

Comments