How to convert a photoshop document (psd) to blogger (css/xhtml)

In this tutorial i'm going to show you how to code the design from my previous tutorial into a blogger template this is going to be based on the Minima template, most of the css code in this tutorial is commented to explain what is does a css comment begins with "/*", and ends with "*/", like this /* a css comment */ i have highlighted the comments in green so you don't have to copy these, if you have any questions feel free to ask in the comments.

Start by selecting the Minima template then change the page background colour to #ebebeb from within the fonts and colours tab or go to layout > edit html then add the hex colour code #ebebeb to the body's css code also hide the blogger navbar by add the following css code

#navbar{display:none;}

we need to do some tweaking to the css code before adding our own so scroll down until you find the #outer-wrapper delete the width then set the margin and padding to 0 then add the following css code just below the #outer-wrapper.


#content-wrapper{
  padding-top:20px; /*adds 20px padding to top*/
  margin:0 auto; /*centers div*/
  width:900px; /*sets width to 900px*/
}


Now we are going to create the top navigation so copy the following css and paste it ideally above the #header-wrapper css.


#topnav{
  background:#181818; /*sets background colour*/
}
#topnav-inner{
  margin:0 auto; /*centers div*/
  padding-top:8px; /*adds 8px padding to the top*/
  height:22px; /*sets height to 22px*/
  width:900px; /*sets width to 900px*/
  font-size:11px; /*sets font size*/
}
#topnav ul{
  margin:0;padding:0; /*sets margin and padding to 0px*/
  list-style:none; /*removes bullets from list*/
}
#topnav ul li{
  margin:0; /*sets margin to 0px*/
  padding:0 15px; /*sets left and right padding to 15px*/
  border-right:1px solid #666; /*adds 1px border on right of list items*/
  float:left; /*floats list items to left*/
}
#topnav ul li.lastchild{
  border-right:0; /*removes border on right of list items with a class of lastchild*/
}
#topnav a,
#topnav a:visited{
  color:#ccc; /*sets link and visited link colour*/
}
#topnav a:hover{
  text-decoration:none; /*removes underline on hover*/
  color:#fff; /*sets colour on hover*/
}
#topnav-right{
  text-align:right; /*align text to right*/
  float:right; /*float to right*/
  margin:0;padding:0; /*sets margin and padding to 0px*/
}


Next copy the following xhtml code and paste it just above the <div id='header-wrapper'> (see screenshot)


<div id='topnav'>
<div id='topnav-inner'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Services</a></li>
<li class='lastchild'><a href='#'>Contact</a></li>
</ul>
<div id='topnav-right'>
<ul>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments</a></li>
<li class='lastchild'><a href='#'>Email</a></li>
</ul>
</div>
<div class='clear'/>
</div>
</div>

save your template and view, it should look something like the following screenshot.


(if you want to get the all links working you need to replace the # with the actual link) so that is the top navigation done now we are going to create the header, open the photoshop document (PSD) cut a slice measuring the height of the header by 1px wide as shown below


upload the slice to your image host such as photobucket, tinypic or picasa web albums then copy the link as we will need it then find the css code for the #header-wrapper remove the width and border property then set the margin to 0 then add a background shorthand property like the following css code below replacing "images/headerbg.png" with the link to your sliced image,


#header-wrapper {
  margin:0; /*sets margin to 0px*/
  background:#e54414 url(images/headerbg.png) top left repeat-x; /*sets background colour with the image positioned at the top left repeated horizontally*/
}

in the #header-wrapper CSS code above i have used the background shorthand property with a solid colour and the image positioned at the top left repeated horizontally.

Now remove the border and text-align properties for the #header css code, set the margin to margin:0 auto; the color to white #fff then add a width and height property with the height set at 130px and the width at 900px finally add an overflow property set as hidden your css for the #header should look like the following.


#header {
  margin:0 auto; /*centers div*/
  color:#fff; /*sets text colour*/
  height:130px; /*sets height to 130px*/
  width:900px; /*sets width to 900px*/
  overflow:hidden; /*hides overflowing content*/
}


Save your template and view, it should look something like the following screenshot (note i have tweaked the CSS code for the blog title and description also i changed the text font styles from within the fonts and colours tab so your text styles may look different from mine).


Next we are going to create the navigation bar just below the header, open the photoshop document (PSD) cut a slice measuring the height of the navigation bar plus the drop shadow by 1px wide as shown in the screenshot below


upload the slice to your image host then copy the link again like we did with the header then add the following css code to your template ideally below the #header .description css replacing "images/navbg.png" with the link to your sliced image.


#nav{
  margin:0; /*sets margin to 0px*/
  background:#e0e0e0 url(images/navbg.png) top left repeat-x;/*sets background colour with the image positioned at the top left repeated horizontally*/
}
#nav-inner {
  margin:0 auto; /*centers div*/
  width:900px; /*sets width to 900px*/
  height:44px; /*sets height to 44px*/
  font-weight:bold; /*sets text style to bold*/
}


Next copy the following xhtml code and paste it just above the <div id='content-wrapper'> (see screenshot)

<div id='nav'>
 <div id='nav-inner'>
  <!-- unordered list todo -->
 </div>
</div>


save your template and view, it should look something like the following screenshot when viewed in a web browser.


Now we are going to create the navigation links, open the photoshop document (PSD) and slice one of the seperators


upload the slice to your image host, copy the link again like we did with the other two slices then add the following css code to your template below the #nav-inner css replacing "images/sep.png" with the link to your slice.


#nav-inner ul {
  margin:0;padding:0; /*sets margin and padding to 0px*/
  list-style:none; /*removes bullets from list*/
}
#nav-inner li {
  float:left; /*floats list items to left*/
  margin:0; /*sets margin to 0px*/
  padding:0 1px 0 0; /*sets 1px padding on right*/
  background: url(images/sep.png) top right no-repeat ; /*sets background image positioned at top right no repeat*/
}
#nav-inner a {
  float:left; /*floats links to left*/
  text-decoration:none; /*removes underline*/
  color:#8c8c8c; /*sets text colour*/
  margin:0; /*sets margin to 0px*/
  padding:12px 20px; /*sets padding on top and bottom to 12px left and right to 20px */
}
#nav-inner a:hover {
  background:#fff;/*sets background colour on hover*/
  text-decoration:none;/*removes underline on hover*/
  color:#e14316;/*sets text colour on hover*/
}


Now modify the xhtml code for the <div id='nav'> we created earlier by removing the comment and adding an unordered list so your xhtml code should look something like the following,

<div id='nav'>
 <div id='nav-inner'>
  <ul>
   <li><a href='/'>Home</a></li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Portfolio</a></li>
   <li><a href='#'>Services</a></li>
   <li><a href='#'>Contact</a></li>
  </ul>
 </div>
</div>


save your template again and view in a web browser, it should look something like the following screenshot.


Next we are going to create the main post section, so first make sure you have expanded the widget templates then find the code for the post date as shown in the screenshot below


cut and paste it to notepad as we are going to move it underneath the post title then find the post includable it should look something like the following


modify the code, just below <div class='post hentry'> add <div class='post-inner'> make sure you add the closing </div> tag at the very bottom of the post includable then add <small class='post-meta'> just underneath the post title with the post date, labels and author info make sure you add the closing </small> tag then just underneath there add <div class='comment-icon'> with the comment count link (note i have tweaked the code to display a number only instead of the default "0 comments") don't forget the closing </div> tag basically make your code look like mine below

<b:includable id='post' var='post'>
<div class='post hentry'>
<div class='post-inner'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<small class='post-meta'>
<b:if cond='data:post.dateHeader'>Posted <data:post.dateHeader/></b:if>
<b:if cond='data:post.labels'>
in <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>
<b:if cond='data:top.showAuthor'>by <data:post.author/></b:if>
</small></b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='comment-icon'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl'><b:if cond='data:post.numComments == 1'>1<b:else/><b:if cond='data:post.numComments == 0'>0<b:else/><data:post.numComments/></b:if></b:if></a></b:if></div>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span> </div>

<div class='post-footer-line post-footer-line-2'> </div>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div></div>
</b:includable>


now open the photoshop document (PSD) then cut out the comment icon, create a slice measuring 240 pixel by 1 pixel wide of the post background and nudge it down by 2px from the top,


upload the post background slice and comment icon to your image host and copy the links like we did with the other slices then find the following css code for the post

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
}
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}


modify the code, add some custom css selectors as shown below replacing "images/postbg.png" with the link to your post background slice and "images/commentbg.png" with the link to the comment icon

.post {
  margin:0 0 1.5em; /*sets bottom margin to 1.5em*/
  border:1px solid #dedede; /*adds 1px border*/
}
.post-inner{
  border:1px solid #fff;/*adds 1px border*/
  padding:9px 10px; /*sets top and bottom padding to 9px left and right to 10px*/
  position:relative; /*relative positioning*/
  background:#fff url(images/postbg.png) top left repeat-x; /*sets background colour with the slice positioned at the top left repeated horizontally*/
}
.post h3 {
  margin:0; /*sets margin to 0px*/
  padding-bottom:10px; /*adds 10px padding to bottom*/
  padding-right:50px; /*adds 50px padding to right*/
  font-family: Arial, Helvetica, sans-serif; /*sets font family*/
  font-size:20px; /*sets font size*/
  font-weight:normal; /*sets font weight*/
  line-height:1.05em; /*sets line height*/
  letter-spacing:-1px; /*sets letter spacing*/
  color:#333; /*sets text color*/
}
.comment-icon {
  position:absolute; /*absolute positioning*/
  right:10px; /*position element 10px from right*/
  top:9px; /*position element 9px from top*/
  font-family: Arial, Helvetica, sans-serif; /*sets font family*/
  font-size:20px; /*sets font size*/
  text-align:center; /*align text to center*/
  width:50px; /*sets width*/
  height:43px; /*sets height*/
  line-height:34px; /*sets line height*/
  background: url(images/commentbg.png) no-repeat; /*sets background comment icon no repeat*/
}
.comment-icon a,
.comment-icon a:visited,
.comment-icon a:hover,
.post h3 a,
.post h3 a:visited,
.post h3 a:hover,
.post h3 strong {
  text-decoration:none; /*removes underline*/
  color:#333; /*sets text colour*/
}
.post-meta {
  background:#e14214; /*sets background colour*/
  padding:3px 5px; /*sets top and bottom padding to 3px left and right to 5px*/
  color:#fff; /*sets text colour*/
  font-weight:bold;/*sets text bold*/
  font-size:10px;/*sets font size*/
}
.post-meta a,
.post-meta a:visited,
.post-meta a:hover{
  color:#fff; /*sets text colour*/
}
.post-body {
  margin:0 0 .75em; /*sets bottom margin to 0.75em*/
  line-height:1.6em; /*sets line height*/
  padding-top:10px; /*sets top padding to 10px*/
}


finally find the css code for the #main-wrapper increase the width to 600px save template and view, it should look something like the following screenshot.


I did the same for the comments section however i do not show you here because it is basically done the same way as the post section.

Now we are going to do the sidebar widgets, it could be done the same way as the post by using the same slice but you would need to edit the code for every widget you add to the sidebar, so we are going to do it another way first open the photoshop document (PSD) and cut out a section measuring 280 pixel wide by 240 pixel high this section should just sit inside the gray border


upload the image to your image host then copy the link and find the following css code for the sidebar

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}


modify the code until it looks like mine below replacing "images/sidebarbg.png" with the link to your sidebar background image

.sidebar .widget{
  border:1px solid #dedede; /*adds 1px border*/
  margin:0 0 1.5em; /*sets bottom margin to 1.5em*/
  padding:8px; /*adds 8px padding on all 4 sides*/
  width:264px; /*fixes a bug in IE, 8px padding on left and right total width is 280px*/
  background:#fff url(images/sidebarbg.png) top left no-repeat; /*sets background colour with image positioned at top left no repeat*/
}


next find the css code for the #sidebar-wrapper, increase the width property from 220px to 282px and finally tweak the code for the sidebar titles by looking for the following css code,

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}


modify the css until it looks like mine below

.sidebar h2 {
  margin:0;
  padding:0 0 3px;
  font-weight:normal;
  font-size:18px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  letter-spacing:-1px;
  color:#333;
}


save template and view in a web browser, it should look something like the following screenshot


next we are going to create the footer so look for the following css code

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}


increase the width to 900px and the line-height to 2.9em then delete the padding, text-transform, letter-spacing and text-align properties then add a color and font-size property with the colour set at #ccc and the font at 12px finally your css for the footer should look like mine below

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  line-height:2.9em;
  color:#ccc;
  font-size:12px;
}


now add the following css code to your template ideally above the css we just created for the #footer

#footer-wrapper {
  background:#181818;
}
#footer a,
#footer a:hover,
#footer a:visited {
  color:#ccc;
}


now scroll to the very bottom of your template until you see the following xhtml code

  <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
  </div>


modify the code and add your copyright info here's what mine look's like

<div id='footer-wrapper'>
<div id='footer'>
<span style='float:left;'>
&#169; 2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> |
Powered by <a href='http://www.blogger.com'>Blogger</a>
</span>
<span style='float:right;'>
Design by <a href='http://www.lawnydesigns.com'>LawnyDesigns</a>
</span>
<div class='clear'/>
</div>
</div>


that is the layout complete save your template and view, here's my result now if you go to Layout > Page Elements you will see that it looks a mess like the following screenshot


you can easy clear up the page elements tab by using code below added just before the closing </head> tag

<style type='text/css'>
#layout #nav-inner,
#layout #topnav-inner,
#layout #footer{display:none;}
#layout #header,
#layout #content-wrapper{width:800px;}
#layout #main-wrapper{width:450px;}
#layout #header{height:auto;}
#layout .sidebar .widget{width:auto;}
#layout #header-wrapper {clear:both;}
</style>


now save your template and view the page elements tab it should look something like the following screenshot


you can download the template from my other blog i hope you enjoyed reading this tutorial any questions ask in the comments.

27 Responses to “How to convert a photoshop document (psd) to blogger (css/xhtml)”

very good thank u

hey its very very good your tutorial... but I am not really getting it done :( I already did the first part of it making my basic 2 coloum layout...But I used different images and background its probably making it harder for me to get it done, the images doesn't work when I try to trasform it in html codes... Anyway if you can help me my email is lilyletters@gmail.com :)

@Lily
If you are using different images the coding maybe different, you could hire me to convert your design to blogger.

I have really learned a lot and enjoyed your site over the last hour or so, and I want to encourage you to keep it up! I bookmarked a bunch of things, that I will definitely come back and implement--thank you so much!
Question: I've got a 3-column test blog and just about have it all looking the way I want, but I don't really know how to change my present blog to my new look! And I'm afraid that something will go wrong. And I'm wondering if all my widgets will still be there? and what about my Google Affiliate ads? Lots of questions, I know.
Appreciate any help you can give me.
Blessings,
Wendy
Faith's Firm Foundation
www.wendygunn.net

@Wendy
Download a backup copy of your template, all the widgets should stay intact if you edit the code within your current template.

Post is very useful. Thanks

Wow!!!! Ty for the complex tut. I´ll try it on. I was looking for this tut and finally i´ve found. Keep the good working. xo

Really nice work and I like how you showed the process.

this is the best psd to blogger i have found. this tutorials is not only elaborative, but also very easy to understand for a beginner like me.

i had created many psds for my blog, but for the lack of blogger hacks and all other technical things, i ended up in a mess, but your tutorial is going to help me bild my masterpiece :)

i specifically like the 'clean-up' section of this tutorial, as we don't like unwanted things in page elemnts.

thanks a lot lawny, for sharing such an assets with the world.

@scorpy
good luck converting your design's i like those graphics that you create.

hi lawny, thanks for your good wish and thanks a lot for your kind words

This is really very helpful. I am so grateful.

Great tutorial mate. Im beginner in this, so Im trying to learn the basics. Keep the hard work.

Hi Lawny..
I realy want to know how to get or create those html/css code for hacking like the "top-nav". Here u teach only just copy and paste that code. I want to know how all these being done? How u generate those code?
Hope u can share that knowledge. TQ

wow... great tutorial....
i want to say thanks , from behalf of bloggers. really its a best tutorial for bloggers who wants their own custom designs... i did it as in this tutorial.. i did it, not nicely but i did...

but, i faced some problems when the design is totally based upon images.. i have a design [https://lh5.googleusercontent.com/-qy52suYuUzk/TkT54z99GSI/AAAAAAAAA8g/2XJ47mFHawE/s576/MY%252520FIRST%252520EXTREME%2525207%252520WEBLAYOUT%252520final.png] .
please if u can help me then here is my email :
[blog.extreme7@gmail.com]

Great tutorial, I like it.

great tutorial.. I will do it some other time.. for my http://the-worlds-latest.blogspot.com/ blog..

I have tried it but I can't seem to find minima. I am using the new blogger interface. :(

@raketeer_mom
warning always download a back up copy of your current template as i cannot be held responsible if you lose any changes.

These are the old templates anyway login to your blog then go to design > edit html and scroll to the bottom of the page then click the link titled "Select Layout Template" from there you can choose the minima template.

hey lawny!I just downloaded your orange press theme and did some edits :D.. I like how my blog looks like now..

http://the-worlds-latest.blogspot.com/

Great tuts and free theme you have.. thanks much!

By the way, I was able to find the minima.. but when I am about to edit the main post area, I can't seem to find the codes you mentioned in your tuts, but everything turns out well. :)

Can you make this tutorial into video format, please

Hi thanks for great tuts ... i've made the template so many times its amazing ... but this time i am little bit confused as I've made the psd template how do i convert it to xhtml as you have said above that start with Minima template could you please tell briefly that what is this and what I've to do now to convert that psd file to blogger XML. please waiting for your response

engineer.faisal1@gmail.com

nice tuotrial boss.

Hello Lawny - when I first tried to learn about creating a custom blogger template, your tutorial was all I found most comprehensive over the internet. The credit goes to you that I finally can code blogger template and based upon the knowledge and process you provided in this post, I finally could make my website scorpydesign on blogger.

Secondly while I finally managed to learn more about blogger template designing and coding I had the opportunity to design custom blogger templates for my friends and sometimes for my clients (I am a freelance graphic designer by profession)

Thank you Lawny for this wonderful tutorial - wish you all the best.

@Sumit
Thanks for the comment, i like your new website template.

Great tutorial, I like it.

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2012 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger