50+ Excellent Tutorials for Creating Website Layouts in Photoshop
If you’re looking to learn more about web design or to improve your skills, following along with detailed, step-by-step tutorials can be a great use of your time. While there are a lot of resources and courses where you can pay to learn design, there are also plenty of quality tutorials available for free.
In this post we’ll showcase 50 different tutorials that we feel are the best at showing you how to design and layout a simple website in Photoshop. You’ll find tutorials that teach how to design all different kinds of sites, and in a wide variety of design styles. Find a few that you like, work through them, and you’re sure to learn at least a few new things that you can put into practice in your own design work.
Create a One-Page Retro Web Design Layout in Photoshop
One-page sites are a popular choice for portfolio websites, and this tutorial shows you how to design an excellent one-page layout.
Design a Textured Outdoors Website in Photoshop
Design a Clean Sports Web Layout in Magazine Style with Photoshop
Learn how to design a layout that would work well with a news site or blog in this tutorial.
How to Create a Distinguishable Textured Web Layout in Photoshop
The soft textured background, bold typography, and simple layout give this site an attractive appearance.
Design a Sleek, Dark Mobile App Website
This tutorial is kind of unique because it shows the process of desiging a real-world site for an actual app, rather than a fictional sample website.
Create a Clean Website Layout
Sometimes the simplest designs are the ones that are the most effective. This tutorial shows you how to create a basic design and layout that will work well for a lot of different types of businesses and websites.
Design a Clean Landing Page Template in Photoshop
This landing page features a fairly typical layout that you could use with any number of different types of sites.
Design a Minimalist Tumblr Theme Layout in Photoshop
Learn how to design a microblogging template by following this step-by-step tutorial.
Learn How to Create a Stylish Photography Web Layout
This dark design can help to make photos pop, and you’ll learn how to create it in this tutorial.
Design an Innovative Portfolio Site Using Alternative UI/UX
With this tutorial you’ll be able to design a unique portfolio site that can help you to stand out from the crowd.
Design a Stylish Timeline Portfolio Page Using Photoshop
This tutorial shows you how to create a unique portfolio or resume-style site with a timeline layout.
Design a Professional Blog Layout in Photoshop
This in-depth tutorial shows you how to create an awesome blog layout with the 960 grid and a baseline grid.
Design a Clean e-Commerce Website Interface in Photoshop
Many e-commerce sites suffer from poor design. If you’re looking to learn how to design an attractive e-commerce site this tutorial can help.
Design a Beautiful Website from Scratch
This tutorial walks you through the process of designining a nice portfolio site, although you could use the same layout and design for other types of sites as well.
Desiging an Elegant Blog Layout in Photoshop
This tutorial shows the process of designing a clean, modern-looking blog layout.
Designing a Simple Instagram Based Portfolio in Photoshop
Design a beautiful image-heavy design by follow this step-by-step tutorial. The tutorial also covers the design of a mobile version.
How to Create a Professional and Clean Web Layout
This tutorial includes the design process in Photoshop, as well as PSD to HTML conversion.
How to Design a Clean Business Website with Photoshop
This tutorial is part of a two-part series. The second tutorial covers the PSD to HTML conversion.
Create an Illustrative iPhone/iPad Landing Page in Photoshop
With all of the apps that are out there, chances are you will need to design a site for an app at some point. This tutorial leads you through the process of designing an attractive landing page.
Designing a Family of Websites
In this tutorial by Collis Ta’eed you’ll learn how to create a simple, but professional, design.
Create a Fabric Textured Web Layout Using Photoshop
In this tutorial you’ll be led through the process of creating a subtle texture and using it to design a nice portfolio site.
Create a Professional Web 2.0 Layout
Design a portflio site that features a large slider by following this tutorial.
Create a Grungy, Translucent Web Portfolio Design
Let this tutorial show you how to design a colorful layout that uses brush strokes for some texture.
Create a Watercolor-Themed Website Design with Photoshop
Are you looking for a tutorial that will lead you through the process of desiging a site that doesn’t have a cookie-cutter look? This tutorial is for you. The creative header of the design gives it a really unique look.
How to Create a Recipe Template in Photoshop
This tutorial shows how to design a site with a pleasing color palette.
How to Design a Wedding Template in Photoshop
Wedding websites have become increasingly popular in recent years, and this tutorial shows you how to design a sample wedding site.
Create a Vibrant Professional Web Design in Photoshop
If you like color designs, you’ll love this tutorial.
Create a Web Application Website Design in Photoshop
This tutorial will lead you through the process of designing a dark layout for a web app.
Create a Clean and Professional Web Design in Photoshop
This tutorial covers the process of designing the sample layout, and part 2 covers the coding process.
How to Create an Effective Coming Soon Page
Coming soon pages can be helpful for building an email list prior to launch, and this tutorial will show you how to design one in Photoshop.
Designing a “Coming Soon” Page in Photoshop
Here is another tutorial for a coming soon page, this one in video format.
Create a Stylish Portfolio Site Design in Photoshop
Chris Spooner shows how to design a simple, but stylish, portfolio site.
Make a Stylishly Elegant Portfolio Web Design in Photoshop
This tutorial will lead you through the process of designing a stylish portfolio website with a unique header.
Create a Charity Website Layout in Photoshop
Design a site for a sample charity or organization by following this tutorial. The design and layout can also be easily used with other types of websites as well.
Create a Dark Portfolio Web Design in Photoshop
Design a dark portfolio that features a large slider and a trendy ribbon in this tutorial.
Design a Portfolio Site in Photoshop
This portfolio design uses screenshots/mockups to display work samples and get visitors’ attention.
Design an Elegant Photography Website in Photoshop
Many photography websites use very clean and simple designs to keep the visitor’s attention on the photos. This tutorial shows you how to create an elegant photography site where the design will stay out of the way of the photos.
Create a Promotional iPhone App Site in Photoshop
This tutorial shows how you can design a website that features a similar layout and design style to the sites of many apps.
Designing and Coding a Clean Multi-Purpose Website
The layout and design in this tutorial could be used for a portfolio website, or for another type of business. The tutorial covers the PSD to HTML conversion as well as the design.
How to Create a Clean and Colorful Web Layout
This tutorial is several years old, but still worth a look if you are interested in designing a site with a unique background.
Create a Nature-Inspired Painted Background in Photoshop
This classic tutorial by Henry Jones has been around for years, but it’s well worth a look if you’re interested in creating a nature-inspired design.
Learn to Create a Clean Style Portfolio Layout
The design created in this tutorial could be used for a wide variety of sites beacuse of the clean layout and style.
Windows 8 Inspired Portfolio Layout
If you love Windows 8 so much that you want your website to look like it, this tutorial is for you.
Learn How to Create an iPad Apps Themed Layout
This tutorial shows you how to create the layout for an app website, featuring a mockup of the iPad and app.
Learn to Create a Gaming Layout in Photoshop
Create a design with a distinct background and a dark color scheme by following along with this tutorial.
Magazine Styled Blog Layout
This tutorial shows you how to design a homepage layout that would be ideal for blogs that publish high quantities of content.
Create a Simple, Clean Portfolio Layout in Photoshop
Learn to create this sample website based on the 960 grid by following along with this tutorial.
Create a Portfolio Web Layout in Photoshop
This design uses splashes of color, a ribbon-style header, and subtle textures.
How to Build a Stylish Portfolio Web Design Concept
Chris Spooner shows us how to create a basic portfolio site that uses a soft texture.
How to Build Your Own Single-Page Portfolio Website
Learn how to create a basic one-page site to showcase your work by following this tutorial from Chris Spooner.
Create a Grungy Paper Textured Website
With this tutorial you’ll learn how to create a paper texture from scracth, and then use it to create this sample design.
Design a Sleek Textured Blue Portfolio
This tutorial shows how to create a colorful portfolio site design that features a large slider area.
How to Create a Professional Web Layout in Photoshop
This tutorial shows the process of desiging a stylish portfolio site with a dark header.
Create a Minimalist Blog Layout in Photoshop
With the help of this tutorial you can design a blog front page with a textured background.
