1. [2012]
[ ]
Overview And Guidelines In Web Layout With Styling Using Psd To Html Conversion
Rafael Arnett
[Crazyxhtml]
[25/10/2012]

2. Overview And Guidelines In Web Layout With Styling Using Psd To
Html Conversion
It is often necessary to convert from PSD to HTML in order to fully complete a web design. The
conversion procedures are a little complicated, but it is possible to simplify the process for an
overview of the steps needed to be done.
Overview of web layout elements
For a regular website owner to understand the steps involved in psd to html conversions, a
working knowledge of Photoshop, HTML, XTML and CSS is necessary.
Photoshop is the popular name for a program designed and developed by Adobe Systems that
assists the user in editing graphics and images. The program runs on both Windows and
Macintosh. The most recent (13th) release of the program is called Adobe Photoshop CS and
may be availed by itself, or along with other software packages.
Images and graphics made with Photoshop are popularly used as images to accompany the text
uploaded on websites. The files which use the extension .PSD are also widely used as website
backgrounds and textures.
HTML or hypertext markup language is the most typical markup utilized to display information
on web pages. XHTML or extensible hypertext markup languages are an extended version of
XTML currently used the main language used to write web pages. HTML/XHTML documents are
written as tags enclosed in brackets.
These are called HTML elements, which are essentially the building blocks of all sites on the
Internet. Web designers input the web content using the tags as reference for text, comments
and others. The browser is programmed to read the tags (not displayed on the page), interpret

3. them and eventually come up with the visual and auditory data embedded in the coding.
Images may also be embedded in the HTML document.
Overview of the procedure for writing a blog or magazine layout
Before the actual psd to html coding process is begun, the general structure is designed
primarily to be an optimized and logical layout. The first step is to use a text editor such as
Notepad to define the DOCTYPE, header and structure of the HTML.
The DOCTYPE may be defined by using XHTML 1.0 which features all the basic attributes except
for presentational elements (e.g. font). Next, the header section is defined by adding the
necessary elements to set the width of the browser window, display the logo and the right
header section where sign up and log in buttons go, among others.
Afterwards, the content area is set inside the main container. CSS features are utilized for the
grid layout, the tags are set for article titles, and the margins are set on the left and the right to
make way for other elements later on. Article lists are usually coded usually with CSS floating
elements. The HTML code for the sidebar section is then set for any widgets created as PSD
files. The footer is coded soo n after.
Web page styling using PSD to HTML/ CSS
In order to convert the PDS mock up to HTML code, the images need to be extracted first.
There are many tools to use in order to isolate and copy all the layers of the image and then
paste them into the document. After extraction, a CSS Reset is done using the text editor so
that the main structural elements are placed where they need to be.