{"id":1472,"date":"2008-12-02T08:03:17","date_gmt":"2008-12-02T15:03:17","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=1472"},"modified":"2015-02-25T19:31:51","modified_gmt":"2015-02-26T02:31:51","slug":"13-converting-a-photoshop-mockup-part-two-episode-two","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/13-converting-a-photoshop-mockup-part-two-episode-two\/","title":{"rendered":"#13: Converting a Photoshop Mockup: Part Two, Episode Two"},"content":{"rendered":"
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.<\/p>\n
Links from Video:<\/strong><\/p>\n 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. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":1549,"url":"https:\/\/css-tricks.com\/video-screencasts\/16-creating-the-photoshop-mockup\/","url_meta":{"origin":1472,"position":0},"title":"#16: Creating the Photoshop Mockup","date":"December 5, 2008","format":false,"excerpt":"This episode is a prequal to episodes 12, 13, and 14. We go back to a blank Photoshop document and re-create it. There is no HTML\/CSS in this episode, just pure Photoshop work. Links from Video: View Demo Download Files Part One Part Two Part Three","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1475,"url":"https:\/\/css-tricks.com\/video-screencasts\/14-converting-a-photoshop-mockup-part-two-episode-three\/","url_meta":{"origin":1472,"position":1},"title":"#14: Converting a Photoshop Mockup: Part Two, Episode Three","date":"December 3, 2008","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3157,"url":"https:\/\/css-tricks.com\/video-screencasts-2\/","url_meta":{"origin":1472,"position":2},"title":"Video Screencasts","date":"July 29, 2009","format":false,"excerpt":"#20: Introduction to jQuery Running time: 18:12 The popular javascript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1469,"url":"https:\/\/css-tricks.com\/video-screencasts\/12-converting-a-photoshop-mockup-part-two-episode-one\/","url_meta":{"origin":1472,"position":3},"title":"#12: Converting a Photoshop Mockup: Part Two, Episode One","date":"December 1, 2008","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1389,"url":"https:\/\/css-tricks.com\/video-screencasts\/3-converting-a-photoshop-mockup-part-3-of-3\/","url_meta":{"origin":1472,"position":4},"title":"#3: Converting a Photoshop Mockup (part 3 of 3)","date":"November 12, 2008","format":false,"excerpt":"I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML\/CSS website. This one focuses on the main content area. I create the the columns including the \"quick links\" section. I also talk a little bit about typography. Links\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6474,"url":"https:\/\/css-tricks.com\/video-screencasts-5\/","url_meta":{"origin":1472,"position":5},"title":"Video Screencasts","date":"May 28, 2010","format":false,"excerpt":"#80: Regarding Wheel Invention Running time: 19:09 Sometimes \"reinventing the wheel\" is the right way to go. You get control and all the learning that goes into it. Sometimes it is a waste of time and an existing solution will save you time, money, frustration, and it may do a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1472"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1472"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1472\/revisions"}],"predecessor-version":[{"id":18087,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1472\/revisions\/18087"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1472"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n