A Try: From PSD to HTML

A Try: From PSD to HTML

As a web designer you're working with Photoshop all day and night to give your creativity a life. Now you want to convert your PSD files (jpg, png or any other format that Photoshop is capable of reading) in a valid and CSS/ (X) HTML. 

If you are going through the routine practice of first going to File / Save for the web, everything gets converted to image, but the worst part is that this page is generated in nested tables. Those who are experienced of working in nested tables in HTML know very well what could be the problems through which he/she may pass. For example, just make a small change to text within a cell and it becomes unable to find the right configuration. 

There is also a mode that allows you to transform everything in div or division. First open the file with Photoshop and tweak with ImageReady. Then go from the file menu and edit in ImageReady. 

Subsequently cut your document using the option "slice". This will allow you to define all the different parts of your web page (for example, the header, menu, etc.). This will separate the images into numerous lines and blue squares numbered. 

Now you need the output parameters: go to the File menu / output setting and select the following parameters:

Preset: custom preset: custom  

 

Slice output: generate CSS, referenced: by ID slice output: generated CSS, referenced: by ID (This will convert the slices into pictures along with coding) 

Now that we have defined the output options, click on OK. (This validates the settings, but doesn’t create the file yet). So you must save the result, using "Save optimized" (inside the File menu). 

In this way ImageReady has created the "images" containing all the pictures and a cut above contains an HTML file that is in the source code of the CSS. 

If you want to view, copy, modify the CSS or the source, code is sufficient to open the file in your favorite browser and view the source code. 

The job is done; image ready will create an “image” folder with all the sliced images and HTML file containing all source codes. 

Xhtml.pixelcrayons.com converts your design files from various common image formats (PSD, JPG, GIF, PNG, AI) into best quality cross-browser compatible W3C validated XHTML/CSS markup. Check xhtml.pixelcrayons for our PSD to XHTML Conversion and PSD slicing services.