digg

Join DiggAbout

The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.

Webdesign mockup using Photoshop

theundersigned.net — Through images and a small amount of text, an example is shown of how to make webdesign mockups in Photoshop. Yet another addition to the webdesign workflow articles.

show profanity settings
expand all
  • WeeklyGeek, on 10/12/2007, -3/+14pretty good explanation of how to mock up a page. surprisingly, a lot of people dont know how.
  • nuggetbro, on 10/12/2007, -6/+6Damnit man, this site really writes good articles, I just love it.
  • Silkjaer, on 10/12/2007, -13/+6Thanks a lot :)
  • tranz, on 10/12/2007, -10/+13nice tips :) tho i find other software better for making site layouts & design :/
    • extreme101, on 10/12/2007, -1/+6care to let us know what you prefer?
    • weareglass, on 10/12/2007, -2/+7Why would you mod that nice comment down? The person's just expressing the opinion that Photoshop isn't your only comping option. Frankly I'm always surprised how many people use Photoshop for this, I found Fireworks to be a much better solution, although these days I use Illustrator simply because I'm comfortable in it. I think the reason a lot of developers use Photoshop is it's all they know, but there are a lot of other professional tools available that apply to web design, closed- and open-source.
    • Syntaxis, on 10/12/2007, -0/+5Photoshop became popular because it was there before Fireworks etc. Thus tutorials were written, websites created, MS Paint mocked, and then file sharing became common knowledge. People download Photoshop, people adore Photoshop, people make sites in Photoshop. And frankly.. it works fine :-)
    • abccba57, on 10/12/2007, -0/+2I personally prefer Illustrator as i allows me to specify location to place objects, object width/height, etc. It is a lot more precise to get layout done.
    • velo, on 10/12/2007, -0/+0I have to admit, I'm using Corel for almost all things graphic since it was one of the few reasons to Boot Windows 3.11 - it does a decent job and is not that expensive (especially when you are a student). The latest Version also breaks the (IMHO) curse of bringing just a little bit more suckiness with each of the three releases after Corel 9. Its a shame that it does not run under Wine, though.
  • skwashd, on 10/12/2007, -11/+14how about a GIMP version? ;)
    • bryanl, on 10/12/2007, -13/+14I concur. Everyone that develops web applications can neither run or afford Photoshop. I believe Gimp can do the same thing.
    • localzuk, on 10/12/2007, -4/+6Why mod this down? Gimp is a very popular graphical editor for those that use Linux or can't afford photoshop? A gimp version would be useful.
    • mpancha, on 10/12/2007, -2/+4huh? we're not allowed to mention an open source, legally free alternative now?

      I admit I pirated Photoshp up until this year when I could afford a copy of Adobe CS1, even then it was through my company, so not full price, and a used copy. Up until then, I used pirated copies of the adobe suire, until I found Gimp to be as usable as photoshop is.

      What was so horrible about the above post to have it modded down?
    • jrsims, on 10/12/2007, -0/+3Trying throwing the GIMPshop plugin over Gimp. Then go through the tutorial again. Should be pretty similar.

      GIMPshop info: http://plasticbugs.com/index.php?p=241
  • Silkjaer, on 10/12/2007, -2/+6I think the technique can easily be used in GIMP as well, but I'm not sure - I will take a look at it :)
    • troon, on 10/12/2007, -8/+9You must be new here. The correct response from a Photoshop user is "GIMP is for rank amateurs. It doesn't do 16bpp, decent colour management or pre-press CMYK!".
    • localzuk, on 10/12/2007, -3/+6You don't need any of those features if you are making mockups of websites...
    • chrisgac, on 10/12/2007, -0/+2@ localzuk

      I believe that's exactly the point. If one is doing web-work, the gimp is a very powerful tool indeed. In fact inkscape for vector work and gimp for raster work makes quite a graphics powerhouse combo.
  • galeenet, on 10/12/2007, -6/+2Good one and clearly explained.
  • jadedknight, on 10/12/2007, -2/+3Surprisingly, this is always how I make my websites haha. Its great, I thought more people did it like that....
    • RankenPhile, on 10/12/2007, -0/+1So do I. I'm surprised more people don't do it this way.
  • Snakedal337, on 10/12/2007, -1/+4Wow, i've always done it like this too!

    Good to know I was doing something right in my life :-D
  • InternetUser, on 10/12/2007, -0/+6Ok, nice, but I can't believe this is news to people! Very short, more useful would be how to transition from Photoshop -> html/css.
    • pbaehr, on 10/12/2007, -0/+2The author doesn't go in to details regarding the subject, but there is a link at the bottom to the html/css mockup so you can check out the source. Theres no step by step but if you're familiar with CSS it should tell you what you want to know.
  • chris9902, on 10/12/2007, -2/+14To save yourself even more time get a pen and some paper.

    trust me it's the best starting point for any design.
    • localzuk, on 10/12/2007, -0/+1That is what is likely done by most people. So it would go Paper->Mockup->Prelim site->Final Site, the same way most movies are made.
  • icevodka, on 10/12/2007, -3/+6oh come on... I'm sure most of the good web deigners have been using this method for ages.
    and chris9902 is right, always start off with pen and paper first.
  • chrishill, on 10/12/2007, -4/+21you're kidding me, how did this make front page?! Any web designer worth their wages knows to mock up designs in their graphics package of choice before doing any coding, personally I...

    1. Do a rough pen/paper outline
    2. Mock up layout in Fireworks, adding placeholder images, move things around until I'm happy with the layout
    3. Edit/create images as needed in PS to replace mockup's
    4. reconstruct with final images in fireworks, then chop up whats needed

    IMO Photoshop should be used for photo/image manipulation, its what its best at, Fireworks is much more versatile for knocking together layouts.
    • weareglass, on 10/12/2007, -0/+2Amen! Photoshop's great for adjusting photos but not for re-editable design, type control etc. I think Fireworks is possibly the best tool for this, considering it has all of ImageReady's functionality built-in, most of the important abilities of Photoshop as well as decent vector editing that Photoshop is acking.
    • lcarsdeveloper, on 10/12/2007, -1/+2I'm mainly a programmer, so my design skills aren't anything special. But I usually find it easiest to go straight into Fireworks and design things that way. The fact that everything is so easily moved around is what I like the most. I can go back to a design 12 months later and use it as the basis for a new revamped design. Also I can easily select elements and copy them where I need them, it's easy to resize things to exact pixels, the image slicing is easier for me. I have Photoshop, but the only time I use it is when I'm trying to edit someone else's PSD files, for example when I'm changing the SubSilver SDK for phpBB2, or the PSD files for all the VBulletin graphics. Even then it's a big headache, because the program is so hard to use.

      Personal preference. Use whatever you understand well enough to get the job done quickly.
    • levee, on 10/12/2007, -0/+1I mostly do this kind of thing in FireWorks, although Photoshop's font handling is far better. I find FireWorks' fonts - especially images - a bit rough.
    • Zampa, on 10/12/2007, -0/+1I've found ImageReady CS2 to do a much better job of image compression than Fireworks 8 - so I use it for doing my slicing and optimizing instead.
    • mpancha, on 10/12/2007, -0/+4But all members of digg are not professional web designers. Some are just getting their feet wet, and are eager to learn. This article is a good learning tool for that group of people.

      Just b/c it doesn't apply to you, does not mean the article was irrelevant for everyone.
    • kickarse, on 10/12/2007, -1/+2I'd like to see any of your personal websites built in Fireworks...

      Photoshop is THE superior program to use. No if's, and's, or but's. It has far more feature's than Fireworks.

      I think many people are getting design (actual picture) mockup confused with page (coding layout) mockup. And thus don't understand the whole process of building a website.
    • kevincupp, on 10/12/2007, -0/+1I agree with chrishill. I just make a rough sketch on some paper, write the code out in Notepad and make any images I need in Photoshop along the way.
    • szembek, on 10/12/2007, -0/+1exactly why I reported this article as "Ok, this is lame". An article on the front page on how you can layout a page in photoshop before building the HTML... umm duh?!
    • skidooer, on 10/12/2007, -0/+0That was once my method too, but I've begun to prefer starting with the HTML and CSS stage. It's just as easy to visualize and create from the markup as it is from a mockup, so the mockup stages become redundant. I can go back to my image creation tools to fill in the graphics as necessary.

      I feel both methods have merit, and each should be used when appropriate.=
  • jpmoriarty, on 10/12/2007, -6/+1Government requirements for websites state that commissioners should never accept graphic "mockups" of sites without underlying HTML. A lot of people who follow this tutorial will then plough into creating hundreds of nested tables to get the site looking like it did in photoshop.
    • Silkjaer, on 10/12/2007, -0/+5Making a mockup before coding the site gives a better possibility to quickly make changes to the design, in order to match a clients wishes -> when client is satisfied, voila, make the html
    • bbabics, on 10/12/2007, -0/+4Instead of the term 'mock-up' I'd recommend calling it a "comp". Secondly, emphatically, a client is almost always going to want to see a comp of the website before any coding goes into the site. This is especially important if the project is paid by the hour as opposed to an agreed lump sum of money for the project. In all my experience I've never come across a client that does not want to see a comp first; except perhaps, the obligatory free church website here and there. Moreover, I would consider it very amateur to not include a rough sketch at the least if a comp at all.
    • Lounger540, on 10/12/2007, -0/+1They're called, DIV and SPAN. No one should except for maybe making a table.

      It's very easy to reproduce a complicated photoshop with some well organized DIV's.
    • mpancha, on 10/12/2007, -0/+1Every site I've made since a digg article I read on how to code a site using CSS (can't remember the article at the moment otherwise I'd link it), has been table free. Layer does not equal table element. The purpose fo using the layers and so on in the mockup in photoshop is to organize your thoughts, so you can adjust things, hide things, shuffle them around. ANd when you have an end product, you code in whatever manner you feel comfortable in to make the end web site.

      If that means tables galore, so be it. For some that's what works best.
  • Silkjaer, on 10/12/2007, -0/+5InternetUser> Actually this is kinda a part of a longer row of articles:
    1. http://theundersigned.net/2006/04/my-web-designing-workflow
    2. http://theundersigned.net/2006/04/my-web-designing-workflow-part-2
    3. http://theundersigned.net/2006/05/from-xhtmlcss-to-wordpress (detailed description of the process from xhtml/css to a WordPress theme, as an example on the CMS integration part mentioned in the workflow articles)
    4. http://theundersigned.net/2006/05/webdesign-mockup-using-photoshop (an example of how i do the mockups in photoshop - where in the process i do the mockup, is explained in the workflow articles)

    Chrishill> Maybe mocking it all up in fireworks works, but my experience is that you'll quickly get a lot of uneccesary images and messy markup. Doing the mockup in Photoshop (or any other image editing application, that handles layer sets/groups), you can quickly move around, hide or change any given element on the site - which is the point with the mockup. Quickly change colors, placements etc, and have something to show a client, you can easily modify till the final mockup is ready. Then coding it all by hand afterwards, using as few images as possible.. From the mockup i havent done any chopping or anything, and the final html/css uses very few images.
    • mzkw, on 10/12/2007, -2/+2Thanks for the info.
    • flyingbuddha, on 10/12/2007, -0/+1Silkjaer> great tutorials! Thank you. You mentioned that you could provide more detals for the step where you go from mockup to xhtml/css. I would love to get some pointers!
      Thanks again!
    • tablatronix, on 10/12/2007, -1/+3I think your mistaken. Fireworks is an image creation program not editing. It has layers and groups. And object groups and paths etc.rnThe stuff your stating is exactly the reasons why fireworks is good for this.rnrnExtra images and markup ? rnAre you reffering to dreamweaver? Because fireworks doesnt create images or markup. Its uses vectors. Which means every thing stays editable always. Even filters and effects.rn
  • samuelcotterall, on 10/12/2007, -3/+1Pen and paper.

    That should always be the first point in designing a website, then a XHTML+CSS frame, then use that to build around.
  • postlogic, on 10/12/2007, -0/+1Doing this in Gimp would be fairly straight-forward. The only real difference is the fact that Gimp doesn't (yet?) support layer sets. This can easily be overcome by some clever layer naming as well as a bit of patience. Sure, Gimp doesn't have all the bling Photoshop boasts (bling here is positive), but it can do web design, and mockups, with ease. You don't need CMYK and you don't need 16 bpp.
    • conigs, on 10/12/2007, -0/+1Not to nitpick, but it's actually 16 bits-per-channel, not pixel. An 8bpc image actually has 24 bits-per-pixel (8 each for red, green, and blue). Actually, 32bpp if you include alpha.
  • SnOwie, on 10/12/2007, -1/+4The first thing should be thingking about a good concept !
    Most sites already look alike..or have no added value.

    A succesfull site is first of all being creative, an you can't learn that in a tutorial.
  • brandizzle, on 10/12/2007, -0/+6What people need to keep in mind when doing this is they need to make sure they can replicate it in HTML.
  • cazabam, on 10/12/2007, -7/+1*deleted due to useless Digg edit function screwing up formatting*
  • Silkjaer, on 10/12/2007, -0/+2cazabam, the 900px is irrelevant, its the mockuping thats of relevance here. And if the designs require fudging and futzing, maybe its the coding skills that buggers? - knowing whats possible when designing, already from the sketches, is a must. http://theundersigned.net/wp-content/mockup/single.html i dont see any tiled gifs here.. ?
    • cazabam, on 10/12/2007, -0/+1If the designs require fudging to make them possible, then it's the design that's bad. All I'm saying is that a) fixed width sites cause pain, and b) designing outside the toolset that you'll be using can lead to impossible situations. If I had a 1penny for every Photoshop web design I'd seen that not 100% possible using standards compliant HTML and CSS, I might not be rich, but I'd be stocked for beer.
  • cazabam, on 10/12/2007, -1/+3Mistake number 1: "The site itself is targeted at users with a 1024 screenresolution, and the content has a fixed centered width of 900px."

    What is with these 'design before anything else types' and an outright refusal to use the full width of the screen? That means variable width, by the way, not just making the site 1024 pixels wide. Also, prototyping in Photoshop generally leads to designs that requires fudging and futzing in HTML and CSS to get right. Or Flash. Or just a mass of tiled gifs. Perfect for bands and porn, but pretty crap for anything else.
  • Dachande663, on 10/12/2007, -0/+2Fireworks is IMHO the best tool to use to design web layouts. And Silkjaer, you can easily hide elements and move stuff around without repeated stuff. Fireworks FTW!
  • kevyn, on 10/12/2007, -0/+1theres a good book you can get called 'from photoshop to dreamweaver' which is rather helpful for those who wish to design using photoshop and then..well, er, go to dreamweaver. :-)
  • mindwar, on 10/12/2007, -5/+3wow i should write a blog entry explaining how to code a hello world program in php. seriously. this is REALLY BASIC STUFF. i have no idea how the hell did this made front page
  • FEWrecks, on 10/12/2007, -6/+4Isn't this pretty basic? Who doesn't already do this?
  • wineo, on 10/12/2007, -0/+2Now all we need is for Adobe to get Photoshop to convert our mockups into an index page with a header and footer file!
  • Kailash.Nadh, on 10/12/2007, -4/+2Nice, but why an article explaining how to makeup a mockup webpage and why so much noise? Every average webdesigner knows this, no matter what the method used. Bury, but this is Lame.
  • eneshelon, on 10/12/2007, -0/+2an article on BUIILDING a site out after the initial photshop design, now that would be great!
  • slantyeyed, on 10/12/2007, -0/+2creating web sites with photoshop comps? nothing new, but informative read for urchins.
  • manumitx, on 10/12/2007, -0/+2Its interesting how someone uses Photoshop for such a basic standard blog style design. I've always used Photoshop for mockups that use a greater over all change in site shaping and not a rehashing of the horizontal head / logo area.
    • localzuk, on 10/12/2007, -0/+0It may seem like extra work for nothing, but in the future, when you want to make more changes it is simple to visualise them with your pre-created comp.
  • theotheragentm, on 10/12/2007, -0/+1Go get Photoshop Elements. It should be A LOT cheaper than the full Photoshop, and should be plenty sufficient to do a web design mockup. This is really not Photoshop's purpose, which is why there are other tools out there that may be better, but it is sufficient. I have used it in the past, but it's still not worth buying or pirating a full version of Photoshop just to create a web design.
  • rc_collins, on 10/12/2007, -0/+2I use Fireworks, I am learning Photoshop. Good read.
    • cyclotron, on 10/12/2007, -0/+2Fireworks is probably better fro this than Photoshop... I am a Photoshop/Image Ready person.
  • localzuk, on 10/12/2007, -2/+0Or get gimp? :) What about Paint Shop Pro?
  • reecon, on 10/12/2007, -0/+0I'm sure that I'm not the only one who would fork over some cold hard cash is Adobe was to produce a product that worked like Fireworks and had the brushes and Effects of Photoshop CS. Do you hear me ADOBE!!??
  • ZMoney, on 10/12/2007, -1/+1This site looks weird in opera
  • artman, on 10/12/2007, -2/+0This web site is unviewable in Firefox on XP...what's the point?
    • mirzmaster, on 10/12/2007, -1/+1Check again, I think it's also unviewable in IE. Got dugg and removed the site to save bandwidth?
  • Silkjaer, on 10/12/2007, -1/+1Webhost closed it down, up again
  • nutcase, on 10/12/2007, -1/+0duders, Fireworks is Adobe now :)

    Firework is an excellent choice for mockups, only wish it had layers views like PS.
  • mraf, on 10/12/2007, -1/+0Talent matters, not tools.
  • cyclotron, on 10/12/2007, -0/+2Havent we be using Photoshop for web mockups since at least 1995? I have. I shudder to think what the rest of you have been doing.
  • superphoto, on 10/12/2007, -2/+0Your CSS designs look horrific in Safari, I would spend more time testing before writing articles.
  • redrighthand, on 10/12/2007, -0/+1Why hasn't anyone mentioned Image Ready? After laying out my files in Photoshop I make the links and rollovers in Image Ready then break the file into sections (Global nav) (Local Nav) (Main Content) things like that. Then I go back and do the polishing in Go Live after outputting the HTML files from Image Ready, (I am a newby to Dreamweaver and I'm slowly growing into it.)
  • Silkjaer, on 10/12/2007, -2/+1I test my designs in safari, safari is my prefered web browser
    • superphoto, on 10/12/2007, -0/+0Try this Silkjaer: resize your browser so part of the page is too small horizontally, so you are only seeing maybe 80 % of it, then hit the maximize green circle in safari, you get some strange resizing bug that won't go away until you redrag the window larger manually.

      Tiger newest version and safari newest version with all patches installed

      Something is definately wrong with the CSS but im not sure what.
  • sildani, on 10/12/2007, -0/+0Great article, FTW y'all!
  • kriegs, on 10/12/2007, -0/+1Isn't this just common practice? Can't digg it sorry, good article though.
  • jediwatson, on 10/12/2007, -0/+1I've been doing this in designing and building websites for nearly 10 years. In particular, this is pretty much how every design firm builds their websites.

    My company has design partners that give us photoshop files, then we handcode it into standard CSS/XHTML... there is no other way to build completely solid websites.
  • JHackett305, on 10/12/2007, -0/+0Yeah I thought everyone that did any serious web design did it this way to begin with, although I guess it is worth putting out their for people who are getting into web design. I actually sketch out wireframes by hand first and then move that layout into photoshop where I can really start to play around with things and workout a layout I like.
  • geekuskhan, on 10/12/2007, -0/+1Man god forbid anyone new should decide how to design websites and anyone who knows how should make a page to help.
  • exilio, on 10/12/2007, -1/+1Um duh...Digg is not the place for this kind of basic information. Seriously, I am all for helpful advice, but mocking up websites in Photoshop?! How daring, how avant-garde! Puhlease.
    • PillowFight, on 10/12/2007, -0/+3Huh. 1103 people (so far) seem to disagree with you. I'm with geekuskhan on this.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.