Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Nick PettitTreehouse Teacher
PSD to HTML is Dead
Many students have asked me for a PSD to HTML tutorial on Treehouse, and there's not really a short answer as to why we've never done it. I decided this needed to be answered in a more articulate blog post. Here's the link:
Here's a short excerpt from the article:
PSD to HTML tutorials are all over the web. In fact, many people have asked me why there’s not a PSD to HTML tutorial on Treehouse. In addition to the tutorials, there are lots of companies that will accept a PSD and convert it to a webpage for roughly $100 USD.
If it’s so popular, then how can I say that it’s dead? Well… I wish every web design quandary could fit into a poetic 140 character tweet, but this is a fuzzy issue that demands a more articulate explanation. Let’s dig in.
I'm from the guys who cant start coding right away, i need to have an image about what i'm building, and also Photoshop is more popular than the wire-framing apps you mentioned. Well, it's up to the designer.
Richard Feinburg2,970 Points
I start making websites in the mid 2000s and I could never understand why would anyone would use Photoshop to layout there design as in I was always an Illustrator person when designing a website. Even though this post is about slicing up images and using shadow drop and add a little coding to get it work for the browser. I was always glade I never use Photoshop for this.
People gets too comfortable with the visible part of web design and not in the coding part of things even though it's harder to be a good designer then a good coder.
John Fortune6,446 Points
I come from an advertising background and I can attest that a fully realized photoshop design is vital when selling work to clients. Clients in my field are used to seeing work that is as closely realized or "finished" as possible. I can't tell you how many times, when presenting wireframes, that clients were completely lost until they saw the comp.
I stopped exporting images from design about a year ago I just have the icons and logos in as images now. Maybe a background if need.
After reading the post I have to agree. There is more to the web design process than the high fidelity markup and translating it to html and CSS. Having an image will help the client get the idea of the basic design but just a simple take the picture, splice it up, and code it doesn't cut it anymore with screens ranging from about 400px to over 1000px.
I remember designing websites in Photoshop, than Illustrator, than Fireworks... and back to Photoshop. It's what clients expected and it was the best way to make it look really good to get approval. It seems slicing .psd's died along with table layouts, painful photoshop typography replaced with web fonts, css3 gradients, shadows and masks, and even photoshop filters can all be seen in the browser: http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/.
Photoshop is a great way to manipulate pixels but less and less of a website consists of raster graphics these days (icon fonts, .svg's, data URI's etc.). It's a little unnerving for visual designers to see this critical tool lose it dominance, but there is hope of new tools (like http://macaw.co) that get designers more accustom to what type of design decisions are overly complicated to produce in code.
The problem of getting a design approved still exists. For this I feel that high fidelity working prototype using Axure 7 (kind of the agency standard now) works better, is easier to iterate on and communicate requirements to a development team. If they client expectations call for many different looks or directions I would offer them small custom designed treatments - like http://styletil.es/ Even animated banners don't require Photoshop thanks to Google Designer: https://www.google.com/webdesigner/
So yes PSD to HTML is dead but that doesn't mean pixel-perfect visual design dies along with it. It just means a more evolutionary, iterative, prototype versions approach more akin to development actually. Maybe it's a good thing if more people (clients, users, developers) get to be involved in the evolution of a design and not only see it when it's perfect. Gosh sorry this is so long, I need to stop being so long-winded on comments.
If you want good design and somewhat unique/artistic website you definitely need start with photoshop (or anything else) and make in css stuff like solid colors and gradients, shadows and so on. But what if you want to use texture? Better to try it before you start coding. Alot of "in browser design" websites look the same in my opinion. Some of theme look like... well nevermind.
This is why I'll never take graphic designers seriously for as long as they continue doing this. That and Adobe Muse, the code markup, makes you want to gag. I'd rather a properly coded site with near minimal graphic design than some slick layout. Thankfully they are teaching more about typography and usability now than how to be an expert with photoshop and illustrator.