Tutorial Lounge

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.

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.

Andy Boyd

View all posts by Andy Boyd
Andys website

Related posts:

1. 40 Best Ever Photoshop Tutorials of Web Layout Designs Adobe Photoshop ever famous Designing tool and most useful...
2. 20+ Tutorials for Create your own Wordpress Themes We’re listing some of great creative free Wordpress themes...
3. 30+ Ultimate Useful AutoCAD Tutorials We welcome you in this world of CAD, we...
4. 25 Ultimate Useful Joomla Tutorials We proudly presenting some useful tutorials about Joomla (Free...
5. 35 Ultimate Useful CSS Cheats to Streamline Web Development We are follow our visitors and readers request presenting...

Related posts brought to you by Yet Another Related Posts Plugin.