Others  >>  Photoshop

Creating the Photoshop Mockup - II

Language: English Quality: High Has Audio: true Source: Other Media: Flash Posted On: 23 Jun 09
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let's do it again! Every website is different will require different conversion techniques so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!

Tags: CSS Tricks, Screencast, CSS, Tricks, Photoshop, mockup, series,     [SUGGEST  A  TAG]
     Series Listing
Creating the Photoshop Mockup
We go back to a blank Photoshop document and re-create it. There is no HTML/CSS in this episode, just pure Photoshop work
Converting a Photoshop Mockup: Part Two (1 of 3)
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let's do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself! (note: Not anymore… but this is sorta how CSS-Tricks used to loo
Converting a Photoshop Mockup: Part Two (2 of 3)
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.
Converting a Photoshop Mockup: Part Two (3 of 3)
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