From PSD to HTML:how?

there are a couple of tutorials up on youtube that will definently have all the information you need on how to do that.
 
Net.tuts PSD to HTML to WordPress Video Series is a nice tutorial for what your looking for that is currently on Thevault and few other torrent sites i may upload it here later

Code:
http://net.tutsplus.com/articles/news/the-best-psd-to-html-to-wordpress-video-series-available-new-plus-tutorial/
 
Last edited:
for all photoshop tutorials, they have good ones there... And to save just File > Save for Web Devices after you have used the slice tool.
 
Alright so I have just recently done this! Basically have a psd file for your homepage, and then all of your other pages on your website. Make sure these are seperate psd files.

1. Start with the header: Crop the top bar with photoshop then save this as a picture.
2. Now for the middle content: Crop the mid section of your psd file and save it as a picture (You can make your text visible or not in the picture. If it is visible, then people will not be able to copy and paste off your website, it will act as a picture.)
3. Then crop the footer: This is the bottom bar of your website, it contain the copyright info etc. Crop this and save it as a picture.
4. Finally the background: Go to photoshop and make everything hidden except the background and save it as a picture.

Follow these steps for each psd file you have!

Now code in html and css
Make the basic format of your website in html then add css to tweak certain things like the alignment of text etc.
(I like to do my coding in notepad, but you may use something else, but make sure each page on your website has its own html and css file)

HTML: Here is a basic html template you may use
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
 
 
<ul id="nav">
<li><a href="Page1.html">Page 1</a></li>
<li><a href="Page2.html">Page 2</a></li>
<li><a href="Page3.html">Page 3</a></li>
<li><a href="HomePage.html">Home</a></li>
</ul>
 
 
 
<div id="middle-content">
 
</div>
 
 
</body>
 
<div id="footer">
</div>
</html>

CSS: Here is the css template for this HTML
Code:
* {
margin: 0;
padding: 0;
}
 
body {
 
font-size: ?%;
font-family: Helvetica, sans-serif;
background: url(images/your image.jpg);
}
 
ul#nav {
height: ?px;
width: ?px;
background: url(images/your image.jpg) no-repeat;
list-style: none;
margin: 0 auto;
}
li {
font-size: ?em;
}
ul#nav li a {
display: block;
height: ?px;
width: ?px;
float: right;
text-align: center;
margin-top: ?px;
margin-right: ?px;
padding: ?px;
color: ?;
} 
div#middle-content {
width: ?px; height: ?px;
background: url(images/your image.jpg) no-repeat;
margin: 0 auto;
}
div#footer {
height: ?px; width: ?px;
background: url(images/your image.jpg) bottom center no-repeat;
margin-top: ?px;
}

*I forgot to say make a folder for each page on your website and save the slices from the pages in their folder!
 
Last edited:
You can slice it in photoshop and convert it to css or html
 
Type 'Six Revisions' in Google. They have a few good guides on creating PSD templates and coding them to HTML.
 
Six revisions doesn't tell you how to do it, it only says things you can do to check your work.
 
as promised in an earlier post

Code:
http://www.blackhatworld.com/blackhat-seo/member-downloads/242708-get-psd-html-wordpress.html
 
I think photoshop has program that convert psd to html/css page.
the application name I dont remember but it has image in its name.
 
You need to learn HTML and CSS as your basics are not clear. First learn and then work.
 
Back
Top