In the conclusion of our two-part video tutorial on CSS layout and design, we will take the layout we created in the beginning of this tutorial and begin to apply graphics and other visual stylings to it, in order to achieve the look we are going for.
In Part Two, we will be looking at how to identify the basic graphic elements we need. From slicing the images out of our original Photoshop document to optimizing the images in Photoshop to applying the images correctly to our page, we do it all in this tutorial.
We start by breaking our Photoshop document down into the basic graphic elements we need to achieve our design goals, and then proceed to optimize each graphic element. Once created, we apply graphics to our page using a variety of CSS techniques that can be intimidating to designers. By the end of this tutorial, we will have quickly made a basic web page using HTML and CSS that almost exactly matches our original Photoshop document.
Please feel free to download and review the additional files provided below.
Software Used: Adobe Photoshop CS2, TextMate
Additional Files: CSS_layout.zip
View Tutorial
This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.
Wednesday, September 12, 2007 · 01:17 PM
Interesting, it seems to render and work just fine for me on FireFox 2.0.0.1 working on Mac OS 10.4.10. I'm wonder if there are issues on an earlier version or on one for another platform. I've tested in Firefox, Safari, Camino, and IE so far, and it appears to work well for me.
If you are having problems, can you email me a screenshot? Thanks. bgetting[at]practicalecommerce[dot]com
-- Brian Getting
Saturday, November 24, 2007 · 01:29 PM
Using the information in this tutorial, you could build a template rather easily.
The reason that IE displays larger fonts is two-fold. The first is that you need to use slightly larger fonts on Windows browsers because Windows is not very good at rendering fonts. Even native applications display choppy, non anti-aliased text so it is a good idea not to go too small with the fonts on Windows. The second reason is that most Windows users do not have the font "Lucida Grande", which is the font that I use. The secondary font in the font-set is Tahoma, which is a Windows font. It is a larger font, and when Windows defaults back to Tahoma you see the differences that you see.
-- Brian Getting
Sunday, January 06, 2008 · 04:17 PM
You just blew my mind! I still feel like nobody knows how to do this stuff - haha. Every time I do the search about replacing table-layout sites with CSS layouts, I hear, "yes, better, great!" but the only examples I found off the bat were always extremely plain, simple column variations. This kind of detail starting with psd graphics is ideal! bravo.
-- Brian B
Connect with us