Get our posts emailed to you with our monthly newsletter, subscribe here.

Some designers advocate skipping the Photoshop process and moving from wireframes directly into HTML/CSS. This is possible for smaller projects but not always advisable. Adobe Photoshop offers the best tools for testing color schemes, gradients, icons, and detailed page elements before moving the layout into your browser.

If you’re a little rusty in Photoshop then these tutorials should get you back into the groove. I’ve collected 28 web design tutorials centered around Photoshop techniques for designing typical page elements. Most are simple enough that you can follow along without much prior experience in the software. But even the more advanced tutorials can offer insights and help newcomers understand the digital design process.

Flat Web Design in Photoshop

flat ui tutorial howto photoshop design tuts designmodo

Pricing Plan Boxes

psd howto tutorial photoshop pricing plan tables

Calendar Icon

howto create calendar icon in photoshop design

Mini vCard in Photoshop

design mini vcard in photoshop howto

Toggle Switches

adobe photoshop toggle switch design tutorial

Large Background Design

viget background design digital paint tutorial

Shape Text Fields in Photoshop

howto shape textfields text photoshop tutorial

Learning Photoshop Layers

how to learn use photoshop layers

Photoshop Smart Objects

adobe photoshop smart objects howto tutorial

Social Share Button

social share icons buttons photoshop

Skeuomorphic Wedding CD Cover

photoshop howto tutorial wedding skeuomorphic album cover

Trendy Retro Layout in Photoshop

howto design trendy retro photoshop website layout

Mobile App Landing Page

mobile app promo marketing website psd layout

Smart Objects in PSD Mockups

psd photoshop smart objects in layout mockups

Clean Multi-Purpose Website

clean white website layout mockup psd photoshop

Colorful Vlogging Web Layout

pink video blogging website psd mockup tutorial

Trendy Professional Website

trendy professional website mockup psd design

Space Themed Portfolio

space theme portfolio landing page design

Mobile Shopping UI

mobile iphone ipad shopping app ui photoshop tutorial

Photoshop in a Web Design Workflow

web design workflow tutorial using adobe photoshop

iPhone App Site in Photoshop

iphone app website design in photoshop

Illustrative Single Page Design

illustration design single page website mockup photoshop tutorial

Watercolor-Themed Website Mockup

photoshop mockup design tutorial watercolor website

One-Page Retro Layout

one page design mockup photoshop website

Mobile Downloader Interface

iphone app ui mobile download interface mockup

Fabric Textured Web Layout

textured fabric website layout photoshop tutorial

Web 2.0 Layout Mockup

professional web 20 mockup photoshop tutorial

Vista-Style Navigation Menu

windows vista gradient nav menu photoshop tutorial

Posted by Jake Rocheleau

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design and web development techniques. You can check out his work on Dribbble and follow his tweets @jakerocheleau.