#14: Converting a Photoshop Mockup: Part Two, Episode Three

by: Chris Coyier

Nov 19 2008

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.

Links from Video:

Running Time: 23:58

Download Video File

Subscribe to The Thread

  1. Jon Wilson

    I've got a couple questions.

    The first is why does the date say November 19th at the top when today is the 22nd, and you created that many months ago?

    The second is why didn't you show us how to make it multiple pages so we can use the tabs at the top. I'm now going to try to do this for a while, but it would have been nice if you had concluded with that.

    Besides that you did an awesome series, I watched them through to the end, and am working on my side now. Hopefully i'll be able to integrate some of this with that moo stuff and have it be crazy.

    JonRWilson.com

    Reply ↓
  2. chriscoyier

    The weird date is because I'm in the process of moving these video pages away from static pages like they were on into WordPress pages. The date is the day I created the WordPress page not the original date of the publishing. I didn't really think about that…. if I find some time I'll try to figure out those dates and adjust them.

    Reply ↓
  3. JoeyJoJOMcShebadue

    Absolutely awesome!!!!!!!!!!
    I really appreciate all of these screencasts.. very informative and i have to admit that i have no idea how you talk to yourself for that long.. heh
    love this site!!
    cheers!

    Reply ↓
  4. Chris Coyier

    Yep, you are right, sorry about forgetting that. If you check out the "Three State Menu" tutorial, it covers that and shows you can can set that state via an ID on the body.

    Reply ↓
  5. Benjamin Becerra

    I don't think that you explained how to code the ON state of the menu buttons.
    I'm pretty sure I can figure it out. Just change the state to top instead of bottom on the backgrounds right?

    Reply ↓
  6. nate

    My menu works perfectly in firefox but appears like a staircase in internet explorer. I’m not sure how to go about creating a workaround for ies quirks-I’m working on a mac-is it a matter of trial and error-or do you think it is a matter of inserting the workaround for the transparent png?

    Thanks—

    Reply ↓
  7. Freemind Designs

    Seriously one of the BEST web design videos i have seen. Finally someone who explains an goes step by step with css an making stylesheets and using photoshop to make websites in clear examples and best of all for free.

    Reply ↓
  8. Marian

    Hi, Chris!
    I found your website a couple days ago, and since then I’ve learned a lot of things from you. I like how you explain us how to do, and I find your advices very useful :). You are doing a great job and I thank you for this.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~