(http://cdn.sixrevisions.com/0159-01_webdesign_layout_tutorials_thumbnail.jpg)
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 (http://www.photoshop-plus.co.uk/2011/05/31/learn-to-create-a-clean-style-portfolio-layout/) A step-by-step Photoshop web design layout tutorial using basic techniques.
(http://cdn.sixrevisions.com/0159-02_clean_style_portfolio_layout.jpg) (http://www.photoshop-plus.co.uk/2011/05/31/learn-to-create-a-clean-style-portfolio-layout/)
2. Clean Blog Layout in Photoshop (http://www.webdevtuts.net/photoshop-2/create-a-nice-clean-blog-layout-in-photoshop/) Learn how to make a dark-themed blog design layout in this Photoshop tutorial.
(http://cdn.sixrevisions.com/0159-03_clean_blog_layout_photoshop.jpg) (http://www.webdevtuts.net/photoshop-2/create-a-nice-clean-blog-layout-in-photoshop/)
3. Create a Portfolio Web Layout in Photoshop (http://webdesignfan.com/create-a-portfolio-web-layout-in-photoshop/) Discover how to use patterns in website layouts through this Photoshop tutorial.
(http://cdn.sixrevisions.com/0159-04_portfolio_web_layout_photoshop.jpg) (http://webdesignfan.com/create-a-portfolio-web-layout-in-photoshop/)
4. How to Make a Vibrant Portfolio Web Design in Photoshop (http://designinstruct.com/web-design/how-to-make-a-vibrant-portfolio-web-design-in-photoshop/) This Photoshop tutorial uses 960 Grid System (http://sixrevisions.com/web_design/the-960-grid-system-made-easy/) for laying out the web page.
(http://cdn.sixrevisions.com/0159-05_vibrant_portfolio_webdesign_photoshop.jpg) (http://designinstruct.com/web-design/how-to-make-a-vibrant-portfolio-web-design-in-photoshop/)
5. Create an Elegant Photography Web Layout in Photoshop (http://designinstruct.com/web-design/create-an-elegant-photography-web-layout-in-photoshop/) This simple tutorial shows you how to apply background textures in your web designs.
(http://cdn.sixrevisions.com/0159-06_elegant_photography_weblayout_photoshop.jpg) (http://designinstruct.com/web-design/create-an-elegant-photography-web-layout-in-photoshop/)
6. Photo Gallery Website Layout in Photoshop (http://devisefunction.com/2010/01/25/photo-gallery-website-layout-in-photoshop/) Learn to make a dark-themed photo gallery via this excellent Photoshop tutorial.
(http://cdn.sixrevisions.com/0159-07_photo_gallery_website_photoshop.jpg) (http://devisefunction.com/2010/01/25/photo-gallery-website-layout-in-photoshop/)
7. Create a Movie Video Streaming Website (http://www.ultimatedesignertoolkit.com/tutorials/create-a-movie-video-streaming-website/) In this Photoshop tutorial, you'll use layer styles to create great web design elements.
(http://cdn.sixrevisions.com/0159-08_movie_video_website_photoshop.jpg) (http://www.ultimatedesignertoolkit.com/tutorials/create-a-movie-video-streaming-website/)
8. How to Build a Stylish Portfolio Web Design Concept (http://www.blog.spoongraphics.co.uk/tutorials/how-to-build-a-stylish-portfolio-web-design-concept) Learn techniques for creating elegant web designs in Photoshop through this tutorial.
(http://cdn.sixrevisions.com/0159-09_stylish_portfolio_webdesign.jpg) (http://www.blog.spoongraphics.co.uk/tutorials/how-to-build-a-stylish-portfolio-web-design-concept)
9. Create a Modern Lab Theme Web Design in Photoshop (http://designinstruct.com/web-design/create-a-modern-lab-theme-web-design-in-photoshop/) This tutorial will show you design techniques for making slick web layouts.
(http://cdn.sixrevisions.com/0159-10_lab_theme_webdesign_photoshop.jpg) (http://designinstruct.com/web-design/create-a-modern-lab-theme-web-design-in-photoshop/)
10. Create an Extremely Simple Dark Web Design in Photoshop (http://designinstruct.com/web-design/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.
(http://cdn.sixrevisions.com/0159-11_simple_dark_webdesign_photoshop.jpg) (http://designinstruct.com/web-design/create-an-extremely-simple-dark-web-design-in-photoshop/)
11. How to Create a Sleek Grid Based Website Design (http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design) From paper to Photoshop, learn how to lay out a web design on a grid (http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/).
(http://cdn.sixrevisions.com/0159-12_sleek_gridbased_website_design_photoshop.jpg) (http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design)
12. How to Create a Vintage Photoshop Website Layout (http://psd-files.com/blog/how-to-create-a-vintage-photoshop-file/) Make a stylish vintage-themed design by reading this awesome Photoshop tutorial.
(http://cdn.sixrevisions.com/0159-13_vintage_photoshop_website_layout.jpg) (http://psd-files.com/blog/how-to-create-a-vintage-photoshop-file/)
13. Create a Simple Clean Portfolio Layout in Photoshop (http://www.1stwebdesigner.com/tutorials/portfolio-layout-photoshop/) This Photoshop layout tutorial is perfect for portfolio sites as well as web app sites.
(http://cdn.sixrevisions.com/0159-14_clean_portfolio_layout_photoshop.jpg) (http://www.1stwebdesigner.com/tutorials/portfolio-layout-photoshop/)
14. 3D Portfolio Dark Layout in Photoshop (http://www.1stwebdesigner.com/tutorials/create-amazing-3d-portfolio-dark-layout-in-photoshop/) You'll use Photoshop guides, layer styles and more in this web design tutorial.
(http://cdn.sixrevisions.com/0159-15_3d_portfolio_dark_layout_photoshop.jpg) (http://www.1stwebdesigner.com/tutorials/create-amazing-3d-portfolio-dark-layout-in-photoshop/)
15. Design a Clean and Colorful Ecommerce Layout in Photoshop (http://bloomwebdesign.net/myblog/2011/04/27/design-clean-colorful-ecommerce-layout/) This tutorial will walk you through the creation of an e-store product page design (http://sixrevisions.com/user-interface/product-page-design/).
(http://cdn.sixrevisions.com/0159-16_colorful_ecommerce_layout_photoshop.jpg) (http://bloomwebdesign.net/myblog/2011/04/27/design-clean-colorful-ecommerce-layout/)
16. Design an Innovative Portfolio Site Using Alternative UI/UX (http://webdesign.tutsplus.com/tutorials/complete-websites/design-an-innovative-portfolio-site-using-alternative-uiux/) This tutorial shows you the creation of a web page that has a unique user interface.
(http://cdn.sixrevisions.com/0159-17_innovative_portfolio_site_uxui_photoshop.jpg) (http://webdesign.tutsplus.com/tutorials/complete-websites/design-an-innovative-portfolio-site-using-alternative-uiux/)
17. Design a Sleek Mobile App Website (http://webdesign.tutsplus.com/tutorials/complete-websites/design-a-sleek-dark-mobile-app-website/) Create a simple dark-themed web design layout using basic Photoshop techniques.
(http://cdn.sixrevisions.com/0159-18_design_mobileapp_website_photoshop.jpg) (http://webdesign.tutsplus.com/tutorials/complete-websites/design-a-sleek-dark-mobile-app-website/)
18. Design a Warm, Cheerful Website Interface in Adobe Photoshop (http://webdesign.tutsplus.com/tutorials/design-a-warm-cheerful-website-interface-in-adobe-photoshop/) This superb web layout tutorial has a PSD to HTML conversion follow-up (http://net.tutsplus.com/tutorials/site-builds/convert-a-warm-cheerful-web-design-to-html-and-css/).
(http://cdn.sixrevisions.com/0159-19_warmcheerful_website_photoshop.jpg) (http://webdesign.tutsplus.com/tutorials/design-a-warm-cheerful-website-interface-in-adobe-photoshop/)
19. Impressive Videographer Website Portfolio Layout in Photoshop (http://www.webdevtuts.net/photoshop-2/create-an-impressive-videographer-website-portfolio-layout-in-photoshop/) In this tutorial, you'll use the Custom Shape Tool to make a background pattern.
(http://cdn.sixrevisions.com/0159-20_videographer_website_portfolio_layout_photoshop.jpg) (http://www.webdevtuts.net/photoshop-2/create-an-impressive-videographer-website-portfolio-layout-in-photoshop/)
20. How to Create a WordPress Theme in Photoshop (http://trendytuts.com/web-layout-tutorials/how-to-create-a-wordpress-theme-in-photoshop.html) Learn to make a simple blog layout using Photoshop.
(http://cdn.sixrevisions.com/0159-21_wordpress_theme_photoshop.jpg) (http://trendytuts.com/web-layout-tutorials/how-to-create-a-wordpress-theme-in-photoshop.html)
21. Design a Bold and Vibrant Portfolio (http://psd.fanextra.com/tutorials/design-a-bold-and-vibrant-portfolio/) This web layout tutorial walks you through the creation of a colorful portfolio site.
(http://cdn.sixrevisions.com/0159-22_bold_vibrant_portfolio_photoshop.jpg) (http://psd.fanextra.com/tutorials/design-a-bold-and-vibrant-portfolio/)
22. Create an Elegant Patterned Web Design in Photoshop (http://designinstruct.com/web-design/create-an-elegant-patterned-web-design-in-photoshop/) Among the things you'll learn in this tutorial is the creation of Photoshop patterns.
(http://cdn.sixrevisions.com/0159-23_elegant_patterned_web_design_photoshop.jpg) (http://designinstruct.com/web-design/create-an-elegant-patterned-web-design-in-photoshop/)
23. Design a Clean Corporate Website Layout (http://psd.fanextra.com/tutorials/design-a-clean-corporate-website-layout/) Learn how to incorporate stock photos in your website layout's header in this tutorial.
(http://cdn.sixrevisions.com/0159-24_clean_corporate_website_layout.jpg) (http://psd.fanextra.com/tutorials/design-a-clean-corporate-website-layout/)
24. How to Create a Colorful Business Web Layout (http://www.ultimatedesignertoolkit.com/tutorials/create-colorful-business-web-layout/) This Photoshop tutorial will demonstrate how to incorporate icons in your web designs.
(http://cdn.sixrevisions.com/0159-25_colorful_business_weblayout_photoshop.jpg) (http://www.ultimatedesignertoolkit.com/tutorials/create-colorful-business-web-layout/)
25. Design a Textured "Coming Soon" Web Page in Photoshop (http://designinstruct.com/web-design/design-a-textured-coming-soon-web-page-in-photoshop/) Learn to make a simple web design with beautiful textures in this Photoshop tutorial.
(http://cdn.sixrevisions.com/0159-26_textured_comingsoon_webpage_photoshop.jpg) (http://designinstruct.com/web-design/design-a-textured-coming-soon-web-page-in-photoshop/)
About the Author
(http://cdn.sixrevisions.com/authors/marcell_purham_small.jpg)
Marcell Purham is the founder of Webdevtuts (http://www.webdevtuts), where he writes tutorials. He is also a freelance web developer and designer, check out his portfolio (http://www.marcellpurham.me). If you would like to keep in touch with Marcell, follow him on Twitter: @marcellpurham (http://twitter.com/#!/marcellpurham).
Source: Six Revisions