How to Convert a Photoshop Mockup to XHTML/CSS. Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS.
Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page. In case you missed it, the first part of this tutorial, Create a Clean Modern Website Design in Photoshop went through the stages of producing the visual concept of the Pixel juice website. Create a Clean Modern Website Design in Photoshop. Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements.
The result is a modern, crisp and clean webpage layout ready for coding. Taking inspiration from various modern website designs, we’ll produce this clean and crisp website layout. Key features include horizontal bands to separate the content into specific areas; a colourful header area introducing the site; a friendly welcome message with examples of work; two-column main layout and a resource filled footer. A good start with any design is to sketch out the plans on paper, the free reign of the pencil helps flesh out the rough layout with ease. Planning out a wireframe also helps develop a hierarchy and gives an insight into the best positions for key elements of the design.