Photoshop to Website

It’s been over a year and a half since my book hit the shelves, but I am still getting a lot of email feedback. I’ve gotten 4 so far in the last week. I can’t really complain because most of it is very positive, but a lot of email means a lot of time spent answering questions. While every email is different, I get three general categories of question-containing emails:

  • Personal Guidance – These types of emails usually require the most time, but are often the most rewarding to answer. Examples include students asking what types of courses they should take and amateur webmonkeys asking what skills they need to “make it” in the industry. I was once an amateur webmonkey, so I try to answer these when I can, even if that means they sit in my inbox for a week or two.
  • Technical – Or, “how do I make this do that” emails. I try not to answer technical questions directly. I’ve learned most of what I know about website design through experience. Instead, I try to point people to places where they can learn the answers themselves. That leads to the last category.
  • Additional Resources – The majority of questions I get are from people who simply want to know what they should learn next. I have a lot of respect for self-learners, so I do my best to suggest books and resources that I think will help. Here is an actual example of this type of email that I received today:
Hey Jason –

I just finished reading your book and I have to say kudos for a job well done. This was probably one of the most useful web design books that I have ever read.

However, now that I’ve finished your book I am ready to jump right into making my (somewhat) great new comp that I’ve made in Photoshop into a web page. Yeah, that’s where I get stuck. I’ve read a couple of the ‘dummy’ books for CSS, PHP, etc, but those don’t seem to help me take my design from the comp I’ve made in Photoshop and turn it into a functioning website. So there’s my question: can you recommend any books / sites / resources for doing just that? I understand the mechanics of CSS, for example, but I don’t know how to use it to replicate that beautiful design that is currently stuck in Photoshop onto the web.

Thanks in advance for any help you can offer. And again, great job!

John Doe

As I read this question there were several books that immediately came to mind: A few of the Sitepoint books, Designing with Web Standards, Bulletproof Web Design, Transcending CSS & Web Standards Creativity. I love all of these books, and the skills “John” needs are explained well in each of them, but the process of converting a Photoshop comp to working HTML/CSS isn’t something I learned solely from a book, but rather through years of reading online resources, viewing source code and tinkering. I remembered seeing a link a few months back to a series of screencasts that supposedly did a good job of explaining this process, so I started hunting. What I found was Chris Coyier’s CSS-Tricks.


Chris is currently up to 24 video screencasts covering a wide range of basic-to-intermediate web design and development skills. I haven’t watched all of the videos yet, but from what I’ve seen, Chris has a knack for breaking down the tasks he’s explaining into easily digestible instructions. I’ll definitely be adding to my list of recommended resources.

3 comments on “Photoshop to Website

Shady says:

“but the process of converting a Photoshop comp to working HTML/CSS isn’t something I learned solely from a book, but rather through years of reading online resources”

May be there were no good CSS books when you started learning CSS? Because I find it difficult learning without a book.

Best regards,

That’s part of the reason. I’ve been tinkering with CSS since around 2000 or 2001. At the time there really was no better resources than those posted up by Eric Meyer, ALA,, Greasy Skillet, etc. (etc. etc. etc.) 🙂

amy says:

is there a book that can walk me through making a website from beginning to end? i’ve never created a site before..or do i need to take a class or hire someone? thank you for your time.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to the top!