What is Digg?94 Comments
- 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. - 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. - WeeklyGeek, on 10/12/2007, -4/+14pretty good explanation of how to mock up a page. surprisingly, a lot of people dont know how.
- v3xt0r, on 10/12/2007, -1/+8Those who do not know how, should not be designing web sites! =p
- 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.
- 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.
- 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
- 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.
- 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. - extreme101, on 10/12/2007, -1/+6care to let us know what you prefer?
- 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 :-)
- 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. - 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 :)
- inactive, 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.
- 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 - 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. - 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 - skwashd, on 10/12/2007, -11/+14how about a GIMP version? ;)
- PillowFight, on 10/12/2007, -0/+3Huh. 1103 people (so far) seem to disagree with you. I'm with geekuskhan on this.
- tranz, on 10/12/2007, -10/+13nice tips :) tho i find other software better for making site layouts & design :/
- 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. - localzuk, on 10/12/2007, -3/+6You don't need any of those features if you are making mockups of websites...
- cyclotron, on 10/12/2007, -0/+2Fireworks is probably better fro this than Photoshop... I am a Photoshop/Image Ready person.
- mpancha, on 10/12/2007, -0/+2here you go:
http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout - mpancha, on 10/12/2007, -0/+2here's another one:
http://www.subcide.com/tutorials/csslayout/page2.aspx
that one helped me out the most simply b/c it was a walkthrough, and I had to recreate it. - 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!
- 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.. ?
- 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!
- 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. - 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? - 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.
- 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.
- inactive, 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.
- slantyeyed, on 10/12/2007, -0/+2creating web sites with photoshop comps? nothing new, but informative read for urchins.
- 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
- eneshelon, on 10/12/2007, -0/+2an article on BUIILDING a site out after the initial photshop design, now that would be great!
- inactive, 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.
- 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. - 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.
- 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.
- rc_collins, on 10/12/2007, -0/+2I use Fireworks, I am learning Photoshop. Good read.
- 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. - 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. - 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!".
- 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.
- RankenPhile, on 10/12/2007, -0/+1So do I. I'm surprised more people don't do it this way.
- 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. - 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.
- 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. -
Show 51 - 94 of 94 discussions
Digg is coming to a city (and computer) near you! Check out all the details on our 
© Digg Inc. 2009
— Content created and posted by Digg users is