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 in Photoshop.
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.
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
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.
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
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
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
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 is multiple ways 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
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
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.
Awesome Interface for an 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
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
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
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
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
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
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
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
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
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 →
Archived Tutorials
Textured Web Layout
In this tutorial you’ll be shown how to create a textured web layout, starting from the concept on paper, leading on to the Photoshop design and you will use the 960 grid to organize the layout. Also you will learn how to use layer styles to create an engraved text effect.
Clean Web Layout with the 960 Grid
In this tutorial, you’ll be designing a clean website layout using the 960 Grid System. You’ll see how working with this system can streamline web development workflow, and how to work with a grid system.
Clean Web Layout with the 960 Grid →
Stylish Blog Design Layout
This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.
Music Streaming Website Design
You will learn how to create a beautiful and clean music streaming website in Photoshop In this tutorial.
Music Streaming Website Design →
Modern Portfolio Layout
Learn how to design a modern portfolio layout, utilizing techniques such as a unique lighting-effect text effect, a cool background pattern and design attractive calls to action buttons.
Professional Portfolio Web Layout
Learn how to create a super professional portfolio web design through a number of techniques including lighting effects, blending options, and general design theory.
Professional Portfolio Web Layout →
Clean and Colorful Web Layout
In this tutorial you will be shown how to create a clean corporate layout in Photoshop.
Clean and Colorful Web Layout →
Clean and Minimalistic Portfolio
In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop.
Clean and Minimalistic Portfolio →
Professional Web 2.0 Layout
In this detailed tutorial you’re going to learn how to create a web 2.0 layout using the 960.gs.
Designing a Highly-Professional Website
You will learn how to design a super-professional and very clean website for a fictional Architecture studio, attempting to reproduce the websites main objectives of the studio: elegance, simplicity, rhythm and professionalism.
Designing a Highly-Professional Website →
Clean Portfolio Layout
In this Photoshop tutorial you will be shown how to build a layout to create a website for a web designer or a small web agency.
Clean Portfolio Layout →
Simple iPhone Application Website Layout
In this tutorial you will learn how to make a simple and clean layout for your iPhone application.
Simple iPhone Application Website Layout →
iPhone App Layout
This tutorial will guide you trough the steps of a complete and beautiful layout for an iPhone App web site. Along the way, you`ll learn how to create nice iPhone inspired effects and you`ll play a bit with some blending options and you`ll integrate some custom graphics which will beautify the layout.
Drupal PSD Layout
You will be shown how to easilys to create a clean business layout that can be used for any CMS you like.
Finished!
Web design trends change, and they change regularly. As such, it is very important that a designer stays on top of the game, and their UI designs reflect modern design demands. What was design relevant a couple of years will more than likely not be relevant now. It is the web designers responsibility to know what the current design trends are and have the necessary skills and tools to implement them in relation to the project. These will help you stay on top of the game.
