Tutorial Psdtohtmlcss6

Create a Comic Book Themed Web Design, Photoshop to HTM... http://net.tutsplus.com/tutorials/site-builds/create-a-comic-bo...
Create a Comic Book Themed Web

Design, Photoshop to HTML + CSS
(Part 2)
Alvaro Guzman on Mar 25th 2011 with 38 comments
Tutorial Details
Topics: HTML, CSS

Difficulty: Intermediate
Estimated Completion Time: 4 hours
View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+
network.
Final Product What You'll Be Creating
1 of 43 09/09/2013 12:53 PM
A couple weeks ago, we learned how to create a comic book theme web design over at our sister-site,
Webdesigntuts+. Today, well tackle the second part: its time to slice the design and turn it into a functional
HTML layout, ready to be ported to any CMS. Lets get started!
Before We Begin
You can get your very own PSD by following the step by step process at Webdesigntuts+ or just download it
here.
Since this isnt a beginner level tutorial, I will skip some basic explanations a working knowledge of
HTML and CSS is expected as well as a bit of knowledge about slicing images on Photoshop.
Step 1 - HTML Layout
2 of 43 09/09/2013 12:53 PM
Lets start by creating the work folder; since this tutorial doesnt require the use of a server side language, it
can be anywhere on your system. Create a file named index.html, and three initial folders:
/images
/js
/style
The contents of these folders should be fairly self explanatory.
Add the basic containers of the page to index.html. Im wrapping everything with a div called page. Inside that
div, add three more with IDs of header, content and footer respectively.
In the style folder, create a new file called default.css and add a reset to remove all the default styles. Im
using Eric Meyers but feel free to start with your favorite.
Following the HTML code for this step:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comicastic</title>
<link href="style/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
And the CSS:
@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
3 of 43 09/09/2013 12:53 PM
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of reset */
Testing the code in Firefox, you should see something like this:
Step 2 - Basic CSS Layout

Lets style the layouts structure first.
We wrap all the content with a 960px wide container, and then set the heights to the inner divs. To get the
exact height of each div you can use the Photoshop ruler tool.
4 of 43 09/09/2013 12:53 PM
We will slice the background images of the entire page and the footer section now.
In Photoshop, open Comicastic.psd and hide everything but the Header BG and Footer BG folders. Using the
slice tool, draw a big slice from the top-left until 575px below the top border. Next, draw another slice from
the guide delimiting the footer background (take a look at the image below). Of course, you can use the
guides to get an accurate result.
Using the slice selection Tool, select the two recently created slices and name each one with their
respective names bg-body and bg-footer. Then double click on all the auto-slices, and change the slice
type to No Image.
Next, go to File > Save for Web and Devices. Select the two slices you want to save (Hold the shift key to select
more than one), set the file type to JPG and set the Quality to 70 and click on Save. Browse for your
working directory and chose the root file (this dialog will automatically save your files inside the /images
folder).
5 of 43 09/09/2013 12:53 PM
6 of 43 09/09/2013 12:53 PM
Now that you have the background images, lets add the CSS for all the containers.
We will set a test height for the divs except the header (which is 180px height actually) and add some
temporary background colors for testing purposes.
/*Common*/
body{
background-color:#000;
background-image:url(../images/bg-body.jpg);
background-position:center top;
background-repeat:no-repeat;
}
/*Containers*/
#page{
margin:0px auto;
width:960px;
}
#header{
width:960px;
height:180px;
float:left;
}
#content{
width:960px;
height:400px;/* Temporal */
float:left;
background-color:#FCC;
}
#footer{
width:960px;
float:left;
background-image:url(../images/bg-footer.jpg);
background-position:top center;
}
Testing in a browser, you should have something like the image below.
Step 3 Slice the Header and Content
7 of 43 09/09/2013 12:53 PM
Background Images
Now that you know how to slice the image, lets do the same with all the header and content background (or
foreground) images. For the header images, create a copy of the "comicastic.psd" document and hide
everything but the Logo folder and the Search background related layers (plus Im adding the search button
in this view after moving it a few pixels right). Now, draw the slices around the visible segments, and name
them logo, bg-search and search-button, respectively. Save them as PNGs with transparent backgrounds.
Lets move forward with the content banner.
Show only the Background folder inside Top Banner, show the Page Curl folder and the Page Bg layer under Page
Content and show the Header Bg folder including the overall black background. Then, with these layers visible,
draw two slices: one for the banners background named bg-banner and another small one for the page curl
named content-page-curl. Then save them both of them as JPEGs.
8 of 43 09/09/2013 12:53 PM
Add a new div named logo inside the "header" and another div named top-banner inside content to our HTML
file.
<div id="header">
<div id="logo">
<a href="#"><img src="images/logo.png" width="340" height="135" alt="Comicastic" /></a>
</div>
</div>
<div id="content">
<div id="top_banner">Top Banner</div>
</div>
And the CSS code to make them look right:
#logo{
padding-top:32px;
padding-left:70px;
}
[...]
9 of 43 09/09/2013 12:53 PM
#top_banner{
float:left;
width:960px;
height:250px;
background-image:url(../images/bg-banner.jpg);
}
Now you should have something like so:
Step 4 Top Navigation

Lets add the HTML for the top navigation. Add the following code inside the header div, below the logo.
<ul id="main_navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
The hardest work with this div will be the positioning. Well make it float right, and play with the padding to
fit it in its proper place. Add the following CSS:
#main_navigation{
float:right;
}
#main_navigation li{
display:inline;
}
#main_navigation li a{
display:block;
float:left;
}
#main_navigation li a:hover{
}
10 of 43 09/09/2013 12:53 PM
Step 5 Font Replacement

Since I dont have any intention of using "Comic Sans" for this design, we will use a more interesting
typeface. Well take advantage of CSS3 to make it look great in modern browsers.
First, download the CSS font packages "Komika Title" and "Komika Text" and put them in a new folder,
named /fonts. Each kit has a bunch of font files and a .CSS file that we will import to our default.css
document, as follows:
/*Font Face Kits*/
@import url("../fonts/komika-text/stylesheet.css") screen;
@import url("../fonts/komika-title/stylesheet.css") screen;
Now that the fonts are imported, we can use them anywhere on our site. Each set has a number of variants
to choose from; you can use the ones according to the graphic design. For starters, we will set all the body
text with 'KomikaTextTightRegular' as follows:
body{
background-image:url(../images/bg-body.jpg);
font-family:'KomikaTextTightRegular', Arial, Helvetica, sans-serif;

font-size:1em;
}
And you can test the result in the browser:
11 of 43 09/09/2013 12:53 PM
Step 6 Styling the top Navigation

Back to the psd file now. Hide everything but the Tab background, create a new slice for the navigation tab
named bg-main-navigation and save it for web as a PNG file.
In our CSS file, lets add the styles for the navigation bar, to achieve the desired hover effect. We will add the
background to the hover action and create a similar style for the a.selected instance. Regarding the
typography, per the graphic, we will use "KomikaTextItalic" and add a nice text shadow style to make it look
better.
#main_navigation{
float:right;
margin-top:-18px;
margin-right:20px;
}
#main_navigation li{
display:inline;
12 of 43 09/09/2013 12:53 PM
width:120px;
}
#main_navigation li a{
display:block;
float:left;
padding-top:7px;
padding-bottom:8px;
padding-left:20px;
padding-right:20px;
margin-left:5px;
color:#FFF;
font-family:'KomikaTextItalic', Arial, Helvetica, sans-serif;
font-size:18px;
text-decoration:none;
text-shadow:2px 2px 2px rgba(0,0,0,.5);
-webkit-border-top-right-radius: 3px;
-khtml-border-radius-topright: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
}
#main_navigation li a:hover{
background-image:url(../images/bg-main-navigation.png);
background-position:left;
}
#main_navigation li a.selected{
background-image:url(../images/bg-main-navigation.png);
background-position:left;
}
Your page should like so at this stage of development:
Step 7 - Header Content

Besides the logo and the navigation bar, we will need to add the search bar and the social media links to the
header section. Lets start by creating the container box in HTML and adding the following div inside the
header div.
<div id="header-content">
13 of 43 09/09/2013 12:53 PM
Top Right
</div>
And some necessary styles:
#header-content{
float:right;
width:440px;
height:105px;
}
When tested in the browser:
Step 8 - Search Bar

Next, well begin styling the search area. Its basically a form with an input box and a button (see step 3). For
this, add the following code inside the "header-content div:
<div id="search">
<form>
<input type="text" class="search_input" value="Looking for something?"/>
<input type="image" src="images/search-btn.png" />
</form>
</div>
And the styling to make it look nice:
#search{
text-align:right;
padding-top:10px;
}
#search input{
vertical-align:middle;
}
#search .search_input{
width:160px;
margin-right:10px;
padding:6px 10px;
color:#F2AA00;
font-family:'KomikaTextTightRegular',Arial, Helvetica, sans-serif;
font-size:14px;
14 of 43 09/09/2013 12:53 PM
border:1px solid #7C0000;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
That should give us:
Step 9 Social Media Links

Below the search div, add a div with an id of social_media. In it, you can insert a list of the social media links of
your choice. Im using Social Media Icon Pack by Komodo Media
<div id="social_media">
Follow us
<a href="#"><img src="images/icons/twitter_16.png" width="16" height="16" alt="Twitter" /></a>
<a href="#"><img src="images/icons/facebook_16.png" width="16" height="16" alt="Twitter" /></a>
<a href="#"><img src="images/icons/technorati_16.png" width="16" height="16" alt="Twitter" /></a>
<a href="#"><img src="images/icons/rss_16.png" width="16" height="16" alt="Twitter" /></a>
</div>
And on the stylesheet:
#social_media{
padding-top:15px;
text-align:right;
color:#FFF;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:15px;
vertical-align:middle;
text-shadow:2px 2px 2px rgba(0,0,0,.5);

}
15 of 43 09/09/2013 12:53 PM
Step 10 - Sliding Banner

We will start with the sliding banner. Begin by downloading Easy Slider 1.5 and paste the files into a folder
named Banner.
There are several examples in the library folder we will mimic 02.html. Rename the file, if needed, delete all
the unnecessary HTML code and replace the images with some sample images.
So, the HTML file for the banner should be something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Banner</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="slider">
<ul>
<li><a href="#"><img src="images/01.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
<li><a href="#"><img src="images/02.jpg" alt="Preview" /><div class="bubble">test22</div></a></li>
<li><a href="#"><img src="images/03.jpg" alt="Preview" /></a></li>
<li><a href="#"><img src="images/04.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
<li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
And heres the CSS

@charset "utf-8";
/* CSS Document */
/* image replacement */
16 of 43 09/09/2013 12:53 PM
img{
border:0px;
}
.graphic, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}
#content{
position:relative;
}
/* Easy Slider */
#slider{
position:relative;
width:760px!important;
background:none;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
background:none;
}
#slider li{
width:760px!important;
}
#slider li a{
background:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:696px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(../images/btn_next.gif) no-repeat 0 0;
17 of 43 09/09/2013 12:53 PM
.bubble{
position:absolute;
float:right;
width:250px;
height:100px;
margin-top:-240px;
margin-left:500px;
color:#FFF;
}
/* // Easy Slider */
At this point you should have something like this:
Dont worry if the slider is a little bit buggy, we will fix it in a minute.
Adjust positioning and replace the arrows

Slice the two arrows (prev and next) and save them as PNG files in the images folder of the banner testing
directory.
Then adjust the CSS to work properly with the new arrows
#prevBtn, #nextBtn{
display:block;
width:50px;
height:40px;
position:absolute;
18 of 43 09/09/2013 12:53 PM
left:-50px;
top:71px;
}
#nextBtn{
left:630px; /* this is the li width*/
}
#prevBtn a{
display:block;
width:50px;
height:40px;
background:url(../images/btn-prev.png) no-repeat 0 0;
}
#nextBtn a{
display:block;
width:50px;
height:40px;
background:url(../images/btn-next.png) no-repeat 0 0;
}
Which produces:
Positioning
Now, well set the positioning, width and height of all the banner related divs. Well also fix the JS library to
avoid any problem regarding the additional bubble div.
Heres the modified CSS:
#container{
margin:0 auto;
width:830px;
position:relative;
text-align:left;
background:#096;
margin-bottom:2em;
padding-left:65px;
}
#content{
position:relative;
}
/* Easy Slider */
#slider{
position:relative;
width:830px;
overflow:hidden;
background:none;
background-color:#09F;
}
margin:0;
padding:0;
list-style:none;
19 of 43 09/09/2013 12:53 PM
background:none;
}
#slider li{
width:830px;
height:250px;
overflow:hidden;
}
#slider li a{
background:none;
}
#prevBtn, #nextBtn{
display:block;
width:65px;/*img width +15 padding*/
height:40px;
position:absolute;
left:-65px;
top:185px;
}
#nextBtn{
left:630px; /*Banner Width*/
}
#prevBtn a{
display:block;
width:65px; /*img width +15 padding*/
height:40px;
background:url(../images/btn-prev.png) no-repeat left;
}
#nextBtn a{
display:block;
height:40px;
background:url(../images/btn-next.png) no-repeat right;
}
.bubble{
position:absolute;
float:right;
width:250px;
height:100px;
margin-top:-240px;
margin-left:500px;
color:#FFF;
}
And the result in the browser:
Bubble Background
20 of 43 09/09/2013 12:53 PM
Now, slice the post content background. With only the talking bubbles visible in your .PSD, draw a Slice
named "bg-bubble" and save it as a .png file.
Modify the CSS to add the background and adjust the positioning of the bubble div, accordingly.
.bubble{
position:absolute;
float:right;
width:295px;
height:210px;
margin-top:-255px;
margin-left:535px;
background-image:url(../images/bg-bubble.png);
color:#FFF;
}
Here is how it looks in the browser; remove all the temporary background colors if you wish.
Post Content
To finish the banner section, lets add the HTML for the post content.
<div class="featured_post">
<h2 class="post_title">Post title</h2>
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labo
<div class="post_info">
<span class="author">Posted by <a href="#">Admin</a></span>,
<span class="date">Apr 14</span>
</div>
<div class="post_comments">
<div class="number"><a href="#">29</a></div>
<div class="comments"><a href="#">Comments</a></div>
</div>
</div>
21 of 43 09/09/2013 12:53 PM
Merge with the Main Template File

Its time to merge the separate module with our main document.
First, copy the banners /js folder to the template root, then add all the banner images into the /images folder
to the template directory.
Next, add the following code inside the <head> tag of our index.html" file:
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$("#slider").easySlider();
});
</script>
And add the banner divs accordingly inside the top_banner div.


<div id="top_banner">
<div class="banner_container">
<div id="slider">
<ul>
<li><a href="#"><img src="images/banner/01.jpg" alt="Preview" /></a>
<div class="bubble">
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusm
</div>
</div>
</div>
</div>
</li>
<li><a href="#"><img src="images/banner/02.jpg" alt="Preview" /></a><div class="bubble">test22</div></li>
</ul>
</div>
</div>
</div>

And the complete CSS to make the banner work
/* Top Banner */
#top_banner{
float:left;
width:830px;
height:250px;
padding-left:130px;
padding-top:10px;
background-image:url(../images/bg-banner.jpg);
}
.banner_container{
22 of 43 09/09/2013 12:53 PM
float:left;
width:860px;
height:250px;
position:relative;
text-align:left;
}
/* image replacement */
#prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
position:absolute;
text-indent:-8000px;
}
/* // image replacement */
/* Easy Slider */
#slider{
position:relative;
width:830px;
margin-left:100px
overflow:hidden;
}
margin:0;
padding:0;
list-style:none;
background:none;
}
#slider li{
width:830px;
height:250px;
overflow:hidden;
}
#slider li img{
border:1px solid #FFF;
height:248px;
}
#slider li a{
background:none;
}
#prevBtn, #nextBtn{
display:block;
height:40px;
position:absolute;
left:-65px;
top:185px;
}
#nextBtn{
left:630px; /*Banner Width*/
}
#prevBtn a{
display:block;
width:65px; /*img width +15 padding*/
height:40px;
background:url(../images/btn-prev.png) no-repeat left;
}
#nextBtn a{
display:block;
height:40px;
23 of 43 09/09/2013 12:53 PM
background:url(../images/btn-next.png) no-repeat right;

}
.bubble{
position:absolute;
float:right;
width:295px;
height:210px;
margin-top:-255px;
margin-left:535px;
background-image:url(../images/bg-bubble.png);
color:#FFF;
}
/* End of Top Banner*/
We will style the featured post content shortly. At this point, though, you should have something similar to
the following image:
Step 11 Content Wrapper and Background

Moving forward with the mockup, add a div below the top banner, named content_wrapper, and inside
another div named page_content, which will contain the actual information.
<div id="content_wrapper">
<div id="page_content">
Page content
</div>
</div>
Then, in order to make it look like the design, we will use CSS3 to add the rounded corners to the page_content
div and the page curl we sliced in Step 3.
/*Page content*/
#content{
float:left;
width:960px;
}
#content_wrapper{
float:left;
width:910px;
padding-left:10px;
padding-right:40px;
padding-top:10px;
24 of 43 09/09/2013 12:53 PM
#page_content{
float:left;
width:100%;
height:350px;/*temporal*/
background-color:#FFF;
background-image:url(../images/content-page-curl.jpg);
background-position:bottom right;
border-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-radius-bottomright: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
}
/*End of Page Content*/
What our page should look like, at this point:
Step 12 Post Image and Title

Lets mock up a testing post.
Per the design, we will need to have a squared image with the post title and the categories list placed on two
stripes above it. Lets deal with the HTML first.
Create a div named post and place it inside the page_content div. Then add an image, a title and some metadata
to the container.
25 of 43 09/09/2013 12:53 PM
<div class="post">
<img src="images/posts/01.jpg" class="post-image" />
<h2><a href="#">Lorem Ipsum Post Title</a></h2>
<div class="met ad at a"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launches</a>, <a href="#
</div>
The CSS for this part is tricky since each post must be 50% width in reference to the page_content container,
plus the stripes should be in front of the picture. Well need to play around with relative positioning and
negative margins to make this happen.
.post{
float:left;
width:445px;
height:230px;
}
.post .post-image{
position:relative;
top:0px;
left:0px;
border:1px solid #FFB800;
}
.post h2{
position:relative;
top:-70px;
left:0px;
width:300px;
padding:5px;
padding-left:10px;

font-size:18px;
color:#680000;
background-color:#F2AA00;
}
.post h2 a{
color:#680000;
}
.post h2 a:hover{
color:#FFFFFF;
}
.post .metadata{
position:relative;
top:-70px;
left:0px;
width:250px;
padding:5px;
padding-left:10px;
font-size:13px;
background-color:#FFF;
border:1px solid #FFB800;
}
.post .metadata a{
color:#000;
}
26 of 43 09/09/2013 12:53 PM
.post .metadata a:hover{

color:#9C0000;
}
You should now have something like so:
Step 13 - Post Content Background and Position

Now, we will add a div which contains the post content.
<div class="post">
<img src="images/posts/01.jpg" class="post-image" />
<h2><a href="#">Lorem Ipsum Post Title</a></h2>
<div class="metadata"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launchs</a>, <a href="#">Lo
<div class="post_content">Post Content</div>

</div>
Slice the background image for the post_content div, and save it as a PNG file.
27 of 43 09/09/2013 12:53 PM
First, we will set its positioning in the CSS file.
.post .post_content{
position:relative;
top:-275px;
left:230px;
width:210px;
height:220px;
background-image:url(../images/bg-post-content.png);
background-position:top left;
}
Taking a look in the browser:
Step 14 Post Content

Lets add the containers for the post brief, post information and comments:
<div class="post_content">
<div class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la
</div>
28 of 43 09/09/2013 12:53 PM

</div>
</div>
</div>
And the styling to make everything look nice:
.post .post_content .post_brief{

width:150px;
height:98px;
overflow:hidden;
padding-left:35px;
padding-top:15px;
text-align:right;
color:#FFF;
}
.post .post_info{
width:150px;
margin-left:35px;
margin-top:8px;
padding-top:4px;
text-align:right;
border-top:1px solid #787878;
font-family:Tahoma, Geneva, sans-serif;

font-size:10px;
color:#787878;
}
.post .post_info a{
color:#787878;
}
.post .post_info a:hover{

color:#D8D8D8;
}
.post .post_comments{
width:50px;
margin-top:37px;
margin-left:56px;
text-align:center;
}
.post .post_comments a{
color:inherit;
}
.post .post_comments .number{

font-size:14px;
color:#FFF;
}
.post .post_comments .comments{

font-size:12px;
color:#F2AA00;
29 of 43 09/09/2013 12:53 PM
And we are done with the post!
Step 15 - Add More Posts

Lets go ahead and add more posts to your mockup. Duplicate this block for as many times as you want the
post div. You should get rid of the temporary height we put on the page_content div. If everything is was
executed correctly, the layout will increase its height as we add more posts to the homepage.
Step 16 Featured Post Content
30 of 43 09/09/2013 12:53 PM
Now that we have the basic post styling finished, lets style the featured post content. Remember how we
had the following code inside the bubble div?
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labo
</div>
</div>
</div>
Add the following CSS and replicate the bubble in all the slides of our rotating banner.
/* Post */
.featured_post .post_title{
height:29px;
padding-top:18px;
text-align:right;
font-size:18px;
color:#680000;
}
.featured_post .post_title a{
color:#680000;
}
.featured_post .post_title a:hover{

color:#FFFFFF;
}
.featured_post .post_brief{
height:67px;
padding-left:30px;
overflow:hidden;
text-align:right;
color:#1B1B1B;
}
.featured_post .post_info{
margin-left:30px;
text-align:right;
padding-top:2px;

font-size:10px;
color:#969696;
border-top:1px solid #FFC000;

}
.featured_post .post_info a{
color:#969696;
}
.featured_post .post_info a:hover{

color:#1B1B1B;
}
31 of 43 09/09/2013 12:53 PM
.featured_post .post_comments{
text-align:center;
float:right;
margin-top:20px;
margin-right:10px;
width:65px;
height:40px;
}
.featured_post .post_comments a{
color:inherit;
}
.featured_post .post_comments .number{

font-size:24px;
color:#FFF;
}
.featured_post .post_comments .comments{

font-size:14px;
color:#F2AA00;
}
/* // Post */
Ive also added a border and a box-shadow to the sliding image:

#slider li img{
border:1px solid #FFF;
height:248px;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);

-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
It should look like so:
Step 17 Footer Widgets
32 of 43 09/09/2013 12:53 PM
Instead of the classic sidebar, I wanted to add a widget ready footer. Add the following code inside the footer
div. Inside the sidebar, there will be another container named widget, and, inside that div:
a title
an unordered list and
a div for the curled corner
Well take care of the categories list first.
<div id="sidebar">
<div class="widget">
<h3>Categories</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipisicing elit</a></li>
<li><a href="#">Sed do eiusmod tempor</a></li>
<li><a href="#">Incididunt ut labore</a></li>
<li><a href="#">Et dolore magna aliqua</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
</ul>
<div class="corner"> </div>
</div>
<div class="widget">W2</div>
<div class="widget">W3</div>
</div>
Now in the PSD file, slice the corner, name it widget-curl and save the image for web as a JPG file. Again, slice
the tiny arrow next to the links, name it arrow and save it as a PNG file.
33 of 43 09/09/2013 12:53 PM
And edit the CSS file like so:
/*Footer*/
#footer{
width:940px;
padding-left:0px;
padding-right:10px;
padding-top:20px;
float:left;
background-image:url(../images/bg-footer.jpg);
}
/*End of Footer*/
/* Footer sidebar */
#sidebar{
float:left;
width:940px;
}
.widget{
float:left;
margin-left:10px;
margin-right:10px;
}
.widget h3{
color:#F2AA00;
34 of 43 09/09/2013 12:53 PM

font-size:14px;
padding-bottom:10px;
padding-left:10px;
}
.widget ul{
width:200px;
padding:20px 10px;
background-color:rgba(26,26,26,.5);
border:1px solid #252525;
border-radius: 5px;
}
.widget .corner{
background-image:url(../images/widget-curl.jpg);
background-position:bottom right;
height:30px;
margin-top:-30px;
margin-right:-2px;
}
.widget ul li{
font-size:16px;
padding-bottom:3px;
color:#FFF;
}
.widget ul li a{
padding-left:20px;
color:#FFF;
}
.widget ul li a:hover{
color:#DC0000;
background-image:url(../images/arrow.png);
background-position:0px 6px;
}
/* //Footer sidebar */
When tested in a browser, you should see something like the following image:
35 of 43 09/09/2013 12:53 PM
Step 18 More Widgets

Replicate the HTML code to add a second or even a third list widget. This time, we will add archives to the
footer. You can test the layout now adding several copies of the widget div to see how it looks. Optimally, the
footer area will increase as you add more widgets.


<h3>Archives</h3>
<ul>
<li><a href="#">January 2011</a></li>
<li><a href="#">February 2011</a></li>
<li><a href="#">March 2011</a></li>
<li><a href="#">May 2011</a></li>
<li><a href="#">June 2011</a></li>
<li><a href="#">July 2011</a></li>
</ul>
</div>

This is how it looks with the archives section added:
Step 19 Tabbed Pane

As an example of a more complex widget, lets add a tabbed pane with three different types of content in
each tab.
First, add the following HTML code as basic markup: an unordered list for the tabs, and divs with different
ids for the content. Im adding a general class, named tab to all the content divs in order to avoid duplicating
the code in the CSS file.
<div id="tabs">
<ul>
<li><a href="#tab-1">Popular Posts</a></li>
<li><a href="#tab-2">Recent Posts</a></li>
<li><a href="#tab-3">Recent Comments</a></li>
</ul>
<div class="tab" id="tab-1">
<p>Tab1</p>
</div>
<p>Tab2</p>
</div>
36 of 43 09/09/2013 12:53 PM

<p>Tab3</p>
</div>
</div>
</div>
Lets create a JavaScript document, named tabs.js, and save it in the /js folder. Include it by adding this line
to the <head> tag.
<script type="text/javascript" src="js/tabs.js"></script>
Now, add a basic jQuery tabbed pane by adding the following code to the tabs.js file.
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
With the JavaScript function working, lets add the styling to make it look pretty. First, well need to slice the
little arrow that points to the selected tab. Name it tab-arrow, and save it as a PNG.
Now add the following code to the CSS file:
/* Footer Tabbed Pane */

#tabs{
}
#tabs ul{
background:none;
border:0px;
padding:0px;
margin:0px;
width:428px;
min-height:30px;
height:30px;
border-radius: 0px;
}
#tabs ul li{
37 of 43 09/09/2013 12:53 PM
display:inline;
float:left;
text-align:left;
}
#tabs ul .active{
background-image:url(../images/tab-arrow.png);
background-position:bottom center;
}
#tabs ul .active a{
color:#F2AA00;
}
#tabs ul li a{
display:block;
margin:0px;
padding:0px;
color:#5A5A5A;

font-size:14px;
padding-bottom:10px;
padding-left:10px;
padding-right:20px;
}
#tabs ul li a:hover{
background-image:none;
color:#F2AA00;
}
#tabs .tab{
width:405px;
padding:20px 10px;
min-height:170px;
/*This is to get the arrow above the tab*/
margin-top:-6px;
background-color:rgba(26,26,26,.5);
border:1px solid #252525;
border-radius: 5px;
}
/* //Footer Tabbed Pane */
Now you should have the tabbed panel working; lets add the content inside!
38 of 43 09/09/2013 12:53 PM
Step 20 Tab Contents

Lets go ahead and add some content to the tab. Taking a look at the graphic, youll notice that we have a list
of three posts (latest and popular) with the title and a brief, and a pager at the bottom to navigate through
the posts.
Paste in the following code inside a tab:
<span class="item">
<h4><a href="#">John Doe</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>
</span>
<span class="item">
<h4><a href="#">Jane Smith</a></h4>
</span>
<span class="item">
<h4><a href="#">SpiderHuman</a></h4>
</span>
<span class="pager"><a href="#">«</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">&ra
And now the CSS:
/*Tabs Content*/
.tab .item{
float:left;
padding:5px 10px;
border-radius: 7px;
}
.tab .item:hover{
background-image: -moz-linear-gradient(left, #000000, #0D0D0D);

background-image: -webkit-gradient(linear, left, right, color-stop(0.00, #000000), color-stop(1.00, #0D0D0D));
}
.tab .item:hover h4 a{
color:#F2AA00;
}
.tab .item h4{

padding-bottom:3px;
color:#FFFFFF;

font-size:14px;
}
.tab .item h4 a{
color:#FFFFFF;
}
.tab .item h4 a:hover{

color:#F2AA00;
}
.tab .item p{
color:#909090;
39 of 43 09/09/2013 12:53 PM
font-size:15px;
}
.pager{
float:right;
text-align:right;
padding-right:40px;
}
.pager a{
color:#4A4848;
padding-left:5px;
}
.pager a:hover{
color:#F2AA00;
}
.pager a.active{
color:#D11300;
}
/* //Tabs Content*/
Replicate the HTML for each tab. This is how it should look:
Step 21 - Footer
Finally, add the footer navigation bar and the copyright information:
<div id="footer_content">
<ul id="footer_nav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<div id="copyright">Tuts+</div>
</div>
Now slice the 1px gradient line from the PSD file, name it "bg-footer-line" and save it as a JPG. Lastly, edit the
CSS to set everything up.
/* Footer Nav */
#footer_content{
float:left;
width:940px;
height:45px;
40 of 43 09/09/2013 12:53 PM
padding:10px;
margin-top:10px;
background-image:url(../images/bg-footer-line.jpg);

font-size:10px;
color:#515151;
}
#footer_nav{
#footer_nav li{
display:inline;
}
#footer_nav li:last-child a{
border-right:none;
}
#footer_nav li a{
color:#515151;
padding-right:5px;
border-right:1px solid #292929;
}
#footer_nav li a:hover{
color:#F2AA00;
}
#copyright{
float:right;
padding-right:30px;
}
Conclusion
41 of 43 09/09/2013 12:53 PM
And thats it! Were finished with the conversion process. The code here was tested in all major browsers. If
you need IE6 and 7 compatibility, it shouldnt be a big deal to write a few of fixes for them specifically. Our
design is now ready to be integrated into any CMS as a skin. Good luck and thank you so much for reading!
Tags: photoshop to htmlpsd to html
By Alvaro Guzman
This author has yet to write their bio.
42 of 43 09/09/2013 12:53 PM
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
43 of 43 09/09/2013 12:53 PM

Tutorial Psdtohtmlcss6

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Psdtohtmlcss6

Uploaded by

Copyright:

Available Formats

Create a Comic Book Themed Web Design, Photoshop to HTM... http://net.tutsplus.com/tutorials/site-builds/create-a-comic-bo...

Create a Comic Book Themed Web

Topics: HTML, CSS

Final Product What You'll Be Creating

Step 1 - HTML Layout

The contents of these folders should be fairly self explanatory.

Following the HTML code for this step:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And the CSS:

/* HTML5 display-role reset for older browsers */

Step 2 - Basic CSS Layout

Step 3 Slice the Header and Content

Lets move forward with the content banner.

And the CSS code to make them look right:

Now you should have something like so:

Step 4 Top Navigation

Step 5 Font Replacement

font-family:'KomikaTextTightRegular', Arial, Helvetica, sans-serif;

And you can test the result in the browser:

Step 6 Styling the top Navigation

text-shadow:2px 2px 2px rgba(0,0,0,.5);

Your page should like so at this stage of development:

Step 7 - Header Content

And some necessary styles:

When tested in the browser:

Step 8 - Search Bar

And the styling to make it look nice:

border:1px solid #7C0000;

That should give us:

Step 9 Social Media Links

And on the stylesheet:

text-shadow:2px 2px 2px rgba(0,0,0,.5);

Step 10 - Sliding Banner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And heres the CSS

At this point you should have something like this:

Adjust positioning and replace the arrows

Heres the modified CSS:

And the result in the browser:

Merge with the Main Template File

<script type="text/javascript" src="js/jquery.js"></script>

And the complete CSS to make the banner work

background:url(../images/btn-next.png) no-repeat right;

Step 11 Content Wrapper and Background

What our page should look like, at this point:

Step 12 Post Image and Title

font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;

.post .metadata a:hover{

You should now have something like so:

Step 13 - Post Content Background and Position

<div class="post_content">Post Content</div>

First, we will set its positioning in the CSS file.

Taking a look in the browser:

Step 14 Post Content

<span class="author">Posted by <a href="#">Admin</a></span>,

And the styling to make everything look nice:

.post .post_content .post_brief{

border-top:1px solid #787878;

font-family:Tahoma, Geneva, sans-serif;

.post .post_info a:hover{

.post .post_comments .number{

.post .post_comments .comments{

And we are done with the post!

<span class="pager"><a href="#">«</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">&ra