RSS Feeds 
Feed Comment 1. Convert a Beautiful PSD to HTML and CSS
2. Converting a PSD to XHTML/CSS
In this tutorial we are going to create a XHTML/CSS webiste by slicing a PSD, the PSD we will be using is the one from a previous tutorial we did on here called Creating A Nighttime Layout. I would suggest you get yourself a cup of tea as this tutorial can take over an hour to get through.
I work simultaneously between slicing and CSS/HTML. This is fastest method I’ve found when working on a personal project. However if you are working in a group it’s best to keep each step separate.
4. From PSD to HTML, Building a Set of Website Designs Step by Step
As you may or may not know, I’ve (very slowly) writing a book on WordPress theming. What we’re building is actually the HTML that I’m using in the book to build the main example themes. The final set of themes is called Creatif. You can see the 4 mockups shown in screenshots below (click to get the larger versions).
5. From PSD to CSS/HTML in Easy Steps
This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we encourage you to download and play with what is provided.
Welcome to the first part of my PSD to wordpress tutorial. In these series of tutorials we’ll be creating a wordpress theme called “mywordpress” the first part of the tutorial will be mocking up the layout in photoshop. Part two will involve converting the PSD file into a working CSS website, then the third part will be converting the CSS template over to wordpress.
So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.
8. Complete Web Page Plus Code
Ok first off, this is a fast paced tutorial meant for a reader with knowledge of how to use basic Photoshop tools. This tutorial assumes you have some experience with layers and shape layers as well as clipping masks. Only a brief explanation of each will be offered as they are outside the scope of this tutorial. Here is a quick look at what you will end up with (but larger, of course!).
9. Creating a CSS layout from scratch
This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. I will try my best to explain the concepts behind each step, but a lot of the time other people have already covered these things better than I can. Because of this there will sometimes be links to more information on external sites.
10. Build a Sleek Portfolio Site from Scratch
There’s nothing like building an entire site to show you a good overview of how a CSS layout should work. Over at PSDTUTS we’ve got a tutorial where you design up a sleek, high end web design. In this tutorial we’re going to take that PSD file and build it with some nice clean HTML and CSS.
11. Coding Your 1st PSD Tutorial
Load my car sales layout into photoshop (if you haven’t got the layout already made, go here to make it). Once opened in photoshop we will need to assess what were going to need. The layout im using is pretty easy and most of it can be done in css. We will start with the header, select your desired cutting tool and cut out your header, paste it to a new document. Now when i pasted it to a new document i noticed the size 850×151. To make things easyier for ourselfs goto “image > image size” and resize your image.
Leave Your Comments Below