#13: Converting a Photoshop Mockup: Part Two, Episode Two

by: Chris Coyier

Nov 19 2008

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.

Links from Video:

Running Time: 25:45

Download Video File

Subscribe to The Thread

  1. saki

    Usually i am afraid to try out Css but after seeing your screen cast for 2 to 3 times i am trying to to do Css thankyou for motivating me

    Reply ↓
  2. Gabriel Merovingi

    great movie dude.
    keep up the good work.

    Reply ↓
  3. Sam Nicholson

    Please, how can you centered the unordered list?

    Reply ↓
  4. Costel

    Great tutorials! Thanks for the good work !
    I was wondering on this video, when you used text-indent: -9999px to hide the text, isn’t this a bad practice with search engines? To hide text? I think it’s better not to mention it at all, rather then hide it.
    What do you think?

    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 ~