How to Create a Web App’s Site Web Design in Photoshop

Nov 22 2010 by Jacob Gube | 17 Comments

How to Create a Web App's Site Web Design in Photoshop

This web design Photoshop tutorial on Design Instruct, our other site, outlines techniques for making a layout comp that will work well for the sites of web apps, startup companies, SaaSs, and other modern, "Web 2.0"-themed, product-centric sites.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Final Result

Other Things to Do

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

17 Comments

Dee

November 22nd, 2010

Fireworks is the better tool for designing for the web, hands down. Why would I ever design in Photoshop, when using Fireworks is so much faster, makes standards-based CSS, has pages, master pages, and can slice, etc. better than Photoshop. Leave PS to everything but web design. Right tool for the right job.

Young

November 22nd, 2010

@Dee: I’ve never used Fireworks to create my pages, but from your description sounds like it’d only be better if you didn’t write your own code. I don’t exactly “slice” or “save for web” anymore, not since 2001 or so. I like to write my own markup and CSS, and I dunno how intuitive the Fireworks-generated code is, so…

Anyone else have a take on this?

jrieckmann

November 22nd, 2010

Fireworks vs Photoshop is a long-argued discussion. It really comes down to personal preference in the end. Great tutorial.

Jacob Gube

November 22nd, 2010

@Dee:

Re:

makes standards-based CSS, has pages, master pages

Until software improves, only people should (and can) be making those things for you.

Sachin Gupta

November 23rd, 2010

Excellent Tutorial for creating website design in photoshop. Beginners can learn lot’s of the things from this tutorial.

Adam

November 23rd, 2010

Fireworks making standards-based CSS? Seriously? Have you tried it? It’s a joke. Produces wonderful tables, but the CSS is an incomprehensible mess that Adobe should be ashamed of.

I started with FW, then migrated to PS, mainly because the MAC CS4 version of FW was so buggy. Apparently this is fixed with CS5. Then migrated away from PS and now dummy everything in Keynote/Powerpoint (i know, i now…but it works for me), and then code/create direct in the browser.

Lucio

November 23rd, 2010

Well, I always use Illustrator for the design, an PS only to crop the images.

Illustrator let me work confortably with vectors, hundred of elements, keeping all them editables, results to me much more better than PS.

Of course, later, i write all the code, you cant use FW or Dreamweaver if you are making a site that has to be developed later…

Marcell Purham

November 23rd, 2010

Great web layout tutorial! It is very clean.

I have seen people use fireworks and I must say it is not better than photoshop. Fireworks to me is something like dreamweaver where it writes ugly code and does not insert resets into the css so you can see blue links around images and so fort. I say stick with photoshop, learn how to slice web images for web then code to HTML/CSS and you’re good to go :)

Curtis Scott

November 29th, 2010

Great tutorial and cross site content pollenation. As for fireworks exporting code, I’ll pass on that feature too =)

I prefer to hand code from ground up using past code snippets were needed.

Thapelo_Daison

November 29th, 2010

I’m getting tired of this whole Fireworks vs Photoshop thing. I’m going to design this in Fireworks, I’ll be back with the link. Jacob thank you for being a great role model.

Usman

November 29th, 2010

The Design is nice and this Tutorial is handy to learn designing beautiful web pages in the photoshop

Jacob Gube

November 30th, 2010

@Thapelo_Daison: Hey, I’m as tired as you are with the debate – I don’t care what tool you use as long as your output is high-quality, meets the project scope, and is done by deadline. Barring that, then you should reassess your tool, but if it works, use it. Heck, if MS Paint can do the job for you, do it.

Personally, I’m most comfortable with PS because it’s versatile (from photo-enhancement to web design). I’ve wireframed designs in Illustrator before (I learned Illustrator before PS). I used Fireworks before, but I just didn’t like it at the time (I have to admit the last time I used Fireworks for more than 5 minutes was when it was still Macromedia).

My only concern is if you rely on software to generate code for you. Whenever I see people doing that, it reminds me of FrontPage. And even with Dreamweaver CS4, a web design editor, it’s auto-generated code is nasty.

Thapelo_Daison

December 4th, 2010

I’m new to web design so I’ve been going back-and-forth between these two programs(Photoshop and Fireworks) for a year now. I think I wasted a lot of time, If I would have stuck to just one, I would be comfortable with it by now. I uninstalled Fireworks so it’s photoshop from now on.

I thought Dreamweaver was the answer to all my coding needs and I would never have to learn CSS and XHTML, that was a big mistake. So now I’m reading a few CSS, XHTML and web design books. And I use Notepad++ for coding.

You’re blog is a good place to learn from people who are already web designers, so thank you.

sonny

February 16th, 2011

PS and FW are both good in that it serves only as a tool. it basically boils down to which are most comfortable for you to use in the design process.

this is a very helpful tutorial. good sample of product-centric corporate designs.

Guido

April 5th, 2011

Nice tutorial, thanks

Porthos

May 3rd, 2011

Photosop is adobe’s baby. So adobe would market Photoshop as better app for web design layout. I come from Photoshop 5.0, which app was known as a image editing app. Today I still see it as that for editing photos not for the web.

Mafia Website

September 19th, 2011

Hehe. It’s very Hard for me. ;). Great tutorial.. :D

Thanks man :D

Leave a Comment

Subscribe to the comments on this article.