Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 4


Continuing on with our Photoshop to HTML session, in this lesson, we'll learn how to use the 960 grid framework.

Chapter 4: Integrate the 960 Grid System

Press the HD button for a clearer picture.
Related Posts
  • Design & Illustration
    How to Use a Grid to Enlarge an Image While DrawingGrid tutorial   preview image
    Ready to draw a portrait or landscape but the reference image is too small? Using a grid to transfer an image to your drawing paper or canvas allows you to easily blow up the image. In this tutorial, I show you two simple way to create and use a grid to get your final image on your paper.Read More…
  • Computer Skills
    Improve Productivity With Virtual Desktops From TotalSpaces2Totalspaces400
    TotalSpaces2 from BinaryAge is the, self-described, "ultimate grid spaces manager". It is built on top of OS X's Mission Control and provides a great deal of control over your Mac's work environment. In an earlier tutorial, I taught you about Speeding Up Your Life With Launchbar. In this tutorial I'll show you how to use a grid of spaces to efficiently swap between applications to improve your productivity.Read More…
  • Web Design
    Design Theory
    Choosing a Grid SystemDsfd grid choice retina
    In the previous article, I introduced you to grid systems. With any luck, by now, you should have a good understanding of what they are and why they’re a good weapon to have in your design arsenal.Read More…
  • Design & Illustration
    Interface Design
    How to Create a Retro Website Design in Adobe IllustratorDesign and illustration
    This tutorial aims to introduce many of Adobe Illustrator's tools which are essential to any designer's toolkit and would help beginners and intermediate Web Designers gain confidence in using Illustrator for Web Design. Read More…
  • Web Design
    Life Beyond 960px: Designing for Large ScreensPreview2
    The premise behind a responsive web isn't purely that websites be built in a mobile-friendly way. It's about setting our content free so that it can be experienced by whatever means necessary - and that includes at large scale. Let's take a look at the design considerations behind the often neglected huge desktop screen.Read More…
  • Web Design
    Web Design Workshop #4: VideoBloggerPreview
    Web Design Workshop is our weekly community project where we ask readers to submit their work for your friendly, constructive criticism. It's the perfect way to learn, offer opinions and have your own work critiqued! This week, we have an interesting one for you because the final product will be the basis for a tutorial..Read More…