subject: All About Psd To Css And Html Coding [print this page] A layman may get daunted by the three abbreviations PSD, CSS and HTML. These abbreviations, however, are simple tools in the modern world of web developers. We need to understand the terms before we even think of using them for PSD to CSS, PSD to HTML, design to HTML and image to HTML.
HTML stands for Hyper Text Markup Language. It is the basic tool and foundation of all web pages. It is a markup language written in form of tags enclosed in angular brackets. HTML tags usually come in pairs of two, like < h2 > < /h2 >, < h1 > < /h1 > and so on. You can call HTML the basic building blocks of all web pages. PSD stands for Photoshop document. Web page designers use Photoshop to make attractive web pages which contain text blocks and columns, headers, footers and user buttons. Anyone contemplating converting PSD to HTML and CSS has to first slice all these different portions into easily convertible sections. .PSD is a widely used file format and is supported by almost all competing software however it is limited to a height and width of 30,000 pixels.
Work for a specialist
A do it yourself attempt at converting PSD to CSS and PSD to HTML and then transferring to a website can be possible but the guidance of an expert is necessary. All this is done through step by step coding. The following coding can be noted down and tried in your first attempt to transport your PSD design to HTML and also any image to HTML.
The first step is to slice the PSD file into easily manageable boxes. This process is known as slicing. Though slicing is used in places where graphic design has to be implemented as an interactive media content but it is also used as the base step for converting PSD to CSS and PSD to XHTML/HTML. These are then transferred through coding to the HTML platform. Peeling off all these boxes just leave the background visible. Now it can be saved as a .jpg file. The next step for us is to open a window in Notepad and begin with the CSS coding for the background by writing: - body {background: URL (myscenery.jpg);}
Step by step
The Ruler and the Analysis Tool in Photoshop have to be used to record the dimensions of the components including the colors, alignment, height and width.
The next step is to transfer the above details from PSD to CSS.
The commands for a red colored column on the right to be transferred to CSS would be #column {float: right, width: 700px, height: 200px, background color: #bbb ;}. This step has to be repeated for all the components. In the same way font sizes and other features too have to be transferred.
Then the HTML portion has to be dealt with. Using a Notepad file the CSS proportions have to be transferred in a series of HTML commands.
Both the CSS and the HTML specifications should be placed in one folder. It is easy now to see and compare your web page with the original PSD file.
