Site Elements

Design a Modern Pricing Table in Photoshop


We're going to create an enticing and informative pricing table. During this screencast we'll tackle the design stage in Photoshop, then next week we'll complete the process by building the HTML and CSS version, ready for web deployment. Let's dive in!

Republished Tutorial

Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in August of 2011.

Watch Screencast

Alternatively, Download the video in HD, or subscribe to Webdesigntuts+ screencasts via YouTube!
Related Posts
  • Music & Audio
    Mixing & Mastering
    An Introduction to Mastering With Ozone 5Ozonepreview
    iZotope's Ozone Advanced 5 is perfect for mastering your own tracks, especially if you're on a reasonably tight budget. In this screencast tutorial we'll have a look at how to do basic mastering with Ozone, using Insight for metering. Read More…
  • Web Design
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Music & Audio
    Audio Production
    Easy Audio Production for Voice-oversVoiceoverpreview400
    This screencast takes a look at processing voice-overs and the spoken word using Logic Pro. If you produce podcasts, radio shows or screencast tutorials, this is for you.Read More…
  • Web Design
    Applications and Tools
    Building Semantic Grids With GumbyGumby semantic retina
    In this tutorial we're going to build ourselves clean, readable markup with the help of Gumby's semantic grid structure. We'll continue working with the example we started in the previous lesson, getting rid of as much unnecessary mess from our code as possible, plus we'll be using Sass to speed things up.Read More…
  • Web Design
    Tumblr Theme Operators and VariablesTumblr 3 retina
    In this tutorial we'll be taking a detailed look at how Tumblr's theme operators and variables slot content into your theme markup.Read More…
  • Web Design
    Introducing Gumby: An Alternative CSS FrameworkGumby intro retina
    Let me introduce you to Gumby; a flexible CSS framework, currently at version 2.5. Gumby is packed with useful features, which we'll examine throughout the course of a few screencast tutorials. We'll begin by exploring its straightforward CSS variant, the UI kit, the grid, a host of other tricks, then in later videos we'll take a look at Gumby's Sass version.Read More…