Grow your CSS skills. Land your dream job.

#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:

Comments

  1. Chris
    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. yangbin
    Permalink to comment#

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

  3. 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. Permalink to comment#

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

  5. 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. Permalink to comment#

    You bring awesomeness to the next level!

    Just amazing =)

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

    Ill try downloading it!!

    • 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.

    • Thanks very much, straight download worked great!

      Steven

  8. Permalink to comment#

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

  9. Permalink to comment#

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

  10. 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. Ashley
    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.

    Thanks.

  12. 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. Permalink to comment#

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

  14. 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.

    • 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!

    • 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. 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.

    • Permalink to comment#

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

    • 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. 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. 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. Permalink to comment#

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

  19. Matt
    Permalink to comment#

    Chris,
    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. Nutt
    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. 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.

    Cheers.

  22. Daniel
    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!

    Daniel

  23. Permalink to comment#

    Awesome as always. Looking forward to the next one.

  24. 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. arnold
    Permalink to comment#

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

  26. Permalink to comment#

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

    Thanks

  27. Nick
    Permalink to comment#

    Great post! Can’t wait for the others!

  28. Permalink to comment#

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

  29. Grazia
    Permalink to comment#

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

  30. 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. 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. Alex
    Permalink to comment#

    Great tutorial! I love it!

  33. Antony
    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. 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. 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. 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. 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?

    • Permalink to comment#

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

    • Bert
      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.

      Greetings

  38. Permalink to comment#

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

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

  40. 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. tanzenbren
    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. Raegmaen
    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. Raimonds
    Permalink to comment#

    Nice, waiting for next screencast.

  44. 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. 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. 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.
    Mark

  47. 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. Permalink to comment#

    A true champ with got here.

  49. 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. Mladen
    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. :-(

    • Mladen
      Permalink to comment#

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

  51. Permalink to comment#

    Great tutorial!

  52. Joy
    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. Permalink to comment#

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

  54. 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. Mathias
    Permalink to comment#

    Something wrong with the video:-)

  56. 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. Marcos
    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. Permalink to comment#

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

  59. hüseyin
    Permalink to comment#

    hi i love your vidoes

  60. imran
    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. Donna
    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. Luke
    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. 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. Carl B
    Permalink to comment#

    Hi!

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

  65. Carl B
    Permalink to comment#

    sorry, just needed to reload the page :)

  66. Smart :)

  67. 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. Permalink to comment#

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

  69. Orestes
    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. Permalink to comment#

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".