New Screencast: Converting a Photoshop Mockup (Part Two, Episode Two)
In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and “on” states for the tabs. We then create the main content area and footer.
I think I’m going to do two more episodes in this series. In episode three, I’ll build the main content area and sidebar and talk about layout and typography. Then I’m going to go back and clean up some of the code, like replacing the logo with CSS image replacement. In episode four, by request, I’m going to go back to Photshop and re-build that from scratch, so you can see how that was built.
Loading ...
1
Really great as usual.
I don’t know about the others but I’d like if you would cut out some things to make the screencast shorter. You know, the images and the code for the tabs, three times the same procedure…
Can’t wait for Episode 4 when you’re gonna explain the PS.
Comment by David — April 10, 2008 @ 2:37 pm
2
Yahoo!!!! I’ve been waiting for this one!!
LOVE IT!
Comment by nitos — April 10, 2008 @ 4:11 pm
3
Hey Chris, love your screencast, I’m learning a lot with them, thanks for sharing all that with us…
Don’t know if you know this, but in textmate you have a loren generator, just write ‘lorem’ and hit Tab, thats it, lorem text without widgets, online generators, etc.
Comment by Abel — April 10, 2008 @ 4:49 pm
4
Thank you Chris!
Looking forward to the upcoming episodes…
Comment by Jon — April 10, 2008 @ 6:30 pm
5
having trouble downloading this one to view, Quicktime icon just sits there, perhaps I am not waiting long enough. just viewed the first part, no problem.
Al
Comment by Al — April 11, 2008 @ 4:07 pm
6
Doesn’t play for me either, part 1 is fine tho.
Comment by DXL — April 12, 2008 @ 5:42 am
7
ended up going into the HTML code for the videocast page and extracting the video file url,
plugging tht into the address bar, downloading and viewing it. it is over 100MB, so takes a
while to download, but worth it.
love the videocasts Chris,
Al
Comment by Al — April 12, 2008 @ 7:33 am
8
Sorry to anyone having trouble… Not sure what the problem is, I tested just now and it seems to be downloading OK for me. If you sign up through the regular video RSS feed, there should be a link to the “Original Video Source” which should do the trick if viewing them on the web isn’t working.
@Abel: Nice trick! I did not know that, that is excellent.
Comment by Chris Coyier — April 12, 2008 @ 8:45 am
9
Hi Chris, Thanks for your css tips. How would you code an image in css that have been sliced in photoshop yet you want to keep them together in a box?
Comment by Benny — April 15, 2008 @ 1:22 pm
10
Thank you so much Chris! This has given me so much more insight!!
I had to add
margin-left:0; padding-left:0;to the ul#nav to make it work though; without it, it would indent the nav-bar, and by doing so mess up the whole page.Comment by Tibor — April 22, 2008 @ 12:21 am