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.
Other Things to Do
- Subscribe to the Design Instruct RSS feed
- Follow @designinstruct on Twitter
Related Content
- How to Create a Clean Web 2.0 Style Web Design in Photoshop
- Coding a Clean Web 2.0 Style Web Design from Photoshop
- How to Design a Clean Business Website with Photoshop
- Related categories: Web Design and Tutorials
About the Author
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:
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