In this collection I’ve found some Photoshop tutorials for you to get inspired from and learn new tips and techniques for your web designs. This roundup contains tutorials from various websites and authors. Here you will find tutorials on how to make a whole website layout and also smaller elements, like buttons and footers.
Did you ever want to start designing some websites for yourself, friends or do you just want to learn a new thing or two on this topic related to Photoshop? Here is a collection with a good variety of different styles for you to learn from.
In this tutorial you will have a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.
Learn to create a light WordPress theme with a web 2.0 look. Here simplicity is the key for a clean and appealing layout.
Create a clean blue web layout using the 960 grid system.
Very detailed tutorial in many steps to help you create a good looking web 2.0 layout.
Learn how to create a professional web design with an illustrated vector header. Techniques included are using the pen tool and type treatment using layer styles.
Here you will use stock images and textures as part of creating a realistic office desk themed layout.
Light and sleek layout in Photoshop using 960 Grid System, and if you haven’t used it before, no problem, you will know how to use it after you’ve tried this great tutorial.
This tutorial shows you how to create an apple inspired website. Gives you a very clean and appealing end result. With small modifications you can transform this PSD layout into a wordpress theme if wanted.
This tutorial teaches you how to design a cool grungy website layout. It walks you through various Photoshop techniques and outlines general design principles. It also provides pointers for your own grunge designs.
Intermediate tutorial, showing you how to make a grungy-style band website template.
Here you will learn how to create a unique content box for your twitter feed on your WordPress blog.
Use Photoshop to create an animated leaderboard banner. Learn how the animation/timeline panel works and how to use it to create great animations.
In this tutorial you will learn how to create a content box where the corners are rounded and the heading has a 3D effect.
Learn how to create the Apple navigation made famous by use on their website.
This tutorial shows you how to create a simple and clean “Web 2.0 style” button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).
In this tutorial, you’ll be creating a dark, modern contact form in Photoshop. Use some layer styles and other basic effects to give a metal cut-out look.
In this Photoshop tutorial you’ll be making cool supermarket-style badges, then turning them into subscribe buttons for your website.
Learn the steps to create this “Contact Me” button in Photoshop. A simple tutorial, great for beginners to learn a few tricks.
Never underestimate footers! In this tutorial you will learn how to produce a sleek looking site footer in Photoshop.
Learn how to design a simple, professional & glossy multi purpose button, «download» used as example.
Create a nice blue gradient website header with a shiny navigation bar.
Learn how to make a good looking RSS button with this tutorial.
In this easy tutorial, you will see how simple it can be to create effective, clean and fresh call-to-action button. This will surely attract visitor’s attention, with a quick way to create this trendy embossing text effect.
In this tutorial, you will see how to create a beautiful, unique, abstract website header in just a few easy steps. The abstract lighting technique is one you’ll “Wow” a lot of visitors with!
A guide to give you an idea how to design a nice sleek tab menu in Photoshop, Web 2.0 style.
Those were our picks of 25 useful photoshop tutorials for web designers. I hope you have learned some new tips and techniques along with gaining new inspiration. Remember to play around with settings and colors to add your own touch to these designs.