If you a web designer and working a lot on Photoshop then you would certainly like to learn “The know how” to code PSD into a CSS/Xhtml/html. In other words we are talking about splitting you webpage images into smaller pictures keeping their proportions intact. To say it even more ethically, your are converting images into JPEG, GIF, PNG etc, (which is easy) but learning the way of coding a PSD in CSS/html/Xhtml is something different.

The question we are going to answer with detailed explanation in this article is “Do you know how you can convert a PSD file into a valid CSS along with HTML/XHTML document?” It’s not that hard to convert the PSD file but it will really matter how well you code it to get more performance from your webpage. For example, if your webpage has more pictures it would take more time to load, but using the CSS code with either Xhtml/html format you can tweak it to load faster. Reading through a known book would help a lot learning in-depth concepts of Photoshop and web development using Photoshop. So let’s take a look at the instructions below which can help you understand and perform the coding.

Open Photoshop application before we proceed any further. Now from the Main Menu, click on the File Menu on the top of the window and select the Open option from list. This will allow you to pick an existing PSD file on your local computer. Once you have selected a PSD file, you should go back into File Menu and select the Edit in ImageReady option from the list. This will open the PSD document in ImageReady. To proceed further, you can select the Slice tool from the Tools palette which is located vertically either in right or left side of the Photoshop application. This tool will help us define the way you would like to divide your PSD documents, in other words, how to slice your document. For example, you can pick and slice the document to get the header, menu pictures etc properly.

Once the slicing is placed on the images in your PSD document you will find those areas starting to hide under Blue numerated lines and squares. This is the indication of a slice. Slices can be identified very easily as been placed appropriately into proportionate images. Never try to slice an image twice as this will only increase overhead. You are now left to define the output parameters through which you will get these slices converted into pictures along with the code that you need the most.

We will now be defining the output parameters: Therefore, to start this process, let’s open the File Menu once again and select the Output Settings, followed by CSS Export link. You will now see an output settings dialog box on your screen. Output setting will help you define the format in which you would like to get your sliced document along with the Xhtml/html code. Now, select the custom option from the preset drop down list because you have sliced custom areas from the document and not made one big slice to cover entire document. Also select the Generate CSS radio options with default settings. This option is going to generate a code that is most important you for. Click OK to apply the changes.

Now, remember, so far, you have only created and validated your settings and not created the file which can be modified to suite your webpage requirements.

How to get the PSD code? In order, to get the file in CSS/Xhtml/html format, open the File Menu and select the option Save optimized from the list. You are now done and that’s all you are required to do. Rest everything is going to be handled by the ImageReady application itself.

You will find ImageReady creating an Images folder and storing all the sliced images along with an HTML file which has the source CSS code in it. You can specify the folder where you want ImageReady to store the files along with the code file. If you would like to copy/edit this source code then go to your browser like Internet Explorer and select the Source option from the View menu. You can also choose to open it in any other popular browsers like Mozilla Firefox, Opera, etc and can view the source code. Since the browsers are only going to open the code in plain notepad format, you might find it difficult to understand. So what to do now?

Here is an alternate solution: The Photoshop code will be clearly visible and you can also choose to edit the HTML file in either FrontPage or Dreamweaver or any other HTML editor to understand/copy/edit the code more appropriately. At this point you are done with your exporting CSS file along with the HTML code. Modify them according to your requirement and tweak to get best performance from the webpage.

Similarly, you can make fabulous website designs using this feature. The added advantage over here is facility to export the sliced images into any popular web based picture format using the ImageReady along with the either CSS or Xhtml or html as the code base.

Using most famous image editors you will be able to add sharpness and contract to your image the way you like. Importing the images into an HTML page is easy can be done without any problem using ImageReady.

Conclusion

So, if you download some freeware and come across PSD file and html code, you now know how to handle the image as well as the code. Simply open the html in any editor application and modify the code and open the image in ImageReady and use the Save Optimized As feature to get appropriate slices out of the picture. The advantage in a powerful html editor like FrontPage and Dreamweaver is their ability to show you meaning and useless code in different colors making your web designing experience a real simple one.

This article is the property of http://www.Elegant-Templates.com