[Re]Encoded.com

25 Helpful Photoshop Tutorials for Web Designers

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.
Enjoy!

WEBSITE LAYOUTS

How To Build Your Own Single Page Portfolio Website

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.

Design a light WordPress theme

Learn to create a  light WordPress theme with a web 2.0 look. Here simplicity is the key for a clean and appealing layout.

Clean blue web layout

Create a clean blue web layout using the 960 grid system.

Professional Web 2.0 Layout

Very detailed tutorial in many steps to help you create a good looking web 2.0 layout.

How to Create an Illustrative Web Design

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.

Realistic website layout

Here you will use stock images and textures as part of creating a realistic office desk themed layout.

Light and Sleek Web 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.

Apple inspired website layout

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.

Unique Grungy Website Layout

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.

Band website template

Intermediate tutorial, showing you how to make a grungy-style band website template.

VARIOUS ELEMENTS

Latest Tweets Box

Here you will learn how to create a unique content box for your twitter feed on your WordPress blog.

Animated banner

Use Photoshop to create an animated leaderboard banner. Learn how the animation/timeline panel works and how to use it to create great animations.

Content Box With Orange Banner Heading

In this tutorial you will learn how to create a content box where the corners are rounded and the heading has a 3D effect.

Apple Navigation Bar

Learn how to create the Apple navigation made famous by use on their website.

Create a Slick and Clean Button

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).

Create a Dark Modern Contact Form

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.

Nice ‘n’ Simple Subscribe Badges

In this Photoshop tutorial you’ll be making cool supermarket-style badges, then turning them into subscribe buttons for your website.

Delicious “Contact Me” Button

Learn the steps to create this “Contact Me” button in Photoshop. A simple tutorial, great for beginners to learn a few tricks.

Simple & Sleek Web 2.0 Site Footer

Never underestimate footers!  In this tutorial you will learn how to produce a sleek looking site footer in Photoshop.

Professional Glossy “Download” Button

Learn how to design a simple, professional & glossy multi purpose button, «download» used as example.

Blue gradient website header

Create a nice blue gradient website header with a shiny navigation bar.

RSS button

Learn how to make a good looking RSS button with this tutorial.

Clean and Fresh Call-to-Action Button + Embossing Text Effect

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.

Create a Beautiful, Unique Website Header

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!

Design a Web 2.0 tab with Photoshop

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.
Good luck!