Excellent Photoshop Web Design Layout Tutorials

Photoshop is a popular web design tool. With it, you can create web design mock-ups that can later on be converted to a functional HTML/CSS template.

This collection of tutorials features top-notch techniques on how to create web design layouts using Photoshop.

1. Clean Style Portfolio Layout

A step-by-step Photoshop web design layout tutorial using basic techniques.

2. Clean Blog Layout in Photoshop

Learn how to make a dark-themed blog design layout in this Photoshop tutorial.

3. Create a Portfolio Web Layout in Photoshop

Discover how to use patterns in website layouts through this Photoshop tutorial.

4. How to Make a Vibrant Portfolio Web Design in Photoshop

This Photoshop tutorial uses 960 Grid System for laying out the web page.

5. Create an Elegant Photography Web Layout in Photoshop

This simple tutorial shows you how to apply background textures in your web designs.

6. Photo Gallery Website Layout in Photoshop

Learn to make a dark-themed photo gallery via this excellent Photoshop tutorial.

7. Create a Movie Video Streaming Website

In this Photoshop tutorial, you’ll use layer styles to create great web design elements.

8. How to Build a Stylish Portfolio Web Design Concept

Learn techniques for creating elegant web designs in Photoshop through this tutorial.

9. Create a Modern Lab Theme Web Design in Photoshop

This tutorial will show you design techniques for making slick web layouts.

10. Create an Extremely Simple Dark Web Design in Photoshop

In this tutorial, you’ll learn plenty of techniques such as how to make a web button.

11. How to Create a Sleek Grid Based Website Design

From paper to Photoshop, learn how to lay out a web design on a grid.

12. How to Create a Vintage Photoshop Website Layout

Make a stylish vintage-themed design by reading this awesome Photoshop tutorial.

13. Create a Simple Clean Portfolio Layout in Photoshop

This Photoshop layout tutorial is perfect for portfolio sites as well as web app sites.

14. 3D Portfolio Dark Layout in Photoshop

You’ll use Photoshop guides, layer styles and more in this web design tutorial.

15. Design a Clean and Colorful Ecommerce Layout in Photoshop

This tutorial will walk you through the creation of an e-store product page design.

16. Design an Innovative Portfolio Site Using Alternative UI/UX

This tutorial shows you the creation of a web page that has a unique user interface.

17. Design a Sleek Mobile App Website

Create a simple dark-themed web design layout using basic Photoshop techniques.

18. Design a Warm, Cheerful Website Interface in Adobe Photoshop

This superb web layout tutorial has a PSD to HTML conversion follow-up.

19. Impressive Videographer Website Portfolio Layout in Photoshop

In this tutorial, you’ll use the Custom Shape Tool to make a background pattern.

20. How to Create a WordPress Theme in Photoshop

Learn to make a simple blog layout using Photoshop.

21. Design a Bold and Vibrant Portfolio

This web layout tutorial walks you through the creation of a colorful portfolio site.

22. Create an Elegant Patterned Web Design in Photoshop

Among the things you’ll learn in this tutorial is the creation of Photoshop patterns.

23. Design a Clean Corporate Website Layout

Learn how to incorporate stock photos in your website layout’s header in this tutorial.

24. How to Create a Colorful Business Web Layout

This Photoshop tutorial will demonstrate how to incorporate icons in your web designs.

25. Design a Textured "Coming Soon" Web Page in Photoshop

Learn to make a simple web design with beautiful textures in this Photoshop tutorial.

Related Content

Graphics in Photoshop: 6 Beginner Tips for Web Designers

Graphic design and web design are two distinct visual fields that have different requirements, best practices and methodologies.

For example, it’s much easier in web design to use pixel-based/raster-based file formats (like JPG, GIF or PNG). Conversely, vector files such as EPS and AI — which are scalable without leading to pixelation — are better suited for graphic design, for things like logos that might be used in a variety of sizes. As of yet, vector-based graphics designed for the web (such as SVG or HTML5 Canvas) are not universally and uniformly supported in all browsers.

In addition, graphics meant for web use have certain best practices associated with them. One of these best practices is that you should be conscious of file weight because you want your web pages to be as fast as possible. As a web designer, you have to try to reduce the amount of HTTP requests done by your graphics — whether through lowering the amount of images you use or combining some of them into a CSS sprite — as well as make sure you pick the right image format that strikes a perfect balance between file size and image quality.

Photoshop is an industry-standard tool used by both graphic designers and web designers. What follows are some simple tips to follow as you create graphics meant for use on websites.

1. Save Your Graphics with the "Save for Web & Devices" Command

In web design, you have to make sure that your images are as small in file size as possible. But it’s more than that — your images need to look good as well.

The perfect approach to creating graphics in Photoshop is by balancing image quality and file size.

A common mistake that web designers make is using the Save as command instead of the Save for Web & Devices command in Photoshop.

The Save for Web & Devices command creates files optimized for web design, in terms of image quality, image resolution, browser compatibility and file size.

The command additionally has a dialog window that you can use to fine-tune your images. While you tweak the settings of your graphic, it will show you its effects on file size and image quality.

In comparison, the Save as dialog window doesn’t have as many options and often creates images that are larger in terms of file size.

Below is a comparison of the same image saved using the Save for Web & Devicescommand and the Save as command. Notice that the file size difference is significant.

2. Consider Using Web-safe Colors

Web-safe colors will display correctly in most browsers and on most monitors, ensuring your website looks the same no matter where it’s viewed.

The two easiest ways to guarantee that the colors you use are web-safe are as follows.

"Only Web Colors" Option

In the Color Picker dialog window, check the "Only Web Colors" option located at the bottom-left corner. This will limit the colors being displayed in the window to just web-safe colors.

Convert a Color to a Web-safe Color

Convert any color into the closest web-safe color by clicking on the little cube in the Color Picker (next to the "Current" and "New" color boxes).

3. Consider Using the "Progressive Scan" Option for JPG

The JPG file format is ideal for photographic and high-resolution images. Depending on your projected audience, a progressive scan JPG can be the way to go, as the image will gradually render as the site loads (though on modern broadband Internet connections, this type of wait time is rarely an issue). This allows the user the ability to quickly see the image before it fully downloads, making the web page feel more responsive.

For a more extensive guide on the subject, read JPEG 101: A Crash Course Guide on JPEG.

4. Save Graphics with Transparency as PNGs

The PNG image format is great for images that need to be rendered with transparency.

PNG transparency is supported in most mainstream browsers but watch out if you find yourself having to cater to IE6: parts of your PNG that are meant to be transparent will show up gray. There are workarounds to avoid this issue (e.g., IE PNG FixJavaScript library) but they can be a hassle to implement.

For more information on PNGs, read the Web Designer’s Guide to PNG Image Format.

5. Save Animated Graphics as GIFs

The GIF image format, while now mostly replaced with PNG, is still useful for one thing. While they are noticeably grainier than PNG and JPG files, one important feature of the GIF image format is its ability to be animated.

While there is an extension of the PNG image format called APNG (which stands for Animated Portable Network Graphics), it lacks browser support.

If you’re choosing between PNG and GIF, it’s usually a good idea choose PNG unless the image is to be animated.

6. Pay Attention to the "Download Time" Information

It’s vital to make sure that a site loads quickly and looks good, which is why saving and optimizing your graphics is important. Below, see what a simple change in a file-saving option can do to an image’s file size.

JPEG at Maximum Quality

JPEG at Low Quality

A good practice to follow is to lower the quality until you visibly notice degradation in image quality.

When you’re optimizing your images, always pay attention to the Download Time, which is displayed on the lower-left corner of the Save for Web & Devices dialog window. Below, you can see that the image being saved will take approximately 2 seconds to download on a DSL Internet connection at its current settings.

Related Content

Basic Tutorials to Get You Started with Photoshop

Adobe Photoshop is a very powerful and versatile image editing/graphics creation application that is the industry standard in its category. Though Photoshop’s interface is intuitive enough for an absolute beginner to learn basic image editing tasks such as cropping and resizing, to be able to fully master and utilize all of its tools takes a considerable amount of time.

If you’re interested in honing your Photoshop skills to create spectacular compositions, this is for you. In this article, you’ll find 35 basic Photoshop tutorials for getting started with Photoshop.

General tutorials

1. Getting Started with Photoshop

If you’ve never had any experience with Photoshop, this tutorial from SitePoint will get you up to speed with Photoshop’s basic features.

2. Adobe Photoshop Interface Tutorial

This tutorial outlines Photoshop CS2′s interface. Even if you use an earlier or later version of Photoshop, this tutorial is still helpful in familiarizing yourself with how Photoshop – in general – is laid out.

3. You Suck at Photoshop (series)

This wildly popular and humorous screencast on Photoshop techniques by (probably) fictional character Donnie Hoyle is an excellent Photoshop series to follow if you like laughing and learning at the same time!

4. Photoshop’s Toolbox

This tutorial goes over the anatomy of Photoshop’s Toolbox.

Photoshop tools and features

5. Retouch and Healing Tools

Photoshop has a host of tools and options for retouching and correcting images. This tutorial goes over the tools at your disposal and what situations each tool excels in.

6. Photoshop’s Pen Tool: The Comprehensive Guide

Photoshop’s Pen tool gives you the ability to draw objects in a vector-like fashion. This thorough tutorial even comes with a practice sheet that will help you master the concepts of working with the Pen tool.

7. Photoshop’s Painting Tools

Photoshop’s Painting tools allow you to draw and fill in objects with colors and color gradients. This tutorial showcases Photoshop’s painting capabilities.

8. Photoshop Color Replacement Tool

Sometimes you want to replace certain colors in an image. With the Color Replacement tool – you can specify which colors you’d like to change and Photoshop will automatically replace them for you. This tutorial goes through the color replacement process and discusses all the things you need to know about the Color Replacement tool.

9. Understanding Layer Masks

One of the fundamental skills to learn in Photoshop is the art of masking (isolating certain parts of a composition). This comprehensive tutorial goes over the Layer Masking features of Photoshop.

10. Photoshop’s Image Masking Tools

There are different methods of masking objects in your Photoshop composition. This tutorial goes over the basic masking tools available to you.

11. Layer Styles in Photoshop

Layer Styles are the effects and options you apply to a particular layer. This tutorial discusses the concept of Layer Styles and how to utilize them in your Photoshop documents.  

12. Understanding Bevel and Emboss

Bevel and Emboss is a particular Layer Style. There are many options you can tweak and change (such as the shading and the angle of light); this tutorial goes over what each option does.

13. Understanding Drop Shadows

Drop Shadow is another Photoshop Layer Style that applies a silhouette to the objects in a layer. In this tutorial, you’ll learn about the different options and settings of the Drop Shadow Layer Style.

14. Introduction to Blending Modes

In this video tutorial, you’ll learn about the different Blending Modes available at your disposal.

15. Photoshop’s Filters

Photoshop filters are simply effects applied to your image (much like the concept of using photographic lens filters). For example, the Blur filter unsharpens the focus of your images. This tutorial goes over the Filters interface in Photoshop.

16. Useful Applications for the Clone Stamp Tool

This tutorial goes over some excellent uses of the Clone Stamp tool in Photoshop.

17. Getting to Grips with the Vanishing Point Filter

Master the Vanishing Point filter (a Photoshop filter that adjusts the image’s perspective) with this excellent Photoshop tutorial.

18. The Hidden Power of Photoshop Brush Tool

The Brush tool is a versatile drawing feature of Photoshop the mimics different art brushes and styles like water coloring, oil painting, or charcoal painting. This tutorial covers some of the best features of the Brush Tool in Photoshop.

19. "Background Eraser Tool" is the new Magic Wand

This tutorial goes over the usage of the Background Eraser tool in Photoshop.

Common tasks and techniques

20. A Comprehensive Introduction to Photoshop Selection Techniques

In order to become a Photoshop master, you’ll need to understand how to select different sections and objects in your composition. This guide goes over some techniques you can use to selectively isolate certain objects or groups of objects.

21. Sharpening the Details

You’ll often need to sharpen photos for image correction. In this video tutorial, you’ll learn about various sharpening techniques.

22. Saving Images for the Web

One of the most powerful features of Photoshop is its ability to save compositions in a variety of web formats. This tutorial explains the different options and settings of saving images for the web.

23. Create Your Own Custom Shapes in Photoshop

Custom Shapes are reusable objects in Photoshop. It gets stored in a library and you can access them later on from another Photoshop document. In this tutorial, you’ll learn how to create, import, and save your own custom shapes.

24. Photoshop Smart Objects, smart but not always that smart

Smart Objects are instantiated objects – that is, you can create multiple instances of a source object and make a change to an instance of that object while still keeping the original object intact. This tutorial goes over how to use Smart Objects.

Enhancing your workflow and efficiency

25. Using Pen Tablets in Photoshop

You can use a Pen tablet (an input device that lets you draw images directly into an image editor) over a mouse to create more accurate drawings by hand. This tutorial shows you the basic concepts behind utilizing a Pen Tablet to supplement your workflow. 

26. Automating Photoshop with Actions

An Action is a sequence of Photoshop tasks that you can repeat and reuse. For example, if you find yourself constantly resizing images to 550 pixels in width and then saving them in  PNG file format, you can record a Photoshop Action that will apply these settings automatically. This excellent tutorial covers the basics of creating and using Photoshop Actions.

27. Using Palettes in Photoshop

Palettes are sets of tools and options that help you organize Photoshop’s interface. In this tutorial, you’ll get a great primer on how to take advantage of using Palettes.

28. Installing and Managing Brushes & Other Presets

You can install pre-made brushes (instead of creating your own) in Photoshop as well as save important settings for future use. This tutorial will show you how to work with brushes and other Photoshop presets.

29. Layer Comps in Photoshop CS

A Layer Comp is a version of your composition that you can switch back and forth to. Learn a little about an actual use of Layer Comps.

30. Photoshop Secret Shortcuts

Shortcuts enable greatly increases your efficiency. In this excellent tutorial, you’ll learn about some of the lesser-known but tremendously useful Photoshop shortcuts.

31. Manage your shortcuts in Photoshop

If you don’t like the preset keyboard shortcuts the Photoshop comes with out of the box, this tutorial will show you how to change and manage your Photoshop shortcuts.

Learning by doing

32. Manipulate an Image with Scripting

Scripting allows you to automate and extend Photoshop’s features by authoring your own code. Learn about Photoshop Scripting with this tutorial that uses image manipulation as a working example.

33. Use Photoshop’s Filters to Make Simple Illustrations

Learn to use Photoshop Filters to transform a photo into an illustration.

34. Custom made Seamless Texture Tutorial

Learn to create seamless textures in Photoshop.

35. Simple organic shapes in Photoshop

This tutorial goes over a technique for creating simple organic shapes using several Photoshop tools and techniques such as the Shape Tool and Gradient Masks.