25 Ultimate Useful PSD to HTML Tutorials

Andy Boyd Posted on 12. Mar, 2010 | Comment in!




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.

Tags:    /    /    /    /  

If you enjoyed reading, consider sharing it on one of these social bookmarking sites.

  • 0hits
  • Digg Button

Related Posts:

Enjoy this Post? Subscribe to Tutorial Lounge



Leave a Comment Subscribe to RSS Feed Subscribe by Email

Comments

  1. Servefault.com

    March 13, 2010

    25 Ultimate Useful PSD to HTML Tutorials…

    Thank you for submitting this cool story – Trackback from Servefault.com…

  2. Hermitbiker

    March 13, 2010

    …. cool, more tuts…. I always like tutorials, even when they are far more advanced than I am !! These all seem pretty basic…. but then again, what do I really know, lol !! ;) :)

  3. 25 Ultimate Useful PSD to HTML Tutorials | TopRoundups

    March 13, 2010

    [...] 25 Ultimate Useful PSD to HTML Tutorials Submitted by Dzinepress [...]

  4. From PSD to HTML/CSS » Web Design

    March 14, 2010

    [...] From PSD to HTML/CSS [...]

  5. sajan kota

    March 14, 2010

    Thanks a ton for this nice tutorials, very useful and informative. looking forward for your next post.you rock.

  6. [User Link:25 Ultimate Useful PSD to HTML Tutorials] | Tips for Designers and Developers | tripwire magazine

    March 14, 2010

    [...] User News if (typeof Meebo == 'undefined') { Meebo=function(){(Meebo._=Meebo._||[]).push(arguments)}; (function(q){ var args = arguments; if (!document.body) { return setTimeout(function(){ args.callee.apply(this, args) }, 100); } var d=document, b=d.body, m=b.insertBefore(d.createElement('div'), b.firstChild); s=d.createElement('script'); m.id='meebo'; m.style.display='none'; m.innerHTML=''; s.src='http'+(q.https?'s':'')+'://'+(q.stage?'stage-':'')+'cim.meebo.com/cim/cim.php?network='+q.network; b.insertBefore(s, b.firstChild); })({network:'tripwiremagazine_fu72bi'}); }25 Ultimate Useful PSD to HTML Tutorials [...]

  7. [Miguel Sá] | Blog >> 25 Ultimate Useful PSD to HTML Tutorials

    March 14, 2010

    [...] Leia o post original/Visit Source Article [...]

  8. Combson Yachts

    March 15, 2010

    I have really enjoyed this text, and I have retweeted to my friends-designers…What a collection you have here!

  9. bagus

    March 15, 2010

    nice website template, thanks for the tutorial list.

  10. 145+ Useful Fresh Articles for Designers and Developers | tripwire magazine

    March 17, 2010

    [...] 25 Ultimate Useful PSD to HTML Tutorials [...]

  11. The Lazy Way To Buy And Sell Cars For Profit! ===. | Car Donation Guide

    March 17, 2010

    [...] 25 Ultimate Useful PSD to HTML Tutorials | Tutorial Lounge [...]

  12. Dizzy Blog » iA Notebook » 25 Ultimate Useful PSD to HTML Tutorials

    March 18, 2010

    [...] 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 [...]

  13. 25 Ultimate Useful PSD to HTML Tutorials | Design Newz

    March 22, 2010

    [...] 25 Ultimate Useful PSD to HTML Tutorials [...]

  14. De PSD a HTML, tutoriales | Isopixel

    March 28, 2010

    [...] tutoriales que te darán muchas opciones para llevar tus diseños de PSD a HTML en poco tiempo. [LINK] AKPC_IDS += "13574,"; Comparte este artículo en [...]

  15. links for 2010-03-29 | RGBitmap – Diseño, Desarrollo y Creatividad + TICs

    March 29, 2010

    [...] 25 Ultimate Useful PSD to HTML Tutorials | Tutorial Lounge (tags: articulos diseño plantillas web psd css photoshop) [...]

  16. PSD Template

    April 04, 2010

    Great post. I’m going to tweet it!

  17. free html tutorials

    April 06, 2010

    Excellent work, thanks a ton for sharing such a valuable information, This will be very useful not only to a newbie but also to an experienced webmaster.

  18. Raphaël Confiant

    April 15, 2010

    This blog is very nice and informative. Thank you for the tutorial list.

  19. 25 Ultimate Useful Joomla Tutorials – 风调雨顺|信息美图

    June 03, 2010

    [...] 25 Ultimate Useful PSD to HTML Tutorials At the start of a web project many designers… [...]

  20. Flinn

    June 19, 2010

    I am new to designing stuff (especially the photoshop integration thing) n this post will certainly gonna help ease the process of my learning.
    Flinn

  21. ndrew

    July 15, 2010

    another great collection,
    thanks dude..

  22. ilham

    July 18, 2010

    thanks for sharing, i will learn it

  23. Brett Widmann

    November 06, 2010

    Great collection of tutorials. They are very helpful. Thanks for sharing.

  24. Dinero

    November 16, 2010

    I love Contempory-Modern-Font

  25. Orfebre Martin

    November 21, 2010

    I like it very much thank you i am a graphic designer student

Add a Comment

Please note that comments are moderated. Please avoid to: link dropping, keywords or domains/URL as names. Kindly do not spam, and do not advertise!