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.
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 →
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 →
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 →
You will learn how to create a beautiful and clean music streaming website in Photoshop In this tutorial.
Music Streaming Website Design →
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 →
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 →
In this tutorial you will be shown how to create a clean corporate layout in Photoshop.
Clean and Colorful Web Layout →
Walk through this tutorial to create a cool and clean portfolio website layout with Photoshop.
Cool and Clean Portfolio Website Layout →
In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop.
Clean and Minimalistic Portfolio →
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 →
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 →
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 →
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 →
In this tutorial you will be taought how to create an Apple inspired web layout.
Apple Style Layout →
In this tutorial you will learn how to make a simple and clean layout for your iPhone application.
Simple iPhone Application Website 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 →
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 →
In this tutorial you’ll be shown you how to create an apple themed mobile app layout.
Mobile App's 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 →
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 →
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 →
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 →
Learn how to create a psd template that can be integrated easily with WordPress, Joomla or Drupal.
Artistic Website Layout →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
In this tutorial you will learn how to emulate the iPhones toggle switch in Photoshop
Designing The iPhone's Toggle Switch Interface Element →
A Photoshop tutorial explaining how to build a brushed aluminum knob for a graphical user interface (GUI).
Creating a Knob in Photoshop →
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 →
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 →
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 »