New Screencast: Converting a Photoshop Mockup: Part Two, Episode Three
We wrap up the mockup conversion here in Episode Three. We create the “article area” and the “sidebar” (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.
In part four (the last) of this series, we are going to do the “prequel”. We’re going to go back to a blank Photoshop document and create that mockup from scratch, so stay tuned for that. I’d also like to mention here that I tried to record at a slightly lower quality and use the H.264 format for compression so the file size is only ~30ish MB instead of over 100 like it has been. If anyone has any strong feelings on that either way, let me know.
Welcome everyone from Miro!
The CSS-Tricks Screencasts were featured on Miro recently. Welcome to all the new subscribers and thanks to Miro for the honor!
Loading ...
1
(i already contacted you about the titles) Awesome about Miro. FYI - i subscribed with Miro again and now for some reason the video plays just fine!
Thanks Chris.
Comment by Peter Bockenhauer — April 19, 2008 @ 6:36 am
2
Well, it looks like video #14 plays just fine, but all the others get audio but no video in Vista.
Comment by Peter Bockenhauer — April 19, 2008 @ 7:01 am
3
It’s the wrong link. Klick on the image opens screencast part two
Comment by David — April 19, 2008 @ 8:09 am
4
Fixed the title and the link inside this post. Not sure what to make of the audio problem. Maybe try a different video player (just as a test?).
Comment by Chris Coyier — April 19, 2008 @ 8:19 am
5
Instead of using a special div to clear the floats, you could also add the clear:both to the footer, that would be more semantic in think.
Comment by Fabian | Onyx Design — April 20, 2008 @ 6:24 am
6
Hey,
Your videos rock. I found them through Miro. However the video doesn’t play with Miro or VLC player for some reason. I’m using XP. I’m not sure what the issue is, the video shows a still image and plays sound, but that’s it. It works fine with Quicktime player.
Thanks,
Sean
Comment by Sean — April 21, 2008 @ 5:51 pm
7
Hi Chris - I just wanted to pass a note to thank you for your video series. I have been trying to break my ole ways of table design but was unable to mentally bridge the gap until I found this site.
Thanks for your hard work!
Bobby
Comment by Bobby — April 22, 2008 @ 5:59 am
8
hey u rocks i been looking for somthing like this for ages i have buyd dvd from lynda bun its only stuff which i can learn free from web sites like this but since im web designer this hellped me a loot!!
thx 10000000000000000000000x
Comment by cungiu — April 22, 2008 @ 1:46 pm