Design a Modern Pricing Table in Photoshop
videos

Design a Modern Pricing Table in Photoshop

on Aug 27th 2012 with 39 comments
Tutorial Details
  • Topic: Photoshop site element design
  • Difficulty: Beginner
  • Screencast duration: 62 mins

Final Product What You'll Be Creating

Download Source Files
This entry is part 1 of 2 in the series Modern Pricing Table

Modern Pricing Table

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!
Series NavigationBuild a Modern Pricing Table With HTML and CSS >>

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://richardmisencik.com Richard

    Great, I love it :D Cant wait for the coding part, hope it will be soon :)

    • http://www.snaptin.com Ian Yates

      Scheduled for next Tuesday :)

      • http://richardmisencik.com Richard

        Cant wait that long :D

      • http://richardmisencik.com Richard

        And thanks for the info (sorry for spamming :D)

  • Joseph Villajin

    Great tut! I got some really good keyboard shortcuts to use in photoshop now. I had a quick question: How do you get those align bars to show up when you move elements? Are you holding down a key while moving the element with your mouse? Thanks!

    • http://www.adipurdila.com AdiPurdila
      Author

      Those are called Smart Guides, you can activate them at View>Show>Smart Guides in CS5 ;)

      • Joseph Villajin

        LIFE SAVER! Haha I hate pixel counting =\

  • Pingback: Design a Modern Pricing Table in Photoshop | Shadowtek | Hosting and Design Solutions

  • http://www.cardistry.ro Klauss

    Guys, pls post better tuts on design. You are giving us only small parts of your knowledge or just throwing away an article. I would really be pleased to see how do you documentate or create a Design concept to 0 , using some steps , basic grids of thinking and how you search material.

  • Joe

    Great tutorial. Learned many new things. How are you duplicating layers? You’re selected layers and then seem to drag them and they duplicate. Are you holding a key down when you drag?

    • http://www.adipurdila.com AdiPurdila
      Author

      You can hold Alt and drag with your mouse to duplicate a layer or group of layers :)

  • http://nikashi.com Nicolas

    Very impressed with your tuts, first time here and have already learned a few new tricks. Take care and will read more, Glad I found this.

  • Dacia

    Hi Adi,
    I totally felt your pain (I do live software training webinars also) and I think I know what the problem may have been for you when you were trying to use the adjustment layer with the clipping mask. It was likely the gradient effect on the green button that was causing the problem. For some reason, layer effects like gradient and color overlay supercede other layers since the adjustment layer seeks to adjust only the fill color when using a clipping mask. Odd that it works outside of the clipping mask though. Hope this helps.

  • Brian

    Thanks for the great tutorial…

    I’m new to Photoshop… still learning my way around. So, can I ask a stupid question?

    When I create a new shape (rectangle, line etc…), it automatically inherits the Fx from previous shapes created on layers below it. As soon as I draw it on a new layer, it already has “Drop Shadow, Stroke etc…” displayed under the icon.

    I’m sure it is obvious… but, I’ll swallow my pride and ask… what do I need to change so a new rectangle on its own layer starts with no effects or styles applied?

    Thanks!

  • Techeese

    I’m getting loco on which to use on this design Div’s or Table. O_O)
    its tabular data but.. GARRRR!
    please
    Div base and Table please on the next article

  • Rafal Borowski

    I love this sophisticated simplicity :) Keep it up Adi.
    BTW. Your clipping mask diddn’t work because of the gradient overlay. When you clipped it the gradient override the brightning effect.

  • http://drunkgopo.deviantart.com Miron Catalin Gabriel

    Hello Adi,

    About your little problem on Brightness/Contrast … your mask it’s all white… so when you create a Brightness/Contrast you should marquee your selection to define the actual part to create a custom Brightness/Contrast. Brightness/Contrast works only on selected sections.

    Romanian: Mai pe scurt, pentru a functiona Luminozitatea/ Contrastul trebuie sa selectezi zona care sa fie afectata. Prima data nu ai selectat nimic, de aceea masca era alba.

    Good day and nice tutorial.

    PS: Sorry if my English is bad :) i`m working on.

  • http://www.chefkhawla.com Ahmed Abbouh

    Great like always and we still waiting for coding part Mr Adrian :)

  • http://www.adipurdila.com AdiPurdila
    Author

    Hey, thanks for your replies about my Clipping Mask problem guys, I’ll definitely know in the future :D

    @Brian, Photoshop will often apply the most recent layer style automatically. In my knowledge, it’s not possible to turn it on or off, it’s just there by default. I’ve been faced with it many times, but usually I just clear the styles and don’t bother with it. However, I’m not all-knowing and since we have a great community here, we can ask them :D

    So, if anyone knows if that inherited style PS applies to newly created shapes is somehow configurable from anywhere, leave a comment ;)

    Thanks!

    • Brian

      Thanks for the reply!

    • Rafal Borowski

      Yes Adi it is configurable. I left you a comment below on that issue.

  • Kevin

    Nice tutorial! Question: How do you go about choosing your colours?

    • http://www.adipurdila.com AdiPurdila
      Author

      Well, I usually start with the darker ones, like the top BG one. After that, I just randomly choose one that fits best. This works obviously here since it’s a small scale project, but on a large website I’d recommend using Adobe Kuler or something similar. Or, if you’re designing a website, go with the logo colors or get something that match those.

      Hope this helps,
      Adi

  • santrozen

    liked it! waiting the html and css code.

  • k0sa

    what to do to have these pink lines on alignment?? I have PS CS5 on PC and i dont have this.

    • http://www.adipurdila.com AdiPurdila
      Author

      They’re called Smart Guides ;)

  • Rafal Borowski

    @Brian and AdiPurdila
    I’ll just made a quick image to explain how to make new shapes without style: http://bit.ly/qaTq57

    BTW. Adrian I know you’re using ScreenFlow for recording your casts (if i’m wrong correct me please) but it’s only for mac. Can you reccomend another just as good screen capture software for windows 7? I would like to record my own screen cast.

    And one more question. I can see 720 and 1080 icons in upper right in your PS. What is that? I don’t have it on my PS 5 Extended (CS5 for windows). I am working in a 1920×1080 resolution. Is it a switch for casting 720/1080?

    • http://clowdify.com Filipe

      Actually that is a workspace u can create yourself. If you click the arrow icon it will give u the option to create ur own and you can name it whatever u want, 1080, graphics, web design, etc. It all that depends on the way u have set up that particular workspace.

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks for clearing that up Rafal, very handy :D

      About the cast app, I do use ScreenFlow, yes. When I needed something for Win, I used Camtasia Studio, worked pretty good for me, but that’s as far as I tested.

      About the 720 icons, Filipe is right, they’re configurable workspaces. I use those to switch panels and stuff when I change the screen resolution, it’s much easier for me that way.

      Good luck with your own screencast and if you need any help with it send me a shout ;)

      Adi

      • Rafal Borowski

        No problem Adi :)

        As for the cast apps, I’ve already made some research and thought about Camtasia Studio 7 – just as you mentioned. Will try that and if I have some unsolvable problem I will contact you :)

        Waiting for the coding part of this tut. Lowe to watch them in my free time. No matter how much you know about designing or coding there is ALWAYS something you can find handy and learn new stuff. Keep up the good work. Best to you Adi.

        Rafal

    • Brian

      Thank you! That’s exactly what I was looking for…

  • http://www.vision-ps.de irfan

    great work Adi Purdila.

    we are waiting for coding part

  • http://alexandrawd.wordpress.com Alexandra

    Nice work. Looking forward to the next tuts.

  • Andrew

    Hey there! Thanks for tut!

    Speaking about clipping mask issue, here’s other solution:
    Instead of making another clipping/vector mask for adjustment layer you only need to open the Blending Option panel and check “Blend Interiors Affect as a Group” and uncheck “Blend Clipped Layers as Group “. Such solution allows you not to be tied with layer shape.

    P.S. Sometimes you need to set up different blending for layer with predefined styles (gradient-, color – overlay). In such case, just check “Blend Interiors Affect as a Group” and see blending results.

  • eddie

    Can someone point me to the code tutorial for this please?

    Thanks.

  • http://imkreative.com Clemente Gomez

    Great Screencast Ian. Looking forward to next Tuesday

  • Dougieladd

    As always Adi a great tutorial… looking forward to part 2!

  • Danil

    Hello Adi. I noticed that You always know hex nuber of color. Tell me, you remember all of them or you have some technic to know which number you need. Thanks.

  • http://think360studio.com/ Think360studio

    Hi Adi. As a web designer I really need this pricing table and you saves mine lot of time by giving down loader also. Thanks for sharing such a valuable article.