most inspired

You hired a designer, and worked with them to create a beautiful design for your website. They finished the design and delivered the source files and said thank you very much for the business, but wait … what now you can’t make a website with this!

Don’t panic, you’ve got past the first and often most difficult part of building a website, and you have a few different options for taking those files and building your website. Find out what they are after the jump…

Do it yourself

You don’t need to be an expert in HTML/CSS to code up your design. There are many tutorials that will guide you thru the process of slicing and coding a design in to HTML/CSS. Not only is this very cost effective, but it will put you in a better position to manage your site in the future.

One you get past the basics you’ll find even more detailed tutorials on all aspects of website coding. Below you’ll find a list of tutorials to get you started:

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

  

  Takes you through the entire process of getting from Photoshop to completed HTML. Learn how to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

• Build a Sleek Portfolio Site from Scratch

  There’s nothing like building an entire site to show you a good overview of how a CSS layout should work.

• Converting a Design From PSD to HTML

• From PSD to CSS/HTML in Easy Steps

  A 4 part series on how to take a PSD file and convert it into a fully CSS based html page.

• PSD > HTML/CSS

• Converting a Photoshop Mockup

  

  A three part series that covers the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website.

• Encoding a Photoshop Mockup into XHTML & CSS

• Slice and Dice that PSD

• The Design Lab: PSD Conversion

• Coding: Design Lab TV Styled Layout

  You will learn how to code the Design Lab TV Styled layout into xhtml and css.

• WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial

  

  Learn how to realize a valid, standards compliant XHTML and CSS home-page from PSD template.

Designer sourced

Don’t let your designer off the hook. Even though they don’t advertise the fact, many designer are very capable of turning their designs into functioning HTML/CSS. Who better to code the design than the person who created it, they will need no instructions as to the intent or purpose of even the most complicated part of the designs.

Designer that aren’t able to the code the designs themselves, often have coders they work with on a regular basis. The on-going relationship between the coder and designer often produces better results in less time than finding a coder yourself. They may be able to sub-contract the work, or maybe give you a referral to someone they like to work with.

Slicers

A new crop of web development companies specialize in producing quality CSS-based layouts that are even optimized for search engines (SEO). You send them a PSD or PNG and they build out the HTML / CSS for you. Prices range from $100-500, and can take as little as one day for you to get your coded site.

One of the first of these type of companies was XHTMLized, although there are now many, many, options. Most Sliced provides a comprehensive directory of these companies, and allows people who have used them to submit reviews of their services, helping you to find the best slicer for you.

Recently these firms have expanded their services and can often code your designs directly into popular Content Management System, such as Wordpress, and ExpressionEngine, or into E-commerce solutions such as Magento and CubeCart. This can me getting your website up and running even faster and cheaper than before.

Each of these methods might be right for you, depending on your skills, budget and time-frame. I highly recommend going through some of the tutorials listed above, even if you decide to have someone else code the site for you. This will put you in a better position to judge the quality of the work they produce, or even to help you decide who to use for coding the design in the first place.