20+ Photoshop Tutorials PSD to HTML/CSS, 35+ Online Services

June 18, 2013 · 31 comments

by Lars

Photoshop is very popular and a very good choice for creating website designs. In this article tripwire magazine provides more than 20 Photoshop Tutorials showing you the tricks you need to convert you designs into HTML and CSS. Even with the best tutorials at hand cutting up designs isn’t a easy task. To make sure you get the job done tripwire magazine also provides a list of more than 35 Online Service Offerings that you can use to get some help. You can also check out our post about cool HTML5 website templates for websites which will help you build an impressive online presence without a whole lot of coding. 


ElegantThemes
ThemeForest

Advertisement

Introduction

Creating a unique web design is not that easy the first couple of times but if you start off looking at the ideas and steps others take you will be up to speed much faster. This article mainly focus on providing tutorials for how to design web sites using Photoshop: 80+ Photoshop Tutorials: Practical Web Interface Design. Once you have the design converting it into HTML, CSS etc. will be your next challange. This article gives you a large collection of tutorials and online services you can choose from to get the work done much faster. If you want to try yourself make sure you also take a look at the tutorials in this article: 40+ Tutorials on Photoshop Website Design and PSD to HTML

Index

This article has been cut up into the following sections to help you find what you need instantly.

Section 1: Photoshop PSD to HTML Tutorials

Section 2: Photoshop PSD to HTML – Video Tutorials

Section 3: PSD to HTML Services
Need a good book on Photoshop? Take your pick here…

When Photoshop guru Matt Kloskowski was asked why he wrote this book, he replied, “It’s simple: I wanted to write the Photoshop book that I wished was around when I was learning Photoshop”. You’ve always known that layers were the key to understanding Photoshop, and now you have a resource to show you exactly how.
The fastest, easiest, most comprehensive way to learn Adobe Photoshop CS4Fourteen lessons in Adobe Photoshop CS4 Classroom in a Book cover basic and advanced techniques in Adobe Photoshop, the world’s best image-editing software. Learn how to retouch digital photos, work with layers and masks, navigate the workspace, prepare images print, and explore the latest features. Tips, extra-credit exercises, and step-by-step lessons help you become more productive using Photoshop.

Photoshop PSD to HTML Tutorials

Here you will find some of the best traditional step by step turotials available on the Internet. There’s really a lot of good inspiration and leaning waiting below so don’t wait…get started!

Build a Sleek Portfolio Site from Scratch

With PSDTUTS providing a great file to start off with, NETTUTS delivers yet another great tutorial on coverting a PSD to HTML for your own Portfolio website design.

build-a-sleek-portfolio-site-from-scratch

Encoding a Photoshop Mockup into XHTML & CSS

Continuing 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 produce a working example of the overall blog design.

encoding-a-photoshop-mockup-into-xhtml-css

PSD to HTML/CSS from HVDESIGNS

hv-designs provide some really great tutorials and this is just another one of them you should take the time to check out. They do an excellent job showing you all the little details in coding up the HawkStudio Designs template.

hv-designs-psd-htmlcss

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

This is a great tutorial for beginners and intermediate learners alike to advance there coding skills. Be sure to set aside a few hours, this walks you through the entire process of creating the design. From PSD, to HTML, and then to WordPress.

from-psd-to-html-building-a-set-of-website

From PSD to HTML Guide : Part Digital

This doesn’t provide you with one of the prettier results, but they do a great job explaining the whole processing of coding. Including a detailed process of how to slice the template.

convert-web

The Design Lab: PSD Conversion

First they provide you with an excellent tutorial on creating a design lab layout. Then they take it to the next step and give you a step by step directions on how to convert your newly created PSD into a fully functional web design.

the-design-lab-psd-conversion

Coding The Creative Design Layout

HvDesigns provided a nice and simple tutorial on creating a design studio layout and they backed it up by offering a simple tutorial on how to code it for the web. They are sure to leave no detail untouched, while providing great results.

coding-the-creative-design-layout

The best Tutorials on Converting PSD to XHTML

In this post, I’m going to show you the most practical tutorials on coding a template using CSS and XHTML. Making a template has two steps. The first step is Designing the template components and the second step is Coding them into a valid XHTML page.

creating-css-layouts-the-best-tutorials

Creating a CSS Layout from Scratch

This tutorial from Subcide starts with a basic design and takes us through the steps of coding the site. Along the way there are plenty of code samples and screenshots as the example site progresses.

Website_Final

Slice a Template and Code it Using CSS

This tutorial is going to show you how to take a template (not create it) and slice it up in Photoshop and code it in complete CSS. No use of that tables crap, CSS is much faster then using tables, your pages will load a lot faster. Plus you have a lot more control over your templates, and your code will be a lot neater.

slice-a-template-and-code-it-using-css

How To Create a Horizontally Scrolling Site

If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to “wrapping” that element down onto the next line. The more content on the page, the taller it gets, not the wider. Why is this? Because it just makes sense. Our eyes are used to reading fairly short lines of text, so if we were to see a paragraph of text in one long straight line, it would be painful to read. Paragraphs need to have line breaks in them to be readable (hence the term “blocks” of text). We sure as heck don’t want to hard-code line breaks into the markup ourselves. Obviously, we don’t have to, the browser does this wrapping for us. Thus the vertical expansion.

HorzScrolling

Coding Your 1st PSD Tutorial

HV Designs previously published a tutorial for creating a car sales layout in Photoshop, and this tutorial is a follow up to cover the process of coding the site. It’s a fairly detailed tutorial with the coding provided.

css_carsales_layout

From PSD to HTML – How to turn your designs into usable web interfaces

Part Digital Design gives us another detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.

convert-web

From PSD to CSS/HTML in Easy Steps

This tutorial will show you in detail on how to make a very basic, and nature friendly layout come to life by coding it into a fully functional CSS theme.

psd-to-csshtml-in-easy-steps-part-1

Coding a Layout with XHTML and CSS

This is a tutorial done by erracticwisdom. They do a good job explaining the tutorial, but its forwarded more towards users with a little more experience.

tutorial-coding-a-layout

Simple and Clean Portfolio Layout Coding

This is a great tutorial done by hv-designs describing how to code a simple portfolio layout.

portfolio-layout-10-learn-to-code

Photoshop PSD to HTML – Video Tutorials

If you prefer sitting back and just watch others do the tricks the tutorials presented in this section will suit your needs. Learning how to cut grafic desings into pieces and convering to HTML is much easier when all the step and tricks are shown on video!

ScreenCast: Converting a Photoshop Mockup

In this 3 Part screencast tutorial you learn how to take your design from Photoshop to your browse in no time.

1-converting-a-photoshop-mockup-part-1-of-3

ScreenCast: How to Convert a PSD to XHTML

Keeping with the theme of screencast this is a great 4 Part tutorial worth a try.

how-to-convert-a-psd-to-xhtml

This tutorial consists of the follwing parts.

  • Part 1: Slicing the PSD and Creating the XHTML
  • Part 2: CSS
  • Part 3: Implementing a Bit of Javascript
  • Part 4: Kicking IE6′s Butt

ScreenCast: Converting a Design from PSD to XHTML

Another great tutorial provided by NETTUTS. There is an original written tutorial, but this screencast does a great job of explaining all the steps in designing a simple, but beautiful layout. If you prefer to work at your own pace though, the written tutorial comes in handy.

converting-a-design-from-psd-to-html

Slice and Dice That PSD!

Recently posted on NETTUTS, this tutorial goes all out with a screencast and written code. The tutorial also utilizes a wonderfully simple design by Joefrey of ThemeForest.

slice-and-dice-that-psd

PSD HTML Slicing Tutorial

Here you find two really great and detailed video tutorials.

psd-html-slicing-tutorial

PSD to HTML Services

If you really enjoy making your design in Photoshop but just can’t find the time to cut it up and convert it into HTML you may consider to get it done by one of the companies presented below. I never tried this kind of service myself but I thinks it works well. Please drop a comment and share you experiences if you tried it…

PSD2CSS Online

This is a free online tool for converting PSD files into XHTML. Upload your file and it will produce the code.

psd2cssonline

psd2html

Turnaround – 8 hours
Starting price – $153
Additional pages – 50% off

psd2html

htmlblender.com

Simply provide your design in any format (PSD, PNG, AI, etc.) and select from a variety of layout options. We will then slice and hand code it to any markup required such as HTML, XHTML, DHTML, CSS, JavaScript, and more.

Turnaround – 8 hours
Starting price – $95
Additional pages – $95

htmlblender

Lemberg

Turnaround – 1 day (for higher price)
Starting price – $108
Additional pages – $54 (depends on # of pages and turnaround)

lemberg

w3-markup.com

Turnaround – 1 day (for higher price)
Starting price – $139
Additional pages – $120 (depends on # of pages and turnaround)

w3-markup

CSS Rockstars

Turnaround – 2 Days
Starting price – $149
Additional pages – $65

cssrockstars

Slice ‘n Dice

Turnaround – 1 business day (for higher price)
Starting price – $199
Additional pages – $150

slicendiceit

KWebSoft.com

Turnaround – 2 days
Starting price – $90
Additional pages – Starts at $25

Image2Markup

Turnaround – 4 hours
Starting price – $99
Additional pages – $9 discount

Turbo HTML

Turnaround – 3 -5 days
Starting price – 149 Euros
Additional pages – Not listed

PSD Slicer

Turnaround – 1 business day
Starting price – $80
Additional pages – 50% discount

YoDiv

Turnaround – 48 hours
Starting price – 199 Pounds
Additional pages – 25 – 50 Pounds

XHTMLizers

Turnaround – 3 days
Starting price – $249
Additional pages – $75

XHTML4U.com

Turnaround – 1 – 3 days
Starting price – $138
Additional pages – 50% off

xHTML Coding

Turnaround – 48 hours
Starting price – $60
Additional pages – Not listed

PSD Converter

Turnaround – 1 day
Starting price – $138
Additional pages – $69

Markup4U

Turnaround – 1 business day
Starting price – $175
Additional pages – $85

Design 2 Markup

Turnaround – 3 days
Starting price – Not listed

Additional pages – Not listed

Finely Sliced

Turnaround – Not listed
Starting price – Not listed
Additional pages – Not listed

PSDCutout

Turnaround – 1 or 2 days
Starting price – $89
Additional pages – $39

9xhtml

Turnaround – 2 business days
Starting price – $50
Additional pages – Not listed

XHTML Team

Turnaround – 24 hours
Starting price – $60
Additional pages – $25 – $40

Charm HTML

Turnaround – 3 Days
Starting price – $129
Additional pages – $69

psdSlicing

Turnaround – 12 working hours
Starting price – $129
Additional pages – 50% discount

slicemydesign

Turnaround – 3 business days
Starting price – $220
Additional pages – $220 for 2nd page, $100 for 3rd

SliceIt

Turnaround – 3 days
Starting price – $200 (for 2 pages)
Additional pages – Other packages are available

XHTML Slicer

Turnaround – 1 day (for higher price)
Starting price – $200
Additional pages – $75

XHTMLGenius

Turnaround – 3 days
Starting price – $250
Additional pages – $125

XHTMLized

Turnaround – 1 day (for higher price)
Starting price – $249
Additional pages -$220 (depends on turnaround)

CSS:Sage

Turnaround – Not listed
Starting price – Not listed
Additional pages – Not listed

The Choppr

Turnaround – 3 days
Starting price – $200
Additional pages – $100

PixelCrayons

Turnaround – 48 working hours
Starting price – $100
Additional pages – 50% off

Ipraxa

Turnaround – 3 days
Starting price – $100
Additional pages – Not listed

PSD to XHTML

Turnaround – 18 working hours
Starting price – $89
Additional pages – Not listed

Simon’s Portfolio

Turnaround – Not listed
Starting price – $160
Additional pages – Not listed

Web Refill

Turnaround – 8 business hours
Starting price – $99
Additional pages – Not listed

2html

Turnaround – 2 working days
Starting price – 200 Pounds
Additional pages – 50% off

Instant Coding

Turnaround – 4 -12 hours
Starting price – $129
Additional pages – Not listed

PSDgator

Turnaround – 2 business days
Starting price – $99
Additional pages – 25% off

{ 26 comments… read them below or add one }

Vietnam travel March 30, 2012 at 6:42 am

I really love it and I am glad that I found this site. I am been working with the development team converting from psd to wordpress.

Reply

cheap custom jerseys May 19, 2011 at 8:59 am

Word Press being the biggest advantage for building quick and customizable sites. I’m sorry I spent so much money on that site.

Reply

alalex April 29, 2011 at 11:52 am

For simple designs I would recommend to try out an automatic PSD to HTML layout conversion service – http://psd2htmlconverter.com/en/ . I’m getting quite good results with it. But hand coding should be preferred for complex designs though.

Reply

Andy April 29, 2011 at 8:49 pm

Hi thanks for sharing – we appreciate it ;-)

Reply

html5 January 11, 2011 at 6:58 am

useful info. thanks..soon:)

Reply

convert PSD to HTML November 21, 2010 at 4:16 pm

Hi, thanks for sharing!

Reply

Gas Electric Supplier June 5, 2010 at 5:22 pm

i have heard about something much the same to this before

Reply

Master May 7, 2010 at 8:09 am

Thanks for this list…
I found a fantastic Website for really cool HTML/CSS Tutorials

http://www.tutorials99.com

where all tutorials have a higher page rank and professional

Reply

web design April 25, 2010 at 2:19 am

Wow awesome post. I really love it and I am glad that I found this site. I am been working with the development team converting from psd to wordpress. I will add you anyway in my google feed reader. I hope to hear from you.

Reply

Creative Nuts April 7, 2010 at 10:00 pm

You must try creativenuts.com

Reply

R Aflec November 26, 2009 at 7:56 am

“Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.

http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.

Reply

Andrew Jhonson August 28, 2009 at 2:31 pm

Thanks for this great tutorial, this is really helpful. We have also collected a resource of 20 best PSD to XHTML/CSS tutorials. You can check the list at http://www.bestpsdtohtml.com/20-best-psd-to-xhtml-css-tutorials/

Reply

Joseph August 15, 2009 at 5:25 pm

great websites. I tried designxhtml.com for my psd to xhtml. tbey did an excellent job. i shall try the other ones too.

Reply

html to pdf August 10, 2009 at 12:42 pm

Converting files from other format to PDF is a wise idea if you want to create E-books for selling or making contract or some government report. Adobe Acrobat is the king when creating PDF files but editing files with Adobe Acrobat is not as convenient as Microsoft Office.

Reply

Designing Studios August 3, 2009 at 9:42 am

http://www.designingstudios.com

Starting price: $50

Additional pages: $30

Turnaround: 1-2 Days

Payment Method: Credit card, Paypal

Services:

Web Designing
PSD to Html/Xhtml
W3C Valid xHTML / CSS
Cross-browser compatible
Search Engine Optimized
Optimized and Sliced Images
Shorthand CSS
Code commenting
Hand coded
Tableless code
Accessibility
Javascript integration

Reply

David Cunliffe July 18, 2009 at 1:37 pm

I got a 70 page website developed from xhmldevelopers.com. They delivered them in 2 weeks with excellent results. Not a single major iteration was needed. I would really like to thank the owner for having such a wonderful team

Reply

SEO Semantic XHTML July 9, 2009 at 11:55 am

Thank you for this great tutorial and for listing http://www.Seo-Semantic-XHTML.com.

We have revamped SEO Semantic XHTML and also updated the feature list and pricing. Starting price: $75
Additional pages: 50% discount
Turnaround time: 8 hours

Again, thanks for this great article!

Regards,
Ipraxa

Reply

Jane June 18, 2009 at 10:35 am

@tripwiremag

was referring to the post above me.

Reply

Jane June 16, 2009 at 12:29 pm

Are you angry with them cos they have put you (xhtmlmania) at 15 th or its just a technique to gain exposure.

Reply

tripwiremag June 16, 2009 at 3:36 pm

@Jane: Sorry I can’t understand what your question is related to?

Reply

Rohit Kumar June 15, 2009 at 11:05 am

http://www.xhtml.­pixelcrayons.­com cheat to everyone the have websites like http://www.bestpsdtohtml.com they post it self (www.xhtml.­pixelcrayons.­com) best service provider but they not have. kindly be careful from this website http://www.xhtml.­pixelcrayons.­com

Reply

Adrian Clark May 25, 2009 at 9:25 am

Hi,

Probably the most reliable service to get your Design to HTML in 24 hours

You send a design in any of common formats (PSD, PNG, JPG, GIF etc) ?and you receive a high-quality XHTML-CSS page.

So far The Best Price in the market

http://www.mypsdtohtml.com

Reply

web design company May 7, 2009 at 7:07 pm

some of the web design companies like ours webartsense does provide the same service for 75 USD. they have similar turn around of 48 – 28 hrs depending on time zones and work hours.

Reply

CSS Tutorials April 21, 2009 at 5:07 pm

Thanks for the mention. I appreciate it. Great website you have as well!

Reply

Manish April 16, 2009 at 7:04 am

Thanks for listing our website pixelcrayons.com in your list. We have launched a new section for our PSD to XHTML conversion services ie http://xhtml.pixelcrayons.com and updated the feature sets of our services:
Starting price: $99
Price per additional page: 50% discount
Turnaround time: 8 hours
Sample work: http://xhtml.pixelcrayons.com/portfolio.html

Reply

Sean March 9, 2009 at 7:27 am

[url http://www.htmlcut.combHTMLcut.com/b/url

Turnaround – 1-3 business days
Starting price – $78
Additional pages – 50% off

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 5 trackbacks }

Previous post:

Next post:


Web Analytics