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 layout tutorials for Photoshop, 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.
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.
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.
You will learn how to create a beautiful and clean music streaming website in Photoshop In this tutorial.
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.
Learn how to create a super professional portfolio web design through a number of techniques including lighting effects, blending options, and general design theory.
In this tutorial you will be shown how to create a clean corporate layout in Photoshop.
Walk through this tutorial to create a cool and clean portfolio website layout with Photoshop.
In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop.
In this detailed tutorial you’re going to learn how to create a web 2.0 layout using the 960.gs.
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.
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.
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.
In this tutorial you will be taought how to create an Apple inspired web layout.
In this tutorial you will learn how to make a simple and clean layout for your iPhone application.
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.
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).
In this tutorial you’ll be shown you how to create an apple themed mobile app layout.
You will be shown how to easilys to create a clean business layout that can be used for any CMS you like.
In this tutorial you'll create a clean business layout that would be perfect for a WordPress theme, oras a portfolio layout.
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.
Learn how to create a psd template that can be integrated easily with WordPress, Joomla or Drupal.
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.
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.
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.
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).
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.
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.
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.
In this Tutorial you’ll learn how to create iPhone- like buttons in Photoshop. This is very simple and yet effective tutorial.
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).
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.
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.
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.