At the start of a web project many designers find it extremely useful, and timesaving, to create page
mockups in Photoshop or Illustrator. This is an opportunity to play around with ideas, try out different styles and generate themes for the site.
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.
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.
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.
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.
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.
Chris Spooner’s tutorial focuses on exporting Photoshop images and coding specifically for blog design.
This ‘switcher’ tutorial explains how to create a cross-browser method for dynamically switching between style sheets, so alternate aesthetics can be quickly viewed.
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.
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.
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.
This guide encourages designers to think beyond the conventions of page layout, to employ creativity and experimentation.
PSD Vibe presents a tutorial showing how to code the Design Lab TV Styled layout into XHTML and CSS, including downloadable files.
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.
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.
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.
This neat tutorial explains how to make attractive buttons, with alternate ‘pressed’ states, coded with CSS.
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.
This is a simple trick for using CSS to fix a background image to the bottom of a page design.
This tutorial from Part Digital Design is a detailed look at slicing up PSD designs and creating powerful web interfaces using CSS and HTML.
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
This is a relatively quick tutorial showing the necessary steps for analyzing PSD layouts for CSS/HTML conversion.
Code an advanced list menu utilising the CSS position property in this tutorial, which enables ‘hand-drawn’ or ‘painted’ style menus.
This is another tutorial from Net Tuts, this time a screencast that explains how to convert a PSD file into perfect XHTML and CSS.
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.
A simple and fun trick is covered in this tutorial, explaining how to create a ‘blurry background effect’.
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.