Coding a .PSD File to HTML – A Simple and Basic Guide for Beginners
Learn to transform your PhotoShop .PSD file into HTML/CSS for your website to preserve the graphic design.
by
·
Join the DZone community and get the full member experience.
Join For FreeWant to transform your pixel-perfect .PSD file to well-structured HTML format? Well, then you can choose to code your PSD to HTML and CSS files formats. If you're a beginner, you may find it hard working with the coding part. This guest post will work as a basic guide for beginners that will tell them how to move code from .PSD successfully to HTML.
Step 1 - Get Your .PSD Shared
So, you have a pixel-perfect .PSD with heavy design, you'll probably have to export design elements from it. Let's first start with the most basic element that is background. When working on the background, disable all other layers and draw a marque around it. For doing so, right-click (Windows) and choose “Show/Hide All Other Layers” option in the photoshop tool. And then, hold down Alt (Windows), to activate the move tool to drag the selection you want to copy. Once the move tool is activated you can move your selection from your this active image window to the nice destination image window.
A word of caution, since most of the websites today are usually created with parallax scrolling effect, it's important to ensure that your design is wide enough hat it doesn't gets cropped when viewed on large screen. And so, make sure to set the width of your design to 2200px which is the sufficient size that can easily fit to even larger screens.
Now that you've created a large-size image, you'll have to ensure that the quality of the image is not affected, and so it's essential to choose the compression settings carefully.
Now continue to perform the same steps for individual page elements using the marquee tool (as described above for the background). Next, press Ctrl+Shift+C to copy and merge the elements, and then paste them in a new document from where you can export them. Especially, elements like your site logo, profile images and small navigation icons needs to be saved as individual graphics. Next, choose the right file type and compression setting for each of those item. Once you've saved all the images, you’ll have to move onto the HTML section.
Step 2 - Working With HTML
Now that you've carefully sliced each element of your .PSD, you'll have to give them a structure using HTML by writing the following code:
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
When structuring the HTML you'll have to consider 3 main elements: the header, the footer and the content. You should keep in mind the better things of converting PSD to HTMLfiles so that proper hand-coded HTML code can be prepared.
1. The Header
Every web design contains a header that usually contains the logo and the main navigation menu. Let's see how to write structure for the header:
<div id="header">
<h1><a href="#">Our Company Logo</a></h1>
<ul id="nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
As you can see the above snippet, the header section contains your logo and navigation menu divided into different sections: Home, About, Portfolio and Contact defined in an unordered list.
2. The Content
Next comes the most crucial part that will help you spread your brand message to your target audience far and wide – that it your website content. While structuring the HTML you'll have to write structure for the content that is contained within a div along with content ID. You can choose to write content in the form of large graphic images. Below is the code that will help you better understand how to structure for the content:
<div id="content">
<div id="services">
<ul>
<li><a href="#"><img src="images/services-1.jpg" alt="The main Heading goes here" /></a></li>
<li><a href="#"><img src="images/services-2.jpg" alt="Sub-heading" /></a></li>
</ul>
</div>
Let's say, you wish to segregate the design into two columns. In the first column you want to add a featured video (which could be a Youtube video or a vimeo video), which is followed by the title and description. Below is the code snippet for the first column:
<div class="column">
<h2 class="featured-video">Featured Video</h2>
<div class="video">
<object width="340" height="205" type="application/x-shockwave-flash" data="http://xyz.swf?clip_id=3155182&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://xyz.swf?clip_id=3155182&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1" />
</object>
</div>
<h3><a href="#">New Design Blog Launched</a></h3>
<p>This is the dummy text</p>
<p class="btn"><a href="#">See more videos here</a></p>
</div>In your second column, you can define any upcoming events with date and a little description of the events or programmes.
<div class="column">
<h2 class="events">Upcoming Events or Programmes</h2>
<dl>
<dt>4 <span>Dec</span></dt>
<dd>
<h4>Launch of New Website</h4>
<p>This is the dummy text</p>
</dd>
</dl>
<p class="btn"><a href="#">See more events</a></p>
</div>In the above code snippet, you can replace the text “This is the dummy content” with your original content. And also, you can define your upcoming events (if any) as per your own requirement.
3. The Footer
Now it's time to close the HTML with the footer. The footer usually contains a simple back-to-top link. However, you can also choose to add navigation menu to the footer as well if you wish.
<div id="footer">
<p><a href="#header" class="back-top">Back to top</a></p>
</div>
</div>
</body>
</html>
Step 3 - Let's Add Style to the CSS
Once you've completed writing your HTML structure, next comes the major part of styling your CSS. This step will ensure that the elements of all your HTML sections: the header, the content and the footer all are arranged in a clean and clutter-free manner. Styling the CSS involves putting all your design elements together in an organized manner. You can define the font-family and size of the text that will be displayed on your site. And then, you can add the main background image of your site, which is positioned at the top center (and don't forget to add not to repeat). These all things are required in the conversion of PSD to CSSfiles. You can see below:
/*
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
font-family: Arial Black, Times New Roman; line-height: 20px;
background: ##0099CC url(images/xyz.jpg) center top no-repeat;
}
/*Now let's begin styling all the HTML sections one by one.
How to Style the Header Section?
When styling the header section, you'll first have to style the main container div, which is followed by the header and its sub-elements. Make sure to assign some padding to the header div, so as to create spaces at the top and sides in accordance with the .PSD concept.
#container {
width: 930px; margin: 0 auto;
}
#header {
padding: 42px 12px 0 12px; overflow: hidden;
}
#header h1 a {
display: block; width: 210px; height: 104px; float: left;
background: url(images/companylogo.jpg); text-indent: -9999px;
}
#header ul#nav {
width: 705px; float: right; margin: 35px 0 0 0;
}
#header ul#nav li {
float: left; list-style: none;
}
#header ul#nav li a {
display: block; width: 160px; height: 32px; margin: 0 0 0 25px; padding: 15px 0 0 0;
font-size: 23px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
text-shadow: 0 4px 4px #444;
}
#header ul#nav li a:hover, #header ul#nav li a.active {
background: url(images/nav.png);
}How to Style the Content?
Let's get started with styling the content background.
#content {
width: 910px; padding: 16px 16px 50px 13px; overflow: hidden;
background: url(images/img1.png);
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 2px;
}Now, let's style the features section by writing the following code snippet:
#content #features {
width: 935px; height: 455px; margin: 0 0 45px 0;
overflow: scroll; /* Changed to hidden if javascript enabled */
}
#content #features ul {
width: 2720px;
}
#content #features ul li {
float: left;
}Now, let's see how to style the content of the two columns we created above. The columns need to float side by side, and so we'll add width (that easily fits inside the content div) and float:left property. Also, you'll have to style the video and upcoming events displayed in the those columns. You can simply add an image background to the video div to jazz up the embedded video, and adding some padding will help to aligns everything. Besides this, you can plan out on adding fancy layout to the events elements. For example, look at the following code that will help you style the columns content.
#content .column {
width: 410px; float: left; padding: 0 28px 0 28px; margin: 0 0 20px 0;
}
#content .column .video {
width: 395px; height: 230px; padding: 12px 0 0 15px; margin: 0 0 20px 0;
background: url(images/xyz.jpg) no-repeat;
}
#content .column dl dt {
width: 58px; float: left; padding: 13px 0 0 0; overflow: auto;
color: #f00; font-size: 64px; line-height: 32px;
}
#content .column dl dt span {
font-size: 16px; text-transform: uppercase; display: block;;
}
#content .column dl dd {
float: left; width: 354px;
}
}How to Style the Footer?
You can style the footer area by simply adding the textured background, and the back-to-top link placed in the right position.
#footer {
min-height: 158px; overflow: hidden;
background: url(images/footer-xyz.jpg) center 0 no-repeat;
}
#footer p a.back-top {
float: right; margin: 12px 20px 0 0;
font-size: 12px; text-decoration: none; color: #0C090A;
}
#footer p a.back-top:hover {
color: #250517;
}Conclusion
So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original .PSD concept.
Opinions expressed by DZone contributors are their own.
Comments