48 Excellent Tutorials for Designing Websites 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 48 different tutorials that we feel are the best at showing you how to go about designing websites 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.

Create a One-Page Retro Web Design Layout in Photoshop

Design a Textured Outdoors Website in Photoshop

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.

Design a Clean Sports Web Layout in Magazine Style with Photoshop

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.

How to Create a Distinguishable Textured Web Layout in Photoshop

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.

Design a Sleek, Dark Mobile App Website

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.

Learn How to Create a Stylish Photography Web Layout

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 an Innovative Portfolio Site Using Alternative UI/UX

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 Stylish Timeline Portfolio Page Using Photoshop

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 Professional Blog Layout in Photoshop

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 Clean e-Commerce Website Interface in Photoshop

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.

Design a Beautiful Website from Scratch

Designing an Elegant Blog Layout in Photoshop

This tutorial shows the process of designing a clean, modern-looking blog layout.

Designing an Elegant Blog Layout in Photoshop

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.

Designing a Simple Instagram Based Portfolio in Photoshop

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 Create a Professional and Clean Web Layout

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.

How to Design a Clean Business Website with Photoshop

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.

Create an Illustrative iPhone/iPad Landing Page in Photoshop

Designing a Family of Websites

In this tutorial by Collis Ta’eed you’ll learn how to create a simple, but professional, design.

Designing a Family of Websites

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 Fabric Textured Web Layout Using Photoshop

Create a Professional Web 2.0 Layout

Design a portflio site that features a large slider by following this tutorial.

Create a Professional Web 2.0 Layout

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 Grungy, Translucent Web Portfolio Design

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.

Create a Watercolor-Themed Website Design with Photoshop

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 Web Application Website Design in Photoshop

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.

Create a Clean and Professional Web Design in Photoshop

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.

How to Create an Effective Coming Soon Page

Designing a “Coming Soon” Page in Photoshop

Here is another tutorial for a coming soon page, this one in video format.

Designing a "Coming Soon" Page in Photoshop

Create a Stylish Portfolio Site Design in Photoshop

Chris Spooner shows how to design a simple, but stylish, portfolio site.

http://line25.com/tutorials/create-a-stylish-portfolio-site-design-in-photoshop

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.

Make a Stylishly Elegant Portfolio Web Design in Photoshop

Create a Dark Portfolio Web Design in Photoshop

Design a dark portfolio that features a large slider and a trendy ribbon in this tutorial.

Create a Dark Portfolio Web Design in Photoshop

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.

Design an Elegant Photography Website in Photoshop

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.

Create a Promotional iPhone App Site in Photoshop

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.

Designing and Coding a Clean Multi-Purpose Website

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.

How to Create a Clean and Colorful Web Layout

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.

Create a Nature-Inspired Painted Background in Photoshop

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.

Learn to Create a Clean Style Portfolio Layout

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.

Windows 8 Inspired Portfolio Layout

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 How to Create an iPad Apps Themed Layout

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.

Learn to Create a Gaming Website in Photoshop

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.

Magazine Styled Blog Layout

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.

Create a Grungy Paper Textured Website

Design a Sleek Textured Blue Portfolio

This tutorial shows how to create a colorful portfolio site design that features a large slider area.

Design a Sleek Textured Blue Portfolio

How to Create a Professional Web Layout in Photoshop

This tutorial shows the process of desiging a stylish portfolio site with a dark header.

How to Create a Professional Web Layout in Photoshop

Create a Minimalist Blog Layout in Photoshop

With the help of this tutorial you can design a blog front page with a textured background.

Create a Minimalist Blog Layout in Photoshop

Design a Forest Inspired Tumblr Theme in Photoshop

Design a Forest Inspired Tumblr Theme in Photoshop

How to Make a Highly-Textured Site Layout in Photoshop

How to Make a Highly-Textured Site Layout in Photoshop

Design a Creative Portfolio in Photoshop

Design a Creative Portfolio in Photoshop

Design a Cool Pixelated Website Layout

Design a Cool Pixelated Website Layout

Simple & Cloudy Portfolio Layout in Photoshop

Simple & Cloudy Portfolio Layout in Photoshop

Beautiful Music Streaming Website Design in Photoshop

Beautiful Music Streaming Website Design in Photoshop

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Comments are now closed on this post.