Modern UI and Layout Tutorials for Photoshop

It would be very hard to find a situation where Photoshop does not have the perfect solution for any web (or print) design problem. With Photoshop you can pretty much design a web page just as you envisaged mentally, with virtually no creative restrictions and with a pixel-perfect result.

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.

In this article we have a huge collection of current web design Photoshop tutorials, that covers not only web page layouts, but also web app layouts, mobile UI and we have also included some of those tricky to design elements such as buttons, search boxes, headers and footers.

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.
Textured Web Layout →

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.
Stylish Blog Design Layout →

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.
Modern Portfolio Layout →

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 →

Cool and Clean Portfolio Website Layout

Walk through this tutorial to create a cool and clean portfolio website layout with Photoshop.
Cool and Clean Portfolio Website 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.
Professional Web 2.0 Layout →

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 →

Designing A Membership Site

The idea for this design was to create a membership area for the software WishList Membership which is a WordPress plugin, however the design could be used for any membership site or even a blog, if you get the right coder.
Designing A Membership Site →

Apple Style Layout

In this tutorial you will be taought how to create an Apple inspired web layout.
Apple Style 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.
iPhone App Layout →

Soft Portfolio Layout

You will learn how to create a soft portfolio template using some warm colors. This psd layout can be used not only for a portfolio, but in the same time can be used to showcase your product (an ebook, a script, a software, etc).
Soft Portfolio Layout →

Mobile App's Layout

In this tutorial you’ll be shown you how to create an apple themed mobile app layout.
Mobile App's Layout →

Joomla or Drupal Layout

Joomla or Drupal 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.
Drupal PSD Layout →

Ecommerce Theme for Magento or Prestashop

In this tutorial you will be taught how to create a nice theme for an ecommerce website (Magento or Prestashop) using Photoshop. This psd template can be used to create a women clothing shop.
Ecommerce Theme for Magento or Prestashop →

Sleek WordPress Theme in Photoshop

In this tutorial you'll create a clean business layout that would be perfect for a WordPress theme, oras a portfolio layout.
Sleek WordPress Theme in Photoshop →

Create a WordPress Theme in Photoshop

You will create an WordPress theme which can be used for a personal blog, but at the same time for a variety of blogs such as business, showcase your product/services, etc.
Create a WordPress Theme in Photoshop →

Artistic Website Layout

Learn how to create a psd template that can be integrated easily with WordPress, Joomla or Drupal.
Artistic Website Layout →

Creative Blog Footer

Creative Blog Footer →

Twitter Box User Interface Design

Twitter Box User Interface Design →

Eye Popping Dialogue Boxes

Eye Popping Dialogue Boxes →

Calculator UI Tutorial

Calculator UI →

Clean and Fresh Call-to-Action Button

In this tutorial, you will be shown how simple it is to create effective, clean and fresh call-to-action button that will surely attract visitor’s attention, plus a super quick way to create this trendy Embossing text effect in Photoshop.
Clean and Fresh Call-to-Action Button →

Creative Button Animations with Sprites

This tutorial will show you how to build creative hover animations for buttons using sprites. Part 1 of this tutorial explains the design process in Photoshop. In Part 2 we will convert it to XHTML + CSS.
Creative Button Animations with Sprites →

Noise and Textures

Adding subtle noise or texture to UI elements can look great, but what’s the best way to do it? The goal is to find the best method that maintains quality when scaled, but is also easy to implement and edit.
Noise and Textures →

Create a Slick and Clean Button

This Photoshop tutorial shows you how to create a simple and clean "Web 2.0 style" button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).
Create a Slick and Clean Button →

Clean and Sleek Buttons

Clean and Sleek Buttons →

Recreate Tabloid Style Headers

The act of news reading has largely moved from paper to screen, thanks to the internet. This doesn’t mean that newspapers are dead, its familiar aesthetics can simply take new life in modern-day newspapers: blogs and websites. Bold titles, catchy sub-headers, taglines and graphic styles yield
Recreate Tabloid Style Headers →

How to Redesign the Spendometer iPhone App

This tutorial series will demonstrate all the steps necessary for redesigning an iPhone application with Photoshop. You will learn many of the unique considerations and design patterns used when creating stand-out app interfaces.
How to Redesign the Spendometer iPhone App →

Crafting Subtle & Realistic User Interfaces

If you're trying to design a realistic-looking user interface element then you have to think about what that object would look like in the real world. What's the easiest way to do that? Look at it from the side. What would a button look like if you viewed it from the side of your monitor? Let's take a look.
Crafting Subtle & Realistic User Interfaces →

Menu Interface for a Fantasy Themed iPhone Game

In this tutorial, you’ll create a main menu interface for a fictional iPhone game. You’ll go through setting up Photoshop to accurately display target screen size, setting up a wire frame for the project, creating a background, making a logo, creating rock texture for the sidebar, and wood texture for the saved games-box and buttons.
Menu Interface for a Fantasy Themed iPhone Game →

How to Create iPhone Like Button in Photoshop

In this Tutorial you’ll learn how to create iPhone- like buttons in Photoshop. This is very simple and yet effective tutorial.
How to Create iPhone Like Button in Photoshop →

Designing The iPhone's Toggle Switch Interface Element

In this tutorial you will learn how to emulate the iPhones toggle switch in Photoshop
Designing The iPhone's Toggle Switch Interface Element →

Creating a Knob in Photoshop

A Photoshop tutorial explaining how to build a brushed aluminum knob for a graphical user interface (GUI).
Creating a Knob in Photoshop →

iPhone-Like Button in Photoshop Tutorial

Here’s a tutorial on how you can design an iPhone-like (or Apple-like, if you will) button in Photoshop. You can quickly learn how to design the button even if you don’t consider yourself very skilled in PS.
iPhone-Like Button in Photoshop Tutorial →

How to Create a Realistic iPhone

In this tutorial you are going to learn how to create a realistic iPhone image in Photoshop.The only necessary skills to get through this tutorial is the basic knowledge of how to use the most common tools in Photoshop.
How to Create a Realistic iPhone →

How to Create an iPhone Icon: Full Workflow

In this detailed tutorial you’ll be shown how to create an iPhone icon from scratch using Photoshop’s vector shapes, layer styles and masks. Starting from a hand drawn sketch you’ll proceed to create the high resolution icon for iTunes. Finally you’ll be taken through the necessary steps to re-size the icon by hand in order to create the remaining sizes for the Home Screen and Spotlight searches.
How to Create an iPhone Icon: Full Workflow →

You might also like…

40 Professional and Detailed Web Layout PSD Templates »
Android App Developers GUI Kits, Icons, Fonts and Tools »
Complete Collection of Blank T-Shirt Mockup Templates »
iPhone and iPad Development GUI Kits, Stencils and Icons »
A Round-Up of 50 Fresh Photoshop Tutorials and Techniques »
40 Detailed and High Quality Mobile Phone .psd Source Files »
50 High Quality Free Icon Sets in PSD Format »
49 Most Creative Photoshop Tutorials of 2009 »