80 Fresh Photoshop Tutorials For Creating Awesome Websites

• June 7th, 2010
• Photoshop

A sweet collection of high quality web design tutorials, which will enable a novice to a professional designer the skills in order to be capable of using Photoshop in order to create professional website.

The post is great reference point for designers learning how to use Photoshop in order to construct a website simply because the post consists of the best tutorials all in one place. I hope you enjoy the post. Feel free to leave a comment to share your thoughts upon the article and your favourite tutorial.

1. Beautiful Music Streaming Website Design in Photoshop

In this tutorial you will learn how to create a beautiful and clean music streaming website in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

2. Create a Watercolor-Themed Website Design with Photoshop

Watercolor in graphic design has become very trendy the last couple of years, many websites and incredible designers are using this style and taking it to another level. Even knowing the technique is important in this kind of design, is more about creativity and experimentation. You will learn how to use the Art History Brush and combine it with watercolor custom brushes to create a nice background header image and more.

3. Create a vibrant portfolio website

In this web design tutorial, we will create a beautiful and colorful portfolio layout using Photoshop. I’ll show you many techniques for creating different things like bended paper corners, dashed lines, image carousels, 3D bars, and more! I’ll walk you through each step in exact detail so you won’t be left guessing how to do a certain technique. We will use the 960 Grid System to create this layout (which I’ll cover at the start).

4. Design a Clean Web Layout with the 960 Grid

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.

5. Clean and Minimalistic Portfolio Layout in Photoshop

In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

6. Create a Promotional iPhone App Site in Photoshop

In this tutorial, you’ll be continuing this series on creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop. You’ll use some interesting elements, like iPhone imagery and a stylish aurora vector background illustration.

7. Create a clean modern webdesign layout

In this tutorial, we’ll be continuing this series on creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop. We’ll use some interesting elements, like iPhone imagery and a stylish aurora vector background illustration.

8. Software Layout #6

In this tutorial you’ll be showed you how to create a simplistic product layout with a green theme.

9. Create a Gnarly Snowboarding Themed Web Design

Get your Photoshop shred on and follow this step by step overview of building a snowboarding themed website layout. The design we’ll be creating takes inspiration from the typical style of the snowboarding culture, with grungy textures and distressed brush marks adding detail to the design.

10. Create a Theme Store Website Layout in Photoshop

In this tutorial you will learn how to create a simple and beautiful theme store layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

11. Create a wordpress layout in 5mins

Create a tutorial which can be used for your blog. This psd template has been designed to be used with WordPress but I think it can be used pretty well with other CMS platforms such as Drupal , Joomla, Blogger or any other blog platform.

12. How to create a distinguishable textured web layout in Photoshop

In this tutorial I’ll show you how to create a textured web layout, starting from the concept on paper to Photoshop design. We will discuss about site structure and will use the 960 grid to organize our contents.  Also you will learn how to use layer styles to create an engraved text effect.

13. Create a Web Layout with 3D Elements using Photoshop

In this web design tutorial, you will discover a way to create a sleek and professional web page layout that incorporates the 3D Ribbon design trend, as well as some other captivating 3D elements, using  Photoshop.

14. Create A Sleek Smooth WordPress Layout

Create a smooth wordpress layout that is easy to create and looks amazing once complete

15. Create a Clean and Professional Web Design in Photoshop

In this Photoshop web design tutorial you are going to design a smashing, clean, and professional website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or corporate website design.

16. How to Create a Grunge Web Design in Photoshop

Photoshop is often the right tool for web design, especially if you’re creating a design using numerous images and brush effects. In this tutorial, I’ll show you how to create a complete grunge home page design. We’ll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn design.

17. Design The Brilliante Website Layout in Photoshop

Photoshop tutorial, you’re going to learn how to create a clean WordPress-styled website/blog design. We’ll be mainly dealing with; Basic shapes (lines, rectangles, arrows), Layer Styles, and a bit of basic type. Besides some Photoshop tricks. you’ll also be focusing on keeping our layout very well-aligned.

18. Design a Bold and Vibrant Portfolio

Learn how to design a bold and vibrant portfolio website, using a combination of lighting techniques and blending options.

19. Create a Chalkboard Style WordPress Layout in Photoshop

In this tutorial you will learn how to create a unique and original WordPress style layout that looks like a chalkboard.

20. Clean and Creative WordPress Style Theme in Photoshop

In this tutorial you will learn how to create a clean and creative WordPress style layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

21. Mobile App Layout

Mobile app’s are on the never ending increase and now so are mobile app websites. In today’s tutorial you’ll be showed how to create a dark theme mobile app web layout.

22. Create a Wooden Grunge Portfolio Web Layout in Photoshop

Mobile app’s are on the never ending increase and now so are mobile app websites. In today’s tutorial you’ll be showed how to create a dark theme mobile app web layout.

23. Create a Clean and Classy Web Design in Photoshop

In this web design tutorial, you will learn how to create an elegant and professional web layout that can be used as a web portfolio site. We will use various Photoshop techniques.

24. Create An Outstanding Gaming Community Layout

In today’s tutorial you will an outstanding gaming community layout using photoshop. This layout could be used not only for a gaming site but for any large community site.

25. Create An Outstanding Gaming Community Layout

In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout. You’ll be using some basic to intermediate-level techniques to build your very own sleek “Web 2.0” style web design that uses the 960 Grid System.

26. How to create a web hosting layout

In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout. You’ll be using some basic to intermediate-level techniques to build your very own sleek “Web 2.0” style web design that uses the 960 Grid System.

27. Create A Killer WordPress Portfolio Site

In today’s tutorial we will create a killer wordpress layout, you will learn how to create transparent areas and also how to create cool looking boxes using just 2 steps, not to mention the entire template!

28. How to Make a Creative Blog Layout

In this tutorial, we’ll make a creative blog layout using mostly simple shapes, a few brush techniques, some images, and a dose of Photoshop ingenuity. Creating web design layouts is easier than you may think. You can learn to build attractive designs rapidly. Creating this design will take less than two hours and you’ll learn some professional tips along the way.

29. Create a Slick and Minimalist Web Layout in Photoshop

In this Photoshop web design tutorial, you’re going to learn how to create a slick and minimal-looking website layout. You will use the 960 Grid System as a template to make it easy to align the design elements on the layout.

30. Create a glossy hosting layout

In this tutorial you will show you how easy is to create a glossy web hosting layout. You will use the 960 grid system because you will be very easy for you to align this layout perfectly. if you want good results alignment of the layout is one of the most important think when you design a layout.

31. Learn To Create A Photography Style Web Layout

In this tutorial I’ll be walking your through the process of creating a photography/portfolio style web layout.

32. Create business web layout in Photoshop

In this tutorial you’ll work out how to create a business layout.

33. Portfolio layout created with jeans texture

In this tutorial It will show you how to create a portfolio layout based on a jeans seamless texture.#

34. How to create a clean and design portfolio layout using Photoshop

In this Photoshop tutorial I will show you how to build a layout to create a website for a webdesigner or a little webagency. I don’t think this tutorial will be easy for beginners, so If you have some knowledge in webdesign.

35. Web Design Layout #14

In today’s tutorial I’ll be showing you how to create a sleek web design company style web template.

35. Create a Professional Web 2.0 Layout

In this Photoshop tutorial we’re going to learn how to create a web 2.0 layout, As we go through the tutorial we’ll deal with so many Photoshop techniques. Seems kind of long? that’s because it’s very detailed.

36. Simple iPhone Application Website Layout in Photoshop

In this tutorial you will learn how to make a simple and clean layout for your iPhone application.

37. Create a smooth portfolio layout

In this tutorial you will be creating an easy to make portfolio design, this design uses simple effects combined with a great color scheme to give it a smooth look.

38. How to Create a Dark and Sleek Blog Design in Photoshop

In this web design tutorial, you’ll  be showed you how to make an impressive dark-themed layout that you can use for blog designs. The design will feature “racecar enthusiast” elements such as carbon fiber and checkered flag textures and odometers.

39. Create a portfolio website in Photoshop

This is our first tutorial here on PSD-Coder.com. I hope you will enjoy all of our tutorials and in the same time I promise that here you will see high-quality tutorial, especially  web layouts (psd template) tutorials, posted regularly on this blog.

40. Business Layout #8

In today’s tutorial you’ll be showed you how to make a business layout, the layout will feature a dark theme with hints of red and white.

41. Design a simple, modern web template

In today’s tutorial you’ll be showed you how to make a business layout, the layout will feature a dark theme with hints of red and white.

42. Create a gorgeous wordpress theme

In this tutorial it will show you step by step how to design a WordPress Theme from scratch. If you don’t know already we have a membership here on Graphstock.com which allows you to download all our existing resources, plus the one we will release in the next year.

43. Create a Beautiful and Clean Portfolio Wood Layout in Photoshop

In this tutorial you will learn how to make a beautiful and clean portfolio layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments.

44. Create a icy portfolio

In this tutorial you will learn how to create a simple portfolio layout that cannot only be used for a portfolio but also a blog, product site or company site with minor modifications

45. Create a business web template

In this tutorial you will learn how to create a simple portfolio layout that cannot only be used for a portfolio but also a blog, product site or company site with minor modifications

46. How to Make an Impressive Blog Layout in Photoshop

In this easy to follow web design tutorial, you will learn how to construct a beautiful, sleek, and professional-level weblog design using Adobe Photoshop that you can later use for your very own blog theme.

47. How to create a software web layout

I will create a new dark website layout, where you can sell your software. The tutorial is very easy to follow, and I promise you that everybody can create a layout like this in less than 2 hours.

48. Create a fantastic gallery theme website

In this tutorial we will be creating a Fantastic Gallery Layout using Adobe Photoshop. This tutorial uses lots of blending options to create effects, as well as the  marquee and shapes tool.

49. Theatre: design an elegant, dark portfolio site

Portfolio sites can be used by a whole lot of folks: from web designers, to photographers and artists. Learn how to design such an elegant and stylish web site.

50. Designing Cool Interface for Magazine Portal

This is one of the few Web Interface tutorials I did for 10Steps.SG. We shall go through some basic considerations and plans to take before we do the actual designing for a Magazine portal. You may find this tutorial useful for your upcoming projects.

51. Create a gritty website layout

In this tutorial It will show you how to create a clean website layout with a grunge background.  You can use this layout for a WordPress blog too. The layout has a gritty look because I have used the Add noise filter. If you want your website to load much faster stay away from such layouts.

52. Creative 3D Layout

Good evening ladies, gents, boys and girls. Welcome to another tutorial from hv-designs, today il be showing you how to make a creative 3D layout. The layout features a sleek navigation inspired by the mac and has a nice subtle look with subtle grey colors.

53. Create A Killer Chrome website

In this tutorial It will guide you through the process of creating a real chrome effect which will be used throughout this template.

54. How to do a fancy layout for a graphic design blog using Photoshop

Welcome in this new Photoshop tutorial on 2expertsdesign.com. Today you can learn how to create a fancy graphic blog webdesign! This Photoshop tutorial is composed of three different tutorials.

55. Design a Sleek Textured Blue Portfolio

Learn how to design a sleek and textured portfolio web design from scratch, including guide techniques, sketching/drawing tips and content placement.

56. Portfolio web layout

You will create another portfolio website layout in Photoshop. You can use it to showcase your work or to impress your boss with your skills in Photoshop.

57. Create a Very Simple Portfolio Web Layout with Photoshop

In this web design tutorial, you will be creating a minimalist, dark-themed web layout that’s perfect for a portfolio site. you’ll only cover the creation of the basic parts of the layout and leave it up to you to apply your own finishing touches.

58. Create Stylish Retro Website Template Using Photoshop!

Follow the steps of this tutorial and you’ll learn the designing tips and tricks of this elegant template. This is the advanced level tutorial, so you need to review some techniques from our previous tutorials and especially from How To Create Interior Website Template. Anyways, we’ve tried to make this tutorial comprehensive for all of our readers.

59. Create a business web template

In this tutorial you will learn how to create a nice looking layout for a business.

60. Clean Textured WordPress Style Layout in Photoshop

In this tutorial you will learn how to create a textured and clean WordPress style layout in Photoshop.

61. Design a Dark, Contemporary Minifolio in Photoshop

Portfolios are nice, but what if your clients want a quicker, lighter way to see what you can do? A Minifolio is a hybrid between a full-scale portfolio and a business card. It’s quick to design and it gives an idea of your style and a little of your background information without all the bells and whistles.

62. Design a Modern Portfolio Web Layout in Photoshop

you’ll use simple Photoshop tools such as layer styles, selection tools, and custom shape tools to create a professional-level web design. The color scheme can easily be adjusted depending to your tastes. This layout is heavily inspired by MetaLab’s web design.

63. Simple & Cloudy Portfolio Layout in Photoshop

In this tutorial you will learn how to create a simplistic portfolio page design with a cloudy header.

63. How to Create a Grunge Web Design in Photoshop

Photoshop is often the right tool for web design, especially if you’re creating a design using numerous images and brush effects. In this tutorial, you’ll learn how to create a complete grunge home page design. You’ll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn design.

64. ZX5 Hosting: design a contemporary hosting site

This portfolio design focuses on using typography to grab your readers’ attention. You’ve gone for a simple style on this one, with two primary colors and minimal layer styling to make it easier to read. It’s perfect for a personal design portfolio. You’ll show step-by-step how we did it in this tutorial.

65. Design a dark business layout

In this tutorial It will use only a few colors to create a dark business layout.With small modifications this layout can be used also as an wordpress blog.

66. Design a Minimal and Modern Portfolio Layout with Photoshop

In this Photoshop web design tutorial, you’re going to create a mock-up of a clean and modern-looking website. This is Part 1 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

67. Create a Beautiful Vibrant Watercolor Web Layout

You will see how integrating the element of painting in your webpage can make your layout very artistic and creative.

68. Design an impresive blog layout

Create a web layout for a wordpress blog. It will guide you step by step to create a nice looking WordPress layout.

69. Create A Sleek Portfolio Layout

For our first Tutorial here at PSDbase.com we will create a sleek stunning portfolio layout using Photoshop. I’ll show you the techniques used to create each effect throughout this layout.

70. Create an easy make weblayout

In today’s tutorial you will create a simple but effective portfolio layout. I will show you the basics of brush layout in web design.

71. MyPortfolio Layout Tutorial In Adobe Photoshop

Welcome everyone. So today i show you how to create nice looking portfolio layout using Adobe Photoshop. Follow steps and leran how to work with Adobe.

72. How To Create Ecommerce Website

In this tutorial you will teach you how to create a nice theme for an ecommerce website (Magento or Prestashop) using Photoshop.

73. Create An Amazing Vibrant Layout

In this tutorial you will create a amazing vibrant layout. we will use Filters, layer styles and more to create each effect to achieve the stunning end result

74. Create a Magic Night Themed Web Design from Scratch in Photoshop

An awsome design tutorial to create an magical design tutorial.

75. Design a light wordpress theme in photoshop

In this tutorial I will create a new wordpress theme with a web 2.0 look. Sometimes the simplicity of the theme will bring you more readers.

76. Create a Bright and Sleek Web Design in Photoshop

In this tutorial I will create a new wordpress theme with a web 2.0 look. Sometimes the simplicity of the theme will bring you more readers.

77. Create a Grungy, Translucent Web Portfolio Design

Not only have watercolor brush strokes become a popular trend in modern web design, but so have advanced layers of transparency (or what I call, translucence).

78. Create a Textured Paper Photoblog Layout in Photoshop

In this tutorial you will learn how to create a textured paper photo blog layout in Photoshop.

79. Create an iPhone App Website in Photoshop

In this tutorial you will learn how to create a simple, yet beautiful application page for your iPhone app.

80. Create A Clean Cobalt Blue WordPress Layout

In this tutorial we will Create A Clean Cobalt Blue WordPress Layout, this layout teaches you how to create clean looking effects in the easiest way possible