Posts Tagged ‘Photoshop Design Tips’

Designing A New Website From A PSD Image File

Wednesday, March 17th, 2010

For those of you who are new to website design and need to know how to make a functioning website out of a Photoshop designed image file, this is the article for you. This is not a technical explanation which outlines each of the steps involved but instead just a quick & dirty explanation of the task at hand so as to get you pointed in the right direction so you’ll understand what needs to be done with your PSD image file.

In order for you to be able to use this PSD image as one of your website pages it will first need to be converted into a web ready format. There are several different types of web formats that you can convert your PSD file into such as HTML, XHTML, Joomla, and others. The most commonly used web formatting language, however, is HTML and more recently XHTML. Converting your PSD file into a valid HTML or XHTML file (sometimes referred to as a “coded markup”) will allow it to function as an actual web page.

Ok, so how do you convert it? Well, you have 3 options. Convert it by hand coding yourself (this requires “slicing” the image up into sections while inside of Photoshop, then exporting those slices into separate files, and then hand coding an html and css file from scratch that will properly configure your slices and pages so that when finished it all looks exactly like the original image). If your head has just fallen into your hands (and I’m assuming if you’re still reading this it probably has) then this is not likely to be the option of choice for you. Your 2nd option is also not well suited for the faint hearted beginner, although a bit easier than the first, and that is… you can actually purchase software that will help you to convert the image. You’ll still have to do a fair amount of setup and configuring before the software will actually convert it but the steep learning curve can be handled easily enough as long as you have the time available and are already comfortable working with image files, layers and some light html or web page editing programs. While this type of software can be expensive and time consuming you may consider it being cost effective if you plan on having to do this more than once for more than just a single page or website.

Your other option is to just hire a PSD to HTML service to do the conversion for you. There are literally dozens of small companies and individuals you can easily find on the internet today who are well skilled at performing these types of conversions. Prices will be varied and are typically indicative of how technically difficult your particular project is (such as java or flash features being built in, etc.). Some will offer to code it by hand and others will use software, and some will use both depending upon the project. Average costs for taking this route will probably range from about $50 per page to more than $200 per page.

At least now, you have a better understanding of what needs to be done in this situation and where you might need to begin looking to get your project completed. While image based web designs can be a bit of a pain to deal with due to the conversion factor and other maintenance related challenges, they also tend to make some of the most visually attractive presentations and can help to make your site more popular.

Want to find out more about converting PSD to HTML , then visit this well respected site for SEO Company Services .