#71: Building a Website (1 of 3): Photoshop Mockup

This is the start of a three-part series on building a website. This will be a real website for a musician friend of mine, who's website I happen to ruin during a routine WordPress upgrade. In part 1, we start from absolute scratch in Photoshop, with just a few provided resources from the client. We design the homepage and skin for the site, according to new needs that the client has, the feel he wants to project, and keeping true to the tradition and history of the site.

Links from Video:


  1. User Avatar
    Permalink to comment#

    Hey Chris, I check your site pretty much everyday for new updates and sweet screencasts. This adds to the list. Can’t wait to see the next ones.

  2. User Avatar
    Permalink to comment#

    HI,i come from china.I think your videos are so useful!

  3. User Avatar
    Permalink to comment#

    Hey Chris you should of added a vector mask to that photo then used the gradient tool to blend in with the BG. love the screencasts though keep them up :)

  4. User Avatar
    Permalink to comment#

    Hey Chris, what did you use for the audio clips? Flash plugin? Thx!

  5. User Avatar
    Steven Couper
    Permalink to comment#

    Love your screencasts, my next project is to make a new design template for wordpress and i have never really used it so the next 3 screencasts will be so helpful to me, so thank you an advance!!

  6. User Avatar
    Permalink to comment#

    You bring awesomeness to the next level!

    Just amazing =)

  7. User Avatar
    Steven Couper
    Permalink to comment#

    Hi There, I only get half of the screencast then it shuts off before the end, any ideas?

    Ill try downloading it!!

    • User Avatar
      Aaron Bazinet
      Permalink to comment#

      That’s happened to me a couple times. Sometimes if your connection times out, or something along those lines, the player will consider the movie loaded even though it’s only partially loaded. You have to refresh and it will have to reload the whole thing. I usually just do the direct download.

    • User Avatar
      Steven Couper
      Permalink to comment#

      Thanks very much, straight download worked great!


  8. User Avatar
    Permalink to comment#

    Nice! (By the way, whose site I ruined).

  9. User Avatar
    Permalink to comment#

    Hey Great video! Really looking forward to the other two!

  10. User Avatar
    Permalink to comment#

    Looks cool.I like it.You got your own style.When I look at the lay-out I can see it is made by you.I like that.

  11. User Avatar
    Permalink to comment#

    Hey Chris,

    I might of missed it, but will you offer the psd for this? or the images sliced up?

    As I don’t really want to learn the design part but really interested in the coding part.


  12. User Avatar
    Permalink to comment#

    Cheers to you Chris!

    This is going to eat a nice chunk out of my work day, but I’m calling it “research” :P

  13. User Avatar
    Permalink to comment#

    sweeeeeeeeet. can’t wait for the rest of the series!

  14. User Avatar
    Ahmed El Gabri
    Permalink to comment#

    Great screencast chris , but i think there is a problem with the site in firefox the twitter feed in the sidebar is cutoff at the end.

    • User Avatar
      Jack Feefofe
      Permalink to comment#

      Yes, I noticed this as well. The “fixed” sidebar doesn’t work well. On my laptop, even the bottom of the blog box gets cut.

      I’m not crazy about the whole “fixed” design anyways. The only thing I would keep fixed would be the background (only his face, though, not his name).

      But I do love the extra bit you added behind his name in comparison to the video!

    • User Avatar
      Jack Feefofe
      Permalink to comment#

      I see that you just changed the site to be non-fixed. I really like how it works and looks now. Good job!

  15. User Avatar
    Daquan Wright
    Permalink to comment#

    Does anyone actually generate the HTML from Photoshop or do you all code with the images simply being exported from Photoshop? Always something I wondered about.

    • User Avatar
      Permalink to comment#

      Photoshop places all the images in tables like it’s 1999. Just go with sliced images and do the code yourself.

    • User Avatar
      Daquan Wright
      Permalink to comment#

      Thanks for the input Jake, I was pretty sure people didn’t use the crappy code from Photoshop. xD

      Great Screencast Chris, smooth and engaging as always.

  16. User Avatar
    Permalink to comment#

    Great timing, I’m about to start teaching a group how to do this and I’ll add these screencasts to my student’s link list.

    You’ve got a miraculous ability to communicate in an accessible and engaging way Chris. I just wonder how you manage to fit all this stuff into the day – do you ever sleep???

  17. User Avatar
    Permalink to comment#

    Great tutorial Chris! Love it!

    How if you continue this tutorial with convert it to wp theme, I still didn’t get the wp coding because quite blur about wp.

    Thanks in advance :D

  18. User Avatar
    Permalink to comment#

    awesome tutorial, very looking forward to part2 and 3, especially 3 to learn how to use WordPress

  19. User Avatar
    Permalink to comment#

    I noticed when you started the screen cast you kinda seemed like these kind of topics (building whole websites) is getting old hat. Well let me tell ya brother, I love these! When I get a chance to watch how the entire process plays out it really helps me grasp the concepts of web design. As far as I’m concerned, keep them coming!
    Thanks Again, without people like you the web would be a very boring place!

  20. User Avatar
    Permalink to comment#

    Another excellent tutorial! I can’t wait for #2 and #3!

    These videos are very very helpful and can’t wait for more. I’ve also subscribed to your RRS feed. Keep up the great work.

  21. User Avatar
    Bert de Vries
    Permalink to comment#

    Can’t wait for the next one! Great stuff!

    It, by the way, feels good to see that even the great designers ‘play’ with photoshop on a kind of trial and error basis to get to a design. I do love the way you fiddle around…
    I hope that in the next video you will give some tips on organising things in photoshop.


  22. User Avatar
    Permalink to comment#

    I like to see how other people work when when they design stuff in photoshop. As it turns out, we work in very similar ways. So watching this is very refreshing because it sort of validates to me that I’m doing it right. Sometimes I ask myself if this is the best and most efficient way of doing things. Turns out I’m doing great! And I learned a few things too.

    Thanks for a great vid and I’m looking forward to parts 2 & 3!


  23. User Avatar
    Permalink to comment#

    Awesome as always. Looking forward to the next one.

  24. User Avatar
    Permalink to comment#

    I am excited to watch these posts unfold. Although I have to admit that my favorite part is getting to hear the inner turmoil of “is it lame or not”…hilarious. Great video, thanks!

  25. User Avatar
    Permalink to comment#

    nice!,Im going to watch this..keep the screencast coming.Thanks

  26. User Avatar
    Permalink to comment#

    How do you adjust character spacing at around 16:23 in video? what shortcut in windows ?


  27. User Avatar
    Permalink to comment#

    Great post! Can’t wait for the others!

  28. User Avatar
    Permalink to comment#

    It is always so much fun to follow your screencast. I’m looking forward to your next two episodes!

  29. User Avatar
    Permalink to comment#

    Great thanks! Can’t wait for the other two…

  30. User Avatar
    Permalink to comment#

    Grids dude. You’re going totally free-style here. GRIDS !

    I wouldn’t like to be the xhtml/css guy on this project :p

  31. User Avatar
    Permalink to comment#

    Oh by the way, any chance you could implement ajax validation on your comments ? I was watching the video and submitting the comment reloaded the page (-> video off).

    Thanks :)

  32. User Avatar
    Permalink to comment#

    Great tutorial! I love it!

  33. User Avatar
    Permalink to comment#

    Thanks Chris, once again high quality screencast. Much appreciated. Can’t wait for your book (Digging into WordPress). Any idea as to when it’s going to be released?

    Thanks again.

  34. User Avatar
    Fabio (a.k.a Pok3)
    Permalink to comment#

    Hello Chris!
    Thanks for another awesome screencast and congrats for the nice design you did for Kai’s site. :)

    In the end screencast you say that does not exists a “inner-shadow” property in CSS, but it actualy exists!!!
    All you need to do is add “inset” in the box-shadow parameters:

    -moz-box-shadow: 0px 5px 10px rgba(,0,0, 0.8) inset;

    Unfortunately, it seems to work only in firefox 3.5 or wathever. I tryed to search something for webkit with no success. Seems to be not already implemented in webkit. :(
    Thats it. Sorry for my english and keep with this great work. :D

  35. User Avatar
    Permalink to comment#

    Hey Chris!

    I’m in the middle of creating a new portfolio site for myself this series is going to go a long ways for me! I can’t wait to watch the next ones! I’d be really happy if you release them soon! You don’t need to wait 3 weeks……

  36. User Avatar
    Jeff Adams
    Permalink to comment#

    I love your screencasts, and not to sound weird or anything I find them really soothing, it’s like watching someone think aloud lol.

    Very good screencasting, the slice and dice stuff should be interesting but the WordPress integration is the one I am really excited about!

  37. User Avatar
    Murid Rahhal
    Permalink to comment#

    Chris, you’re really helping out the newbies. Experienced designers: stay away. Sorry Chris but the design is just… bad.
    But I’m sure the CSS part will be good, that’s what you do best in the end… isn’t it?

    • User Avatar
      Baylor Rae'
      Permalink to comment#

      I didn’t like the mock up in the video either, but I like Kailin’s current website design.

    • User Avatar
      Permalink to comment#

      In my opinion this video series isn’t about design, but how to create a website from a mockup. It’s just fun to watch how Chris creates a mockup. There are a ton of websites with discussions about a design (good or bad).
      I, personally, like the end result.


  38. User Avatar
    Permalink to comment#

    Very cool. Nice work. Can’t wait for the next one.

  39. User Avatar
    Montana Flynn
    Permalink to comment#

    Dude how did you do the kerning of the first logo? You didn’t open up the character window.

  40. User Avatar
    Permalink to comment#

    this is the first time that I`m disappointed by one of your screencasts..

    I mean normally I dont care about the designs you use/create since its about coding most of the time..

    but this time the screencast was focused on Photoshop.. for me your design is nothing I would ever show to a customer. The blue layer style looks bad and it ruins the photo. The page looks like its 30% finished and needs a lot of adjustment when it comes to colors..

    No doubt that I will love the following 2 parts, but this time I expected something different :(

  41. User Avatar
    Permalink to comment#

    Hey Chris, just wanted to say thanks. I am just getting into web design and its nice to see the whole process!

  42. User Avatar
    Permalink to comment#

    Hey Chris! Very nice ScreenCast. I learnd so much =) Thank You! Now I can’t anticipate the second and third video =)

  43. User Avatar
    Permalink to comment#

    Nice, waiting for next screencast.

  44. User Avatar
    Brian Layman
    Permalink to comment#

    I’m very eager to see the next video… This one was the feather that tilted me over the edge & I finally get Adobe CS, albeit and older version for now.

    I am now in the process of playing the video back very slowly to better learn the tools now at my finger tips. I can definitely see the benefit of having decent tools at your disposal…

    Please post the next vid soon.

  45. User Avatar
    Brian Layman
    Permalink to comment#

    And BTW, I’ve had that upgrade over your theme lesson too.. Unfortunately, mine was after an all nighter right before I deployed it and I had no decent backup.

    Every few years we all get painful reminders of the importance of backups – and not skipping even the simple steps…

  46. User Avatar
    Permalink to comment#

    Chris, this is great when are we getting the next one !!
    been watching a while now loving your work !!! Keep it up.

  47. User Avatar
    Daniel J
    Permalink to comment#

    Brill, it’s very interesting to see how other people work and such a useful way to learn! Looking forward to the next chapter! Thanks Chris

  48. User Avatar
    Permalink to comment#

    A true champ with got here.

  49. User Avatar
    David Ferguson
    Permalink to comment#

    Websense sucks. Can’t watch this from work because streaming media is blocked, and so is access to ign.com..

  50. User Avatar
    Permalink to comment#

    Wow! Awesome! When does second part come out?I can’t wait!I’m visiting your site every day for a part two video and still nothing. :-(

    • User Avatar
      Permalink to comment#

      oh,my mistake…it seems that my browser needed some cookie cleaning. :-)

  51. User Avatar
    Permalink to comment#

    Great tutorial!

  52. User Avatar
    Permalink to comment#

    Just awesome! I like all ur screencasts very very much and it really helped me a lot to start new things.
    Thanks a lot for doing all these. :)

  53. User Avatar
    Permalink to comment#

    love your site Chris. That was a super cool and very detailed tutorial

  54. User Avatar
    Permalink to comment#

    Chris, I tried downloading the garage and photo sliders, but when I try to open them with coffeecup zip software, it says it “is not a valid zip archive”. How can I get these files? Thank you!

  55. User Avatar
    Permalink to comment#

    Something wrong with the video:-)

  56. User Avatar
    Permalink to comment#

    Chris thanks for helping out beginners, wow! What a great video, hope will watch all 3 and try to create a website with what I’ve learned.

  57. User Avatar
    Permalink to comment#

    “Dude” [sic] … that’s too much useless talking. I gave up watching it after 5 mins of random talking. It might be useful but I won’t wait 30 mins more.

  58. User Avatar
    Permalink to comment#

    I like your site Chris, & really appreciate for your sharing about your knowledge. Thanks man. :-)

  59. User Avatar
    Permalink to comment#

    hi i love your vidoes

  60. User Avatar
    Permalink to comment#

    These screen casts are priceless, many thanks for taking the time out to deliver these. Keep up the good work, I’ve picked up many tips and tricks to which I can put use into my own work flow.

    Thanks Chris!

  61. User Avatar
    Permalink to comment#

    Awesome tutorial for a beginner like myself, great knowledge, well presented and fun to watch. Great sense of humor too!

    You Rock Chris!!!!!

  62. User Avatar
    Permalink to comment#

    This is great! Thanks for this (and all of the other screencasts you’ve done.)

    There are lots of ‘nuts and bolts’ resources out there, but not as many that approach the whole process from beginning to end.

    I’ve learned a lot about all aspects of web design from your site. I’m hooked!

  63. User Avatar
    Chris Tome
    Permalink to comment#

    Thank you very much for an excellent trio of videos on getting your designs out of Photoshop and into the ugly yet highly functional world of…. (artist type shudder) code. ;) I wish I was more like my Dad, a coder for 35 years, but I wound up shooting pixels into my digital veins since age seven nd the coding bug never bit me as hard as I now wish it would have. A great way to see the transition and make more sense of the code without wanting to put a 38 Special to my temple.

    You sir, have saved a life. You have some geek Karma headed your way.

    God Bless You. :)

    Pxlpushr aka Chris aka WholeApple aka47,

  64. User Avatar
    Carl B
    Permalink to comment#


    I cant see more than 3 min of the video, is it broken?

  65. User Avatar
    Carl B
    Permalink to comment#

    sorry, just needed to reload the page :)

  66. User Avatar
    Permalink to comment#

    Smart :)

  67. User Avatar
    Jon Knebel

    Hi Chris,

    Would you be OK with me using this video series with a projector as part of a class that I’d like to teach?

  68. User Avatar
    Permalink to comment#

    Sweet tutorial, being a designer myself I picked up quite a few things. :)

  69. User Avatar
    Permalink to comment#

    Can you use a software other than Photoshop (which is too expensive) to follow your video? Could I use GIMP for Windows? Thanks for this video.

  70. User Avatar
    Permalink to comment#

    Great tutorial Chris, its great to see the methodology behind the design & build process for a website, especially from a Professional! :)

  71. User Avatar
    Permalink to comment#

    Why don’t you use a tool like Creately ?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.