Create a Comic Book Themed Web Design, Photoshop to HTML + CSS (Part 2)

A couple weeks ago, we learned how to create a comic book theme web design over at our sister-site, Webdesigntuts+. Today, we'll tackle the second part: it's time to slice the design and turn it into a functional HTML layout, ready to be ported to any CMS. Let's 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 isn't 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

Let's start by creating the work folder; since this tutorial doesn't 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. I'm 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. I'm using Eric Meyer's but feel free to start with your favorite.

Following the HTML code for this step:

And the CSS:

Testing the code in Firefox, you should see something like this:

Step 2 - Basic CSS Layout

Let's style the layout's 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.

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).

Now that you have the background images, let's 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.

Testing in a browser, you should have something like the image below.

Step 3 - Slice the Header and Content Background Images

Now that you know how to slice the image, let's 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 I'm 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.

Let's 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 banner's background named bg-banner and another small one for the page curl named content-page-curl. Then save them both of them as JPEGs.

Add a new div named logo inside the "header" and another div named top-banner inside content to our HTML file.

And the CSS code to make them look right:

Now you should have something like so:

Step 4 - Top Navigation

Let's add the HTML for the top navigation. Add the following code inside the header div, below the logo.

The hardest work with this div will be the positioning. We'll make it float right, and play with the padding to fit it in its proper place. Add the following CSS:

Step 5 - Font Replacement

Since I don't have any intention of using "Comic Sans" for this design, we will use a more interesting typeface. We'll 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:

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:

And you can test the result in the browser:

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, let's 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.

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. Let's start by creating the container box in HTML and adding the following div inside the header div.

And some necessary styles:

When tested in the browser:

Step 8 - Search Bar

Next, we'll begin styling the search area. It's basically a form with an input box and a button (see step 3). For this, add the following code inside the "header-content div:

And the styling to make it look nice:

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. I'm using Social Media Icon Pack by Komodo Media

And on the stylesheet:

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:

And here's the CSS

At this point you should have something like this:

Don't 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

Which produces:


Now, we'll set the positioning, width and height of all the banner related divs. We'll also fix the JS library to avoid any problem regarding the additional bubble div.

Here's the modified CSS:

And the result in the browser:

Bubble Background

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.

Here is how it looks in the browser; remove all the temporary background colors if you wish.

Post Content

To finish the banner section, let's add the HTML for the post content.

Merge with the Main Template File

It's time to merge the separate module with our main document.

First, copy the banner's /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:

And add the banner divs accordingly inside the top_banner div.

And the complete CSS to make the banner work

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.

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.

What our page should look like, at this point:

Step 12 - Post Image and Title

Let's 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. Let's 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.

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. We'll need to play around with relative positioning and negative margins to make this happen.

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.

Slice the background image for the post_content div, and save it as a PNG file.

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

Taking a look in the browser:

Step 14 - Post Content

Let's add the containers for the post brief, post information and comments:

And the styling to make everything look nice:

And we are done with the post!

Step 15 - Add More Posts

Let's 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

Now that we have the basic post styling finished, let's style the featured post content. Remember how we had the following code inside the bubble div?

Add the following CSS and replicate the bubble in all the slides of our rotating banner.

I've also added a border and a box-shadow to the sliding image:

It should look like so:

Step 17 - Footer Widgets

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

We'll take care of the categories list first.

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.

And edit the CSS file like so:

When tested in a browser, you should see something like the following image:

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.

This is how it looks with the archives section added:

Step 19 - Tabbed Pane

As an example of a more complex widget, let's 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. I'm adding a general class, named tab to all the content divs in order to avoid duplicating the code in the CSS file.

Let's create a JavaScript document, named tabs.js, and save it in the /js folder. Include it by adding this line to the <head> tag.

Now, add a basic jQuery tabbed pane by adding the following code to the tabs.js file.

With the JavaScript function working, let's add the styling to make it look pretty. First, we'll 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:

Now you should have the tabbed panel working; let's add the content inside!

Step 20 - Tab Contents

Let's go ahead and add some content to the tab. Taking a look at the graphic, you'll 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:

And now the CSS:

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:

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.



And that's it! We're finished with the conversion process. The code here was tested in all major browsers. If you need IE6 and 7 compatibility, it shouldn't 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!



Related Articles