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:
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.
That’s what RSS is for, dude.
Maybe he likes the site, dude.
Dude, dude.
SaWeeeeet – DUDE?
Dude?
spam & self promotion? dude ;p
btw. i’d love to have this screencast in mp4 format for download, to watch it on Android phone (iPhone someone?) during my commute.
(I dont have permission to edit my previous post so I had to add new one…)
Dude, where’s my car?
cool story dude!
HI,i come from china.I think your videos are so useful!
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 :)
Hey Chris, what did you use for the audio clips? Flash plugin? Thx!
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!!
You bring awesomeness to the next level!
Just amazing =)
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
Nice! (By the way, whose site I ruined).
Hey Great video! Really looking forward to the other two!
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.
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.
Wait for part 2 :D
Cheers to you Chris!
This is going to eat a nice chunk out of my work day, but I’m calling it “research” :P
sweeeeeeeeet. can’t wait for the rest of the series!
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.
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!
I see that you just changed the site to be non-fixed. I really like how it works and looks now. Good job!
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.
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.
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???
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
awesome tutorial, very looking forward to part2 and 3, especially 3 to learn how to use WordPress
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!
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.
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.
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
Awesome as always. Looking forward to the next one.
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!
nice!,Im going to watch this..keep the screencast coming.Thanks
How do you adjust character spacing at around 16:23 in video? what shortcut in windows ?
Thanks
ALT+Left (reduce space)
ALT+Right (increase space)
HTH, Bert
Thanks :)
Great post! Can’t wait for the others!
It is always so much fun to follow your screencast. I’m looking forward to your next two episodes!
Great thanks! Can’t wait for the other two…
Grids dude. You’re going totally free-style here. GRIDS !
I wouldn’t like to be the xhtml/css guy on this project :p
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 :)
Great tutorial! I love it!
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.
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
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……
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!
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?
I didn’t like the mock up in the video either, but I like Kailin’s current website design.
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
Very cool. Nice work. Can’t wait for the next one.
Dude how did you do the kerning of the first logo? You didn’t open up the character window.
I was curious about this too!
ALT + Left/Right
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 :(
I agree.
Hey Chris, just wanted to say thanks. I am just getting into web design and its nice to see the whole process!
Hey Chris! Very nice ScreenCast. I learnd so much =) Thank You! Now I can’t anticipate the second and third video =)
Nice, waiting for next screencast.
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.
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…
Chris, this is great when are we getting the next one !!
been watching a while now loving your work !!! Keep it up.
Mark
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
A true champ with got here.
Websense sucks. Can’t watch this from work because streaming media is blocked, and so is access to ign.com..
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. :-(
oh,my mistake…it seems that my browser needed some cookie cleaning. :-)
Great tutorial!
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. :)
love your site Chris. That was a super cool and very detailed tutorial
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!
Something wrong with the video:-)
Works again. It stopped after 5 minutes.
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.
“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.
OK.
I like your site Chris, & really appreciate for your sharing about your knowledge. Thanks man. :-)
hi i love your vidoes
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!
Awesome tutorial for a beginner like myself, great knowledge, well presented and fun to watch. Great sense of humor too!
You Rock Chris!!!!!
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!
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,
Hi!
I cant see more than 3 min of the video, is it broken?
sorry, just needed to reload the page :)
Smart :)
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?
Sweet tutorial, being a designer myself I picked up quite a few things. :)
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.
Great tutorial Chris, its great to see the methodology behind the design & build process for a website, especially from a Professional! :)
Why don’t you use a tool like Creately ?