There are many tutorials available on the Internet explaining how to convert PSD visual layouts into operational CSS/HTML files, ready for a completed web design. This post brings together 25 such tutorials, some covering detailed overviews of the conversion process, others aimed at specific website themes, while some offer simple tricks to bring a creative flourish to a designer’s work.

1. From PSD to HTML, Building a Set of Website Designs Step by Step

This is a top tutorial, taking an expansive view of the process from Photoshop to completed HTML products. The tutorial starts with four PSD mockups of a website that are eventually converted into a WordPress theme. It’s an impressively detailed tutorial, which covers almost everything users need to know to get started in converting PSD files.

2. From Photoshop to HTML

This tutorial explains how users can produce generic business templates from Photoshop files using CSS and HTML coding. The lesson includes demos along with PSD, CSS and HTML files available to download.

3. From PSD to CSS/HTML in Easy Steps

This four-part tutorial series covers easy steps on converting PSD designs into well-structured and semantically correct CSS/HTML layouts. The lessons explain the process set-by-step, including the correct procedural processes, and offers coding, templates and files to download.

4. Build A Sleek Portfolio Site From Scratch

This popular tutorial by Collis Ta’eed shows users the steps to coding a sleek portfolio, from the basic building blocks to a stylish finished page. The tutorial shows the whole procedure to create a homepage; from there the basic layout can be duplicated and adapted to construct the site’s interior pages.

5. Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner’s tutorial focuses on exporting Photoshop images and coding specifically for blog design.

6. Alternative Style: Working With Alternate Style Sheets

This ‘switcher’ tutorial explains how to create a cross-browser method for dynamically switching between style sheets, so alternate aesthetics can be quickly viewed.

7. Create a Killer Band Site with Drupal: A 6-part Tutorial Series

Gomediazine presents this series of six tutorials, explaining how to make band web sites using Illustrator files and coding with Drupal, open source CMS that’s popular in the music industry.

8. PSD To XHTML/CSS

This easy-to-follow tutorial explains the process of coding PSD files, and is aimed at web designers of all skill levels, from beginner to advanced.

9. Creating a CSS Layout from Scratch

This tutorial takes users through the process of constructing a functional CSS layout, and is aimed at those with a basic knowledge of using CSS.

10. Breaking Out of the Box With CSS Layouts

This guide encourages designers to think beyond the conventions of page layout, to employ creativity and experimentation.

11. Lab TV Layout, PSD to HTML

PSD Vibe presents a tutorial showing how to code the Design Lab TV Styled layout into XHTML and CSS, including downloadable files.

12. How to: CSS Large Background

This tutorial provides instructions on designing large background websites. In addition to the explanations of the techniques there are examples of creating large backgrounds using single and double images.

13. How To Create a Horizontally Scrolling Site

Conventionally, web pages scroll vertically, but this tutorial shows how to have content scrolling horizontally from left to right. The tutorial contains files for download, demos and enables users to add an unusual touch to their web design.

14. Slice And Dice That PSD

This tutorial shows how to slice and dice a PSD file and code it for the web. The tutorial, from Net Tuts, compares the HTML and PSD formats, and has a distinctive ‘Web 2.0’ feel.

15. How to Make Sexy Buttons with CSS

This neat tutorial explains how to make attractive buttons, with alternate ‘pressed’ states, coded with CSS.

16. Building a Website: HTML/CSS Conversion

This video screencast, part two of a three-part series, explains HTML/CSS conversion of Photoshop mockups. The tutorial begins by creating a skeletal project framework, moves onto Photoshop file layer organisation, and them describes writing the coding for the individual elements of the design.

17. Fixed Footer Backgrounds with CSS

This is a simple trick for using CSS to fix a background image to the bottom of a page design.

18. From PSD to HTML – How to Turn Your Designs into Usable Web Interfaces

This tutorial from Part Digital Design is a detailed look at slicing up PSD designs and creating powerful web interfaces using CSS and HTML.

19. CSS Gradient Text Effect

Web Designer Wall presents a tutorial explaining how to create fancy headings using pure CSS. The trick means that there’s no need for designers to render each heading in Photoshop

20. Tutorial: Coding a Layout

This is a relatively quick tutorial showing the necessary steps for analyzing PSD layouts for CSS/HTML conversion.

21. Advanced CSS Menu

Code an advanced list menu utilising the CSS position property in this tutorial, which enables ‘hand-drawn’ or ‘painted’ style menus.

22. How to Convert a PSD to XHTML

This is another tutorial from Net Tuts, this time a screencast that explains how to convert a PSD file into perfect XHTML and CSS.

23. Making Simple Work of Complex CSS Layouts

This tutorial aims to create flexible layouts that can easily be adapted to meet the requirements of its content and surroundings, with graceful degradation in legacy browsers.

24. Blurry Background Effect

A simple and fun trick is covered in this tutorial, explaining how to create a ‘blurry background effect’.

25. CSS Slicing Guide: Picking The Right Layout

This is a guide to choosing the best template for headers, navigation areas, content areas and footers, and then slicing them for page layouts.

This is a guest post by Tom Walker who writes and designs for an online print supplies store offering a range of ink for HP PSC printers and other accessories. You can keep up to date with his latest writing on the CreativeCloud.

I’m sure you’ve seen advertisements for a little dissimilar services that will exchange your PSD files into HTML and CSS. If you’re looking to save some time on your next project you may want to deem trying one of these services.

In this article more than 20+ Photoshop Tutorials showing you the tricks you need to convert you designs into HTML and CSS. Even with the paramount tutorials at hand cutting up designs isn’t a straightforward task. To make sure you get the job done tripwire magazine also provides a list of more…

PSD to HTML: Hawk Studios

Portfolio Layout Site Build

Download CSS

Build a Sleek Portfolio Site From Scratch

There’s nothing like building an complete site to show you a good impression 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 construct it with some nice clean HTML and CSS.

Source File

Encoding a Photoshop Mockup Into XHTML & CSS

Enduring from a recent tutorial, Create a Vibrant Blog Design in Adobe Photoshop, we’ll now look at taking the concept and implementing it into an actual webpage constructed in xHTML and CSS. By exporting the imagery from Photoshop and coding up the page we’ll construct a working instance of the overall blog design.

The Design Lab: PSD Conversion

Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in Photoshop.

Download PSD

Download CSS

Coding a Creative Design Layout

Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website.

Download PSD

Download CSS

PSD to CSS/HTML In Easy Steps

This is the first in our 4 part series on how to take a PSD file and alter it into a fully CSS based html page. These are the first in a series of tutorials in which we construct a fully working Photography site, all in clean xHTML and CSS. All the code, templates and files are accessible for you to play with, and we encourage you to download and play with what is provided. The design template is licensed under the creative commons licence.

CSS Template Tutorial: Setting Up

Okay welcome to part one of the tutorial. What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in Photoshop and coding it in Dreamweaver. You can also access example code at a variety of stages through the tutorial if you have any problems.

Web Design Layout: Site Build

Hello everybody today I’ll be showing you how to code the web design layout #9 PSD. I lately setup a poll to see which one you all required to see as a coded tutorial, and this one won. Thanks to everybody who took part in the obedience process.

Download CSS

BlooPRESS PSD to HTML

Download CSS

Converting a Design From PSD to HTML: Screencast

Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the attractiveness of that meticulous tutorial, I’ve determined to create a second series. Though, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.

PSD to HTML Slicing Tutorial

Ok, as I’ve said HERE, my great psd slicing tutorial is done. Please note that it is my very first video tutorial so I’m sorry for this things:

1. If I cut out too much parts (yes, some parts like ALT-TAB window, start menu showing, and so on are missing). I considered that those parts are not essential so, to reduce size, I’ve cut them out.
2. If it’s taking too long. The tutorial consists in two parts, both are around 30 minutes. I wanted to play them at 150-200% speed, but I quit. I offer a download alternative (besides the online playing), so you can download files and play them in your favorite media player with higher speed.
3. If I have language errors. English is not my native language, so I made mistakes. Some mistakes I’ve seen, some not. But it takes way to long to edit the videos again and again. I consider that errors are acceptable because the final result (which is that you understand how it’s made) is more important.

Source Videos

Coding a Layout

Here is a basic design composition. The problem now becomes turning it into code while maintaining the style and arrangement that was determined upon as well as making sure that the site is reachable across browsers/platforms and is as light and graceful as possible.

Slice and Dice That PSD: Screencast

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

Portfolio Layout #4

Hello there, in this tutorial il show you the code behind my portfolio layout #4. You can also download the CSS template for free.

Download PSD

Download CSS

hvdesigns.com helping for make a complete website design with source. Hello welcome to part 2 of the 5 page template series. Today we’ll be converting our PSD into a one page working HTML/CSS template. In part 3 we’ll begin to add our additional pages.
Right lets get started, the first thing you need to do is create a empty HTML and blank CSS file inside a folder called “your project”, save your blank HTML file as index.html and your blank CSS file as styles.css. Also inside your folder create an empty folder called images.

Open up your blank HTML file and add your website title inbetween the title tag, underneath the title tag link your css file.

Before we start to add our styles in the style sheet we need to create a few images from our PSD file. Open up your PSD file in photoshop, hide all the layers associated with the featured area then make a selection like this.

Make sure you select the background beneath the divider line, the selection should also be the whole width of your canvas (900px). Save the file as “bg.png” inside your images folder. You also need to make a selection around your website logo.

Acquire your selection around the logo has tight as you can get it. Copy and paste your logo to a new canvas with a transparent background then save the image as “logo.png”. We now also need the background in the header, so make a selection around the top part of the header including the divider line.

You don’t have to use the big image if you don’t want to, if you favor you can use a chunk of the background and replicate it then code the divider line separately. Right now we have some images to work with lets begin to add our css styles, head over to your css style sheet and add the following code. (Refer to commented code for each style)

Save your work and test your layout in firefox and internet explorer, the navigation should now work as planned. Also in our navigation code you will notice the “home” link has an ID of current this ID of current will principally keep the link hover styling for that precise page, so if your on the home page the medium solid blue line will stay under the link “home” when we create our additional pages later on we’ll need to remove the ID of current from the home link and add it to another link which ever page your making next.

Moving on… we now have to code up our featured section, head over to your PSD file, the images we need to slice are the little bullet point in the featured title area, our featured image with frame, our left button and our right button.

Save all images unconnectedly on transparent backgrounds within your images folder. We can now begin to add our div’s for our featured area. Add the following code beneath our ending div for our top rudiments but above our header ending div. I’ve also added dummy text and titles for our featured area.

Time to move onto our main content area, we’ll be start with the left content first. The boxes for our content will all be made using css. If you look at the PSD file you will see the boxes have two strokes in two different colors we can accomplish this by creating a div with one of the borders, then inside that div create another div slightly smaller with the other border added. We mock it up like this.

View Complete Tutorial