We all know that using Photoshop CS5 is currently the easiest way to obtain a clean and nice design. This software contains all the tools and features that you will need as well as a user friendly environment and many customizable options. You can use its brushes, templates, filters and image adjustment tool in order to come up with a quality final product. If you want your design converted into a web site or just a WordPress template, you will have to take a few simple steps. You will need a code viewer, such as Adobe Dreamweaver and a little patience.

Startup

You will first need to slice your design into elementary parts. The elements that need slicing are usually pictures, icons, background designs, logos and texts that have a font which is non-safe. In order to do this, first open the PSD file which contains your previously made design. Hide all the extra elements until you only see the basic shapes. Add a new slice which should contain your website’s background and continue doing this until you have selected all the necessary elements. Then you will have to save them for web and devices. The average pictures should be saved as .jpg while the gradients and texts should be saved as .gif or .png. Save all of your slices to the same folder – it will make it easier for you to find them afterwards.

Creating the basic files

Beside your basic folder, which you have already created, you will have to add another one, maybe called CSS. In this folder you will add your HTML and CSS basic files. Then you should open the CSS file regarding the layout and paste a CSS reset code. After this step you should also add a typography code and a general. These codes are easy to find on the Internet and will take care of what the code reader cannot do by itself.

Modifying the basic files

You should now proceed in modifying every part of the code according to your needs. For this you can either try some tutorials or try to learn CSS coding by yourself. Take every file and find out what is wrong and then make the necessary adjustments. This will involve the header, sub header, style page and general style. You will also be able to change the title, add any photo and maybe contact information. These things should go into the code and not in the Photoshop CS5 design, for they are important and you should be able to easily change them.

If you have carefully read all the above steps you should now have a general idea about how you can convert your Photoshop CS5 design into HTML or CSS with the use of Adobe Dreamweaver. Even though things might seem complicated at first, with a little exercise you will be able to master the codes and make your website look the way you want it to. If you want to try and do it by yourself you should know that you can find many tutorials on the Internet as well as a Help Center in Adobe Dreamweaver.