Create a Dark and Sleek Web Layout Using Photoshop

Jun 2 2009 by Tyler Denis | 62 Comments

How to Create a Dark and Sleek Web Layout using Photoshop.

In this Photoshop web design tutorial, we are going to create a beautiful, dark, and sleek website mock-up centered on an elegant navigation menu that lends itself easily to CSS background sprites.

continue reading »

Coding a Clean Web 2.0 Style Web Design from Photoshop

May 29 2009 by Jacob Gube | 139 Comments

Leading image web design from Photoshop

In this web development tutorial, you’ll learn how to build a web page template from a Photoshop mock-up from a previous tutorial called "How to Create a Clean Web 2.0 Style Web Design in Photoshop" using HTML/CSS and the jQuery library.

continue reading »

How to Create a Clean Web 2.0 Style Web Design in Photoshop

May 20 2009 by Jan Cavan | 188 Comments

How to Create a Clean Web 2.0 Style Web Design in Photoshop

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.

This is a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.

continue reading »

Create a Slick and Accessible Slideshow Using jQuery

May 18 2009 by Jacob Gube | 441 Comments

Accessible Slideshow.

In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

continue reading »

Make High-Impact Backgrounds for Your Designs with Photoshop

May 14 2009 by Tyler Denis | 38 Comments

Make High-Impact Backgrounds for Your Designs with Photoshop

In this Photoshop web design tutorial, you’ll learn about creating dynamic and high-impact backgrounds that you can use on your own web layouts. We’ll go over color/gradient techniques, lighting effects, and using textures and patterns.

continue reading »

How to Create a “Worn Paper” Web Layout Using Photoshop

May 12 2009 by Matthew Heidenreich | 37 Comments

How to Create a Worn Paper Web Layout with Photoshop.

In this tutorial, you’ll learn how to create a textured "worn paper" web design theme using some basic Photoshop techniques. The design incorporates some free stock images to let you create a beautiful layout in a jiffy.

continue reading »

How to Create a Slick and Clean Button in Photoshop

May 7 2009 by Jacob Gube | 131 Comments

How to Create a Slick and Clean Button in Photoshop

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

continue reading »