Essential Web Designers Guide on PSD to HTML/CSS
Slice a Template and Code it Using CSS
This tutorial is going to show you how to take a template (not create it) and slice it up in Photoshop and code it in complete CSS.
How To Create a Horizontally Scrolling Site
If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to “wrapping” that element down onto the next line. The more content on the page, the taller it gets, not the wider. Why is this? Because it just makes sense. Our eyes are used to reading fairly short lines of text, so if we were to see a paragraph of text in one long straight line, it would be painful to read. Paragraphs need to have line breaks in them to be readable (hence the term “blocks” of text). We sure as heck don’t want to hard-code line breaks into the markup ourselves. Obviously, we don’t have to, the browser does this wrapping for us. Thus the vertical expansion.
Design and Code a Site with GIMP, a 4-Part Series
Simon North, a fellow ThemeForest author and owner of Help-Developer, wrote an excellent four part series of how to design a website with GIMP and turn it into a valid HTML/CSS website. Part one starts with the design while part 2-4 focus on coding the HTML and CSS. The link below will get you started with part one.
Coding Your 1st PSD Tutorial
HV Designs previously published a tutorial for creating a car sales layout in Photoshop, and this tutorial is a follow up to cover the process of coding the site. It’s a fairly detailed tutorial with the coding provided.
From PSD to HTML – How to turn your designs into usable web interfaces
Part Digital Design gives us another detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.
From PSD to CSS/HTML in Easy Steps
This tutorial will show you in detail on how to make a very basic, and nature friendly layout come to life by coding it into a fully functional CSS theme.
