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. Many of the web designers, coders, and other people choose photoshop to get their websites designed the way they want to.

Tutorials for Designing Websites in Photoshop

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. Some simple photoshop tools enable you to design a wonderful, clean and customized web page that can easily be customized as per the client’s preference. One-Page retro web designs are most common and widely used to display amazing products or services on the homepage of your website.

Design a Textured Outdoors Website in Photoshop

You have to add a few background textures to make a web page depicting a particular city, destination or any product. You can categorize the different items along with the picture and provide a detailed description as well.

Design a Clean Sports Web Layout in Magazine Style with Photoshop

You will learn how to design a layout that would work well with a news site or blog in this tutorial. It is very simple and easy to make as you just have to sketch a few rectangle boxes to categories each subject properly.

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. You can produce colorful backgrounds with appropriate fonts and proper placement to amaze the viewers.

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 logo, import a few screenshots, use simple tools to design few boxes with text on them, create and insert few icons and you are good to go.

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. Photographers have to provide the detailed description of the services they offer. Photography website is usually divided into different sections and you can design each section using simple photoshop tools.

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. You will be able to showcase more than what a usual web page is usually able to contain. The user will be able to navigate into the portfolio site very easily and grasp the maximum information in less time.

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. You can display your work by creating the different rectangular layers and inserting the screenshots of your work. You can also create a sidebar for the user to navigate your site easily.

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. You have to use a rectangular tool to create rectangles of different shapes and customize those rectangles to display the desired piece of information. You also have to create the header banner and insert different social media icons as well.

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. Like the other similar photoshop tutorials, this tutorial is really simple and you can use different colors to make your e-commerce store look really beautiful.

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. To do this, you have to clearly map out that how your portfolio website should look like. You have to create the perfect corner and separate each category properly for the portfolio website to look really clean and beautiful.

Designing an Elegant Blog Layout in Photoshop

This tutorial shows the process of designing a clean, modern-looking blog layout. It is simple and easy to craft a neat pattern and design a simple logo and content area. This tutorial is easy to understand for beginners. Once you have learned the basics, it should not be a difficult job for you to design this elegant blog layout.

Designing a Simple Instagram Based Portfolio in Photoshop

Design a beautiful image-heavy design by following this step-by-step tutorial. The tutorial also covers the design of a mobile version. You can do this by importing a few photos, aligning them in the grid and this web layout is mobile-friendly as well.

How to Create a Professional and Clean Web Layout

This tutorial includes the design process in Photoshop, as well as PSD to HTML conversion. Sometimes, it becomes really confusing to sort all the information from a professional database on a single page. You can sketch the web layout in your mind or on a piece of paper. Then you can emplloy some simple photoshop techniques to create a fantastic 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. You can easily do it yourself by organizing all the things and setting all the things at proper place.

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. You have to craft a few boxes or similar structures and you also have to add few images.

Designing a Family of Websites

In this tutorial by Collis Ta’eed you’ll learn how to create a simple, but professional, design. You will be able to learn few new and amazing techniques such as adding a message strip along the top right corner of the box, adding shade to the variety of elements and few other photoshop tactics. At the end, you will be able to darken the whole site incuding header, content area and footer.

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. This unique photoshop tutorial will teach you to add an image slider to your site.

Create a Professional Web 2.0 Layout

Design a portfolio site that features a large slider by following this tutorial. You can now design professional-looking sites in few lapse of time by making correct use of the small and simple photoshop tools. You have to follow each and every step properly to achieve the desired results.

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. This photoshop tutorial will teach you to create an excellent gradient background involving a variety of colors. You will also learn to create a transparent brush stroke to create a dirty, colorful and transparent design on which the whole content area stands.

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. You will paint a section of the web page, add a brush and use the simple techniques as used in other photoshop tutorials.

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. This tutorial will teach you to enable users to play video on the web page. The web application must look professional and sophisticated.

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. You will learn to customize the colors of the web page by changing opacity, create a form section and make the webpage to appear very user-friendly.

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. They are also very useful for the regular websites with tons of visitors visiting on daily basis. You have to apply a unique layer to create a stunning logo so that the visitors visiting the “Coming Soon” page do not get bored.

Designing a “Coming Soon” Page in Photoshop

Here is another tutorial for a coming soon page, this one in video format. You will learn to create a countdown timer for any site.

Create a Stylish Portfolio Site Design in Photoshop

Chris Spooner shows how to design a simple, but stylish, portfolio site. Stylish portfolio designs are suitable for adventure or travel blogs. You can also showcase your creative pieces of work such as photography.

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. You will learn to create the boxes and add the thumbnail images. You will also learn to give your logo image a grunge effect, create the inner shadows and few related techniques,

Create a Dark Portfolio Web Design in Photoshop

Design a dark portfolio that features a large slider and a trendy ribbon in this tutorial. You will learn to create a ribbon and a navigation slider as well. You will also learn to create a dark-colored background and dark-colored web layout. This tutorial is very important for the beginners as well as for the people who want to specialize in different photoshop skills.

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. You will learn amazing photoshop tactics such as creating a drop-down menu, designing a unique slider and other simple tactics as taught in the other tutorials.

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. This photoshop tutorial is really creative and you will learn to make the use of different layer styles.

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. You will learn to create a spacious web page with a white background. Every step in this tutorial is clearly explained for different web designers to follow.

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. You will apply different gradients, create different layers, create the content area that can be differentiated easily, creating the bar for the navigation menu and similar photoshop tactics.

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. you can use watercolor brushes to paint a nice background for your new web layout.

Learn to Create a Clean Style Portfolio Layout

The design created in this tutorial could be used for a wide variety of sites because of the clean layout and style. As we know that practice makes the person perfect. so you should also practice this clean style portfolio layout. You will learn to create a unique gallery slider and craft a nice logo using simple fonts alongwith little customization.

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. You can easily craft any web design once you have sketched the web design in your mind or any piece of paper. You can design multiple boxes using windows rectangular tool. You can color those boxes using gradient overlay.

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. You will learn to add custom shapes to your web layout and design a beautiful web layout based on popular niche.

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. You can also use this web layout for other entertainment blogs. This tutorial is a bit complex but each step has been described in detail.

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. You can create a magazine styled blog layout by using all the simple techniques that you have learned in previous photoshop tutorials.

Create a Grungy Paper Textured Website

With this tutorial, you’ll learn how to create a paper texture from scratch, and then use it to create this sample design. It will be really interesting to know how to create your own texture in photoshop.

Design a Sleek Textured Blue Portfolio

This tutorial shows how to create a colorful portfolio site design that features a large slider area. You will be able to merge, duplicate, paste different layers onto the other layers and do a lot of different things with the layers. You will be able to paste your work into the content area.

How to Create a Professional Web Layout in Photoshop

This tutorial shows the process of designing a stylish portfolio site with a dark header. You will learn to create a beautiful background by adding and managing different layers and gradient overlays. You will also learn to create an advanced and customized gallery slider. This tutorial will teach you to create inner shadows using brush tool.

Create a Minimalist Blog Layout in Photoshop

With the help of this tutorial, you can design a blog front page with a textured background. You will create a beautifully textured background as you will go through the tutorial. You will be able to create a dark navigation menu and different categories separated using pencil tool.

Design a Forest Inspired Tumblr Theme in Photoshop

You will be able to create a beautiful portrait photo on the sidebar. You will learn to create a layer and place a few icons on the layer. You will also learn to add a wooden texture to the sidebar to make the blog layout appear more enchanting.

How to Make a Highly-Textured Site Layout in Photoshop

Different photoshop customizations enable us to create a highly-textured site layout. Merging different layers into each other will help you to create a highly-textured site layout in photoshop. Simple techniques such as color burning the logo using the blending mode, duplicating the layers, cutting the layers and similar techniques.

Design a Creative Portfolio in Photoshop

You may use different shape layers to create a colorful and creative background. You will also learn to create a robotic shape by grouping different shapes together. You will learn to create creative infographics for your site.

Design a Cool Pixelated Website Layout

Do you know how to create a dark grey arrow coming out from the footer area? Do you know how to strech a body on the web layout? This photoshop tutorial will help you learn few amazing techniques that you have never imagined before.

Simple & Cloudy Portfolio Layout in Photoshop

You will learn to create a simple contact form in the content section, make a cloud header and use elliptical marquee tool to create cloud shapes.

Beautiful Music Streaming Website Design in Photoshop

You will be to add a play button using elliptical marquee tool, create a stylish header, create a playlist box and much more.