How to Wire-frame in Photoshop

How to Wireframe in Photoshop: New Premium Tutorial

on Sep 30th 2009 with 52 comments

Just as you wouldn’t build a house without a blue-print, the same is true for web design. This in depth Premium video tutorial will teach you about the advantages of properly using wire-framing when designing in Photoshop. Become a member!


Sample

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at Nettuts+, Psdtuts+, Audiotuts+ and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!


 
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.

Hi there! My name's Tylor. I am an avid Website designer from Michigan USA. Everyday, I am learning something new and hope to continue growing my passions forever. You can follow my various ramblings and helpful link findings at my Twitter account @TylorSkory. Thanks!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.jadgraphics.net Jad Graphics

    Looks like a good tutorial.

  • http://evanriley.net Evan Riley

    But for some reason, this makes me think they used the .PSD from the 960 grid system, but I haven’t read it yet. So I wouldn’t know.

    • http://atradesigns.net/Atra Max

      The thumb is the PSD from the 960 gs, the 16 col to be exact.

  • Santana

    nice tutorial!! status: Downloading =]

    • Santana

      edit: status: watching LOL

      • Rik Girbes

        :P

  • w1sh

    Gridmaker. Just saved someone another $9/mo. Go me!

    • leo

      i am with you!!!

  • iPad

    It’ll be always better in Fireworks, I do not recommend Photoshop for wireframing, the perfomance is toooo BAD!

    • http://vampa.org Alex Stomp

      false

      • Andrew

        The performance is fine for wireframing, not sure what your talking about, I do all of my wireframes in photoshop.

      • http://www.datamouse.biz DataMouse

        Sounds like it’s time to upgradeyour graphics card :)

        I ONLY use Photoshop for wireframing. Fireworks is OK – but I much prefer PS.

        I only get slow performance if I’m heavily zoomed in and making anything that is anti-aliased (like eraser or brush stuff).

      • Rich

        Clearly you have no idea the power of wireframing in Fireworks vs Photoshop in terms of linking pages together with global and local layers etc…, so please dont write pointless comments like “false” with no explanation.

        Photoshop is fine yes, but Fireworks is better … Fireworks was designed and built for web site prototyping, photoshop wasnt – fact.

      • Ben Carroll

        I am thinking what he means is the workflow just isn’t as good as FW. Personally I much prefer FW to PS or any other app for wireframing. The biggest advantage is the use of pages in FW that really helps me with my wireframing. And the fact that I can quickly go to prototyping and show functionality to my clients.

  • Matt

    Or just save time and get blueprint or 960.gs.

    There are a bunch of free tutorials on here that I would say “Yeah, make that a plus tutorial”. This one isn’t it, just because there are 3rd party alternatives out there that do the same thing for free, and much faster in fact. If I can find it, I have an Air app that is built to do this.

    Hate to be so negative, but there are too many free, Plus-worthy tutorials, but not many non-free, plus-worthy tutorials.

    • http://www.jeffrey-way.com Jeffrey Way

      This tutorial discusses the benefits of grids like 960. Sure, we all know that you can download a grid anywhere – but that’s not really the point.

      • http://sffarlenn.net Laneth

        When I think tutorial, I think I’m going to learn something – I don’t think that I’ll be coming here to download a Plus tutorial to learn something I’d already know.

        As someone who’s only just learning about wireframing, this is – again – perfect timing from NetTuts+ – Thanks Jeffrey, and thanks Tylor for the tut!

        Signed – another happy Plus Member.

      • http://www.sorinistudor.ro Sorin Istudor

        You have a tutorial about that Jeff with the 960 grid. How is this much better then yours?

  • Nikola

    I’m enjoying this tutorial.. very informative.

  • http://www.paulbaarn.nl Paul Baarn

    Nice tutorial, although I wondered why you didn’t use guides for positioning instead of dragging around stuff and turning layers on and off.

    I’ve made two scripts to create any grid I want in Photoshop CS3. I don’t have CS4 and I’m not a programmer so no support for that, but if you want the scripts you can download them from here: http://www.paulbaarn.nl/gridmakercs3.zip

    • http://ivapelcova.com/ Ivy

      It works great in CS4 ;)

      • http://www.paulbaarn.nl Paul Baarn

        Thanks for the info. :-)

    • http://www.crayonsdevelopment.com Rishi Patel

      You are awsome man…….works great in CS4

  • http://www.neotericuk.co.uk/web-design.php Website Design

    thanks for sharing great information here. Another Good One from Net.tuts
    Surely help in my forthcoming projects.

  • http://www.datamouse.biz DataMouse

    Is it me or does there seem to be a big push on wireframing?
    There’s 3 tuts here on the subject in the last week.
    Web designer depot (sponsor) has a “why wireframe” article.

    Is WF the latest fad?

    • elkaz

      You don’t do a big project without wireframing so it’s not really a fad, it’s a necessity for people who are getting into professional web design.

      • http://www.datamouse.biz DataMouse

        Of course you don’t start without a model/wireframe :)
        The statement wasn’t about the necessity of the process – it was about the apparently sudden focus on the process
        :)

  • No

    When I see ‘tutorials’ like this pop up here, with people saying things like “false” in response to “use Fireworks instead of Photoshop”, I’m so very, very glad that I’m not a paid up member of this site.

    Garbage.

    • http://www.datamouse.biz DataMouse

      Miserable b@$tard :)
      One comment and you’ve written off one of the greatest resources on the web?
      They’re both tools. If you’re more comfortable with one than the other, use that.
      Don’t be so immature that you can flame and write off great content on a whim.
      Tit.

      • Matt

        False.

  • Jason

    Nice tutorial, I only wish that you would of spent less time explaining the basic English definitions of every single word and more time on how to use the grid system, I really enjoyed the instructional part just try to realize that the listeners are not 1st graders

  • Jason

    I just wasted an hour and a half watching this with the hopes of learning how to use the grid system to make websites, unfortunately this tutorial just shows how to make a photoshop image that looks like a website or a wireframe but never shows how to convert the wireframe into a website. If anyone out there knows how to and would like to make a tutorial it would be very very useful for a wireframe tutorial that shows how to make a wireframe into css/html. I would of skipped this if I had known that it was only on how to make a graphic and then it stops there, you have to find out how to do the HARD part on your own

  • http://www.dominiondigital.com Darrell Estabrook

    So, while you can use any tool you’d like for Wireframing, the purpose of wireframes are not to focus on layout but to document the screens of a site/system and the functionality/features.

    I find Fireworks and Photoshop focus me too much on the precise placement of elements on the screen. It consumes too much time ensuring formatting and layout not to mention having to make revisions with the client. Wireframing to me is a rapid development that works out the overall architecture of the site and helps validate the right functionality is on the right screens, then I dive into the polishing of design in Photoshop.

    A tool I’ve had great success with is Axure. It’s not meant to design in, but to Wireframe. It also has the benefit of outputting a Clickable Wireframe which is great for getting preliminary user input and rapidly improving your site/application. Check it out: http://www.axure.com

  • David Ferguson

    I’m sorry, just my personal opinion, but some a nice chunk of the stuff leading up could have been cut. Too much fluff. Seems like the author was trying a little too hard.. Maybe it’s just me.. ? I got bored with the video and quit watching because there was too much fluff info thrown in.

    Maybe I’ll go back and one it one day.. It just isn’t holding my attention at all for now though

  • Jimmy

    Nice tutorial Tylor..i like the way you take your time and explain things. Some other screencast have people talking in light speed because their in a rush. I realise that you can never please everyone. Would be great if there is another tutorial to take this wireframe and come up with a design. :)

    • http://www.twitter.com/tylorskory Tylor

      Yes. That is a really good idea. I am actually working on the design from the Wireframe right now. It would make a great tutorial so I will definitely consider that!

  • Smuliii

    I can download screencast but not actual .zip file. And problem is link address: “http://tutsplus.com/s3.php?file=”. As you can see there isn’t file in address. So please fix that.

  • http://www.jeffadams.co.uk Jeff Adams

    Great, I’ve been looking forward to a plus tutorial that isn’t about some vague jQuery function that I won’t use – the quality has been poor lately (by poor I mean not to my taste not poor as in crap lol).

    Someone on here wrote about Fireworks – while i agree with them in principal, in practice it’s quite expensive to have Photoshop AND Fireworks, though I have to admit it made my life so much easier in Fireworks!!

    • Ben Carroll

      Thats why you buy the suite. But I do admit it is quite pricey. Especially when it comes to upgrade time. But I try to make up the costs in one job.

  • http://auxanocreative.com Susan

    I really appreciated this tutorial. I have just started a new website design for a client and really wanted to try using a grid system of some sort. I just didn’t understand what to do with it. I’m a visual learner, so this tutorial really helped!

    I couldn’t for the life of me create horizontal lines and have them distribute evenly (vertically), so I am using a combo of the 960 16-column grid plus the grid in Photoshop customized to be 20 pixels apart.

    This is working great! Thank you!!

    • http://www.twitter.com/tylorskory Tylor

      Thanks, I am glad you found it helpful! It sounds like you came up with a good solution. Good luck on your new design :)

    • http://akido.dk Alexander Carlsen

      Exactly what I do too myself. Making a bunch horizontal lines like this just seems off. If you want to enlarge your canvas size, you need to redistribute them again.

      Nice tutorial though. It was a good reminder to why I use wireframes.

  • http://www.jeffadams.co.uk Jeff Adams

    i just watched this – 1 hour 30 mins and it was way too long. Sorry to be so rude but come on, this was pretty poor for a paid tutorial. I hope this doesn’t sound too harsh but what I’m getting at is this could have been crammed down to 20 mins easily.

  • http://www.twitter.com/tylorskory Tylor

    Thanks for all the comments, guys. I really enjoy hearing what people like and don’t like about the tutorial. It’s very informative for me, as the author.

    As to the Fireworks vs. Photoshop debate, I would definitely recommend people try out using both and seeing what works best for their individual workflow. I know for me personally, I like to use Photoshop but I understand completely that others will use Fireworks.

    • Chris M.

      Hey Tylor,

      Although it was a bit long, I really appreciated the detail and thorough explanations. But yeah, it could have been a little more-to-the-point. Good feedback to keep in mind for future reference.

      Keep sharing!

      Respectfully,
      Chris

  • Jaysone

    Is there any tutorial that shows you how to take a wireframe and turn it into a design? Thanks

  • http://aerendyl.deviantart.com/ Aerendyl

    I am new into Web Design and Development and i really liked the tut. I got it why I should use wireframes and why to better plan an website. Thanks a lot!

  • edwin

    hi, there seems to be a problem with my subscription, i can’t see anything

  • Rune

    Hmmm Wireframes ehh. The type of wireframes I use are for interactive early prototyping and not positioning of layout elements,

    Did this term get all muddied up and become something it is not. I know grids look like wireframes but er…

  • Igor

    – thinking as a dummy user —

    Hmm… wireframe, right?

    Afterall, what’s the difference between the actual final design and a pretty grid-based wireframe? Nice colors and typography? A big logo? Why is my site black/white when I asked for high use of colors??

    — /thinking as a dummy user —

    I can understand if you say you want to show your client the idea in a ‘professional looking’ way, but I honestly think this approach is an attempt to overcharge the client. Who is going to pay for all this nicely designed wireframes? Or you want to make them for free?

    Wireframes are definitely not a deliverable for a typical client – which is in general more interested in having a website and not in reading/having access to extensive documentation; it’s just too abstract for them to understand what it means. I’d only deliver this kind of blueprint if another team of developers/designers would join the project I’m involved.

    There’s no need to make it pretty. It has to work. It has to be quick. It has to communicate the proposed interaction among your team.

    And even a napkin can do that: http://www.alistapart.com/articles/paperprototyping/

  • Matias Baldanza

    I just watched this tutorial. Great work. I can see that a newbie can learn a lot from this video, because Tylor made a great effort in giving an in depth introduction to the subject of wireframing. Another great point about it is that it’s not so fast that you have to pause and go back a lot to understand, because explanations are given at a nice, calm pace.

    Anyway, the point I’m trying to make is that this is a great tutorial for beginners.

    Jeff: Wouldn’t it be useful to tag tutorials using something like “beginner”, “intermediate”, “advanced” so a visitor can know what to expect before watching them?

  • http://ramon.com.ua Ramon

    http://960.gs/
    That’s all, what you need.