Tự thiết kế một website chuyên nghiệp bằng Photoshop và cách mã hóa.

Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường Line 1px để tạo chiều sâu một cách tinh tế cho website.

Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS.

Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp.

Kết quả cuối cùng
______________________________________________________________________________________


Bên dưới là kết quả từ sự nỗ lực của chúng tôi, một bố cục web gọn đẹp, chuyên nghiệp.
Demo: http://wegraphics.net/demo/item/download-movie-tut/










Quá trình thực hiện
______________________________________________________________________________________


Tôi khuyên bạn nên phác thảo trước khi thiết kế web bằng cách sử dụng Photoshop, nó là bước quan trọng đầu tiên. Hãy vẽ toàn bộ bố cục trang web của bạn ra một tờ giấy để ghi nhớ vị trí và đặc điểm của toàn bộ các đối tượng (các cột,Button, Module, Slider…)
Dưới đây là bản phác thảo cho “dự án” website của tôi, mang tên Download.Movie.






Bước 1: Tài Liệu (Document)

Chúng ta hãy bắt đầu với Photoshop. Đầu tiên, tạo một file có kích thước 1024×1200 pixels với độ phân giải 72 pixels/inch, nền trong suốt. Nhập mẫu 960 grid (12 Col Grid), nó rất hữu dụng để tạo website trong khoảng 960 pixels.

Bước 2: Tạo phông nền (Background)

Tạo vùng lựa chọn (dùng the Selection Tool) kéo hết toàn bộ tài liệu, tạo một layer mới đặt tên là ‘background’, tô màu #f9f9f9 cho vùng lựa chọn (Alt+Backspace), sau đó khóa layer này lại. Tạo layer mới đặt tên là ‘Top’. Dùng Rectangle Marquee Tool tạo một hình chữ nhật ở đầu trang (chiều cao khoảng 270 pixels, màu #29729f). Vào Blending Options, tick vào Gradient Overlay, đặt Blend Mode thành Soft Light, Scale 150%.







Duplicate layer ‘Top’, tạo thêm 1 layer mới, nhấn Ctrl+Click vào ‘Top’ à Ctrl+E. Đặt tên lại cho Layer vừa gộp là ‘Top’.
Vào Filter Filter>Noise>Add Noise.







Tạo Layer mới đặt tên là ‘Login’ Dùng Rectangle Marquee Tool tạo một biên ngang trên Top chiều cao 5px, tô màu #162850, sau đó dùng Rounded Rectangle Tool tạo một ô nhỏ gần góc phải của ‘Top’, cũng tô màu #162850.








Tạo chiều sâu cho vùng này bằng cách dùng Drop Shadow như hình:






Bước 3: Logo

Chúng ta sẽ đặt một Logo ở vùng top-left của web.
Để tạo hiệu ứng soft light cho Background, bạn có thể sử dụng công cụ Elliptical Marquee Tool tạo một hình Elip màu trắng, sau đó Add Gaussian Blur cho nó là 40px , chỉnh lại Opacity cho phù hợp. (Mục đích để làm sáng nhẹ vùng Logo). Tạo tiếp một elip dẹt, làm mờ nhẹ và Opacity là 20%.








Tạo thêm 3 hình elip (mỗi hình 1 layer), đặt fill là 0% (fill chỉnh ở khung Layer), thêm Gradient Overlay cho mỗi elip như hình bên dưới.



Bây giờ là phần việc thiết kế logo, hãy sử dụng trí tưởng tượng của bạn. Ở đây tôi sẽ dùng một số Shape có sẵn trong PTS.
Dùng Rounded Rectangle Tool vẽ một hình vuông nhỏ (giữ nút shift trong khi kéo nó mới ra hình vuông). Tiếp tục dùng Custome Shape Tool vẽ một mũi tên nhỏ.
Rasterize 2 Layer này, sau đó dùng hình mũi tên để cắt nó ra khỏi hình vuông. Nhớ xoay hình vừa cắt một tí cho đẹp.






Thêm Style cho hình trên như sau:







Bây giờ dùng Type Tool (T) viết tên công ty (hoặc cái gì bạn thích), add style giống như style vừa dùng với icon ở trên.



Công đoạn cuối cùng để hoàn tất Header cho website là thêm Menu và khung Login/Signup. Dùng Type Tool và thêm Drop Shadow nhẹ cho text.




Bước 4: Down-Header

Dùng Rounded Rectangle Tool vẽ một hình chữ nhật lớn dưới Logo, thêm Drop Shadow nhẹ, sau đó đặt một bức ảnh bạn thích vào trong.







Bây giờ, chúng ta sẽ tiến hành tạo phần bên phải silder
Tạo một hình chữ nhật phía bên phải, đặt Fill là 0% và add style Gradient Overlay và Drop Shadow, chi tiết bên dưới.








Thêm text vào (thích ghi gì cũng được), có thể dùng Font Dejavu Sans (30 pt, trắng) cho tiêu đề và font Lucida Sans (12 pt, #0b537f) cho văn bản bên dưới. Vẽ tiếp một hình chữ nhật biên mềm bằng cách dùng Rounded Rectangular Tool (radius 2px, color #6fc630), nhấn Ctrl+T và xoay nó một tí, cuối cùng ta thêm một lớp mặt nạ, sẽ cho ra kết quả sau.
Nhắc nhỏ: Luuv thấy chỗ Layer Mask không cần thiết mà lại dễ gây khó hiểu nhưng tôn trọng tác giả bài viết Luuv sẽ để y nguyên như vậy, nếu bạn nào không làm được bước này có thể comment bên dưới, Luuv sẽ giải thích thêm.






Add style cho khối màu xanh như hình








Tiếp theo, ta sẽ thêm 2 nút phía bên dưới, màu cam và màu xanh, vẫn tiếp tục với công cụ Rectangle Tool (M)… Thêm Bevel and Emboss và Gradient Overlay để làm cho chúng trở nên chuyên nghiệp hơn.







Làm tương tự cho nút còn lại.






Thêm text cho các nút, thêm một tí Gradient Overlay (dùng màu xanh cho nút màu xanh và tương tự cho nút màu cam) và Drop Shadow nhẹ, tinh tế cho text để tạo hiệu ứng như sau:






Bước 5: Nội dung

Phần này là cốt lõi trong cách bố trí của chúng tôi, nơi khách vào web có thể dễ dàng tìm thấy thông tin hữu ích. Chúng tôi muốn xây dựng cách bố trí hai cột đơn giản với một số hình ảnh và mô tả, dưới đây là kết quả chúng tôi muốn hướng đến.






Tôi không muốn làm phiền bạn với những thứ không cần thiết. Rõ ràng là bạn có thể sử dụng những kĩ thuật mà bạn đã sử dụng trong phần Header để nhận ra các đối tượng trong phần này. Một vài ví dụ ư? 2 ảnh chụp trong mục “Coming soon on Download.Movie” được thực hiện bằng cách sử dụng các bước tương tự mà chúng tôiđã tiến hành ở phần down-header, chỉ có duy nhất một điểm khác biệt đó là: bạn phải add Color Overlay (từ Styles; màu đen, Opacity 30%). Nút ‘play’ được ghép từ 2 thành phần giống như Logo. Sau đó bạn phải thêm Drop Shadow màu đen 70%. Một lần nữa, để làm nút ‘read more’ bạn phải nhớ những gì chúng ta đã thực hiện với 2 nút màu xanh và cam ở trên, bây giờ thay vì màu cam, xanh lá và xanh lam, hãy sử dụng màu xám.






Bước 6: Footer (Chân trang)

Thêm 3 hình chữ nhật (ở trên và dưới màu #cfdcf8, ở giữa là #162850) như hình.






Thêm hiệu ứng Gradient Overlay nhẹ cho Layer màu xanh lục sau đó Rasterize toàn bộ các Layer --> Add Noise.






Cuối cùng là tạo danh sách một số link cần thiết. Để tạo chấm nhỏ trước mỗi link, bạn chỉ cần sử dụng Ellipse Tool, giữ Shift và kéo thành một vòng tròn nhỏ, tô màu #cfdcf8 cho nó và chỉnh lại độ Opacity xuống còn 20%. Duplicate để tạo ra nhiều chấm hơn.
Chúng ta cần phải tạo thêm mô tả mục (description box), cách làm nút Read more tương tự như cách đã giới thiệu ở phần trước, chọn font Lucida Sans. Cuối cùng là thêm Copyright ở dưới cùng.

Chuyển từ PSD sang HTML/CSS

Bây giờ chính là lúc xây dựng cấu trúc HTML/CSS, hãy nhìn vào hình bên dưới để hình dung cấu trúc chính của website.





Bước 7: Cấu trúc HTML

Trước hết chúng ta cần tạo 2 file trắng: index.html và style.css. Sau đó, bằng cách sử dụng trình soạn thảo văn bản yêu thích của chúng tôi (tôi viết code của tôi thông qua Notepad), chúng ta có thể khởi tạo tài liệu HTML dưới dạng Doctype, Head và Body.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>

</body>
</html>

Bây giờ, theo cấu trúc mô tả ở hình trên, chúng ta có thể viết cấu trúc cơ bản của html.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

<div id="top_background">

<div class="main_container">

    <div class="top_bar">

    </div>

    <div class="header">

    </div>

    <div class="main_box">
        <div class="slide">
        </div>

        <div class="tagline">

        </div>  

        <div class="content">

            <div class="left_content">

            </div>

            <div class="right_content">

            </div>

        </div>

    </div>

</div>

</div>

<div class="footer">

</div>

</body>
</html>

Thêm phần Reset vào style.css như sau:

Code:

/* CSS Reset */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ol, ul { list-style: none; }

:focus { outline: 0; }

Bước 8: Background, Top-bar và Header



Xuất các hình sau ra khỏi file PSD để tạo Header cho web như kế hoạch.










Việc đánh dấu cho Top-bar và phần Header, chúng tôi sẽ sử dụng các list ngẫu nhiên cho menu và tag h1 cho Logo.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

<div id="top_background">

<div class="main_container">

    <div class="top_bar">
        <ul class="login">
            <li><a href="#">login |</a></li>
            <li><a href="#">sign-up</a></li>
        </ul>
    </div>

    <div class="header">
        <div class="logo">
            <h1><a href="#">Download.Movie</a></h1>
        </div>

        <ul class="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Support</a></li>
        </ul>
    </div>

    <div class="main_box">
        <div class="slide">
        </div>

        <div class="tagline">

        </div>  

        <div class="content">

            <div class="left_content">

            </div>

            <div class="right_content">

            </div>

        </div>

    </div>

</div>

</div>

<div class="footer">

</div>

</body>
</html>

Thêm vào style.css đoạn Code sau. Lưu ý rằng ta sẽ import font Dejavu để sử dụng cho phần down-header.

Code:

* General */

@font-face { font-family: 'DejaVuSansCondensedBook'; src:  url('DejaVuSansCondensed-webfont.ttf') format('truetype'); }

body { background: #f9f9f9; font: 12px "Lucida Sans Unicode", sans-serif; line-height: 1.5em; color: #555; }

a { text-decoration: none; }

#top_background { background: url(images/top_bck.jpg) repeat-x; }

.main_container  { margin: 0 auto; width: 960px;  background: url(images/logo_bck.png) no-repeat; }

/* Main-container classes */

.top_bar { float: right; position: relative; top: 0px; right: -11px; width: 101px; height: 24px; background: url(images/login_bck.jpg) no-repeat; padding-left: 11px; }

    ul.login li { display: inline; padding-left: 2px;  }
    ul.login li a { color: #f2f2f2; font-size: 10px; }
    ul.login li a:hover { color: #89c0dd; }

.header { clear: both; height: 80px; margin-bottom: 53px; }
    .logo { float: left }
    .logo h1 a { display: block; width: 345px; height: 50px; background: url(images/logo.png) no-repeat; text-indent: -9999px; margin: 16px 0 0 40px; }

    ul.navigation { float: right; margin: 30px 40px 0 0; }
    ul.navigation li { display: inline; margin-left: 30px; }
    ul.navigation li a { color: #fff; font-size: 14px; text-shadow: 1px 1px 0px #155479; }
    ul.navigation li a:hover { text-decoration: underline; }

Bước 9: Main-box, down-header và contents



Bây giờ, ta sẽ thêm vào phần down-header một Slider (trình diễn ảnh). Để tạo được một silder đẹp, chúng tôi sử dụng plugin gọi là Cycle.

Đầu tiên ta tải jQuery plugin về máy và tạo file ‘jquery.cycle.lite.min.js’

Mách nhỏ: Tức là mình sẽ tạo một Folder tên là Template, tiếp tục tạo một Text Document mới tên là jquery.cycle.lite.min.txt, sau đó Paste toàn bộ nội dung của file jQuery (vừa tải về lúc nãy) vào, đổi lại định dạng tệp là jquery.cycle.lite.min.js.

Tiếp theo, tải một file jQuery nữa về máy và tạo file jquery.js. Thêm vào index.html đoạn code sau:

Code:

<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.cycle.lite.min.js"></script>
</head>

Đối với các thành phần trong main-box ta sẽ sử dụng các hình sau (xuất hình ra khỏi PSD).









Viết lại cấu trúc của phần main-box như sau:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

<div id="top_background">

<div class="main_container">

    <div class="top_bar">
        <ul class="login">
            <li><a href="#">login |</a></li>
            <li><a href="#">sign-up</a></li>
        </ul>
    </div>

    <div class="header">
        <div class="logo">
            <h1><a href="#">Download.Movie</a></h1>
        </div>

        <ul class="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Support</a></li>
        </ul>
    </div>

    <div class="main_box">
        <div class="slide">
            <img src="images/screenshot1.jpg" alt="screenshot" />
            <img src="images/screenshot1_2.jpg" alt="screenshot" />
            <img src="images/screenshot1_3.jpg" alt="screenshot" />
        </div>

        <div class="tagline">
            <h2>The best way to watch your favourite movies</h2>
            <span class="know_more_green"><a href="#"></a></span>
            <p>The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management.</p>
            <span class="cta_browse"><a href="#"></a></span>
            <span class="cta_signup"><a href="#"></a></span>
        </div>  

        <div class="content">

            <div class="left_content">
                <h3>Featured entries this week</h3>
                <p>We want to provide only high-quality DVD movies to our members. High-quality,
easy-to-find: the best of the week.</p>
                <ul>
                    <li><img src="images/screenshot2.jpg" alt="screenshot" /><h4 class="orange"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house</p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li>
                    <li><img src="images/screenshot3.jpg" alt="screenshot" /><h4 class="green"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house</p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li>
                    <li><img src="images/screenshot4.jpg" alt="screenshot" /><h4 class="cyan"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house. </p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li>
                </ul>
            </div>

            <div class="right_content">

                <h3>Featured entries this week</h3>
                <div class="box_trailer">
                    <a href="#"><img src="images/screenshot5.jpg" alt="screenshot" /></a>
                    <span class="meta_info meta_orange">action | 12.04.2010</span>
                    <h4 class="orange"><a href="#">A new movie is coming on our website</a></h4>
                    <p>Rumpelstiltskin tricks a mid-life crisis burdened Sdrok into allowing himself to be erased from
existence and cast in a dark alternate...</p>
                    <span class="trailer_more"><a href="#"></a></span>
                </div>

                <div class="box_trailer">
                    <a href="#"><img src="images/screenshot6.jpg" alt="screenshot" /></a>
                    <span class="meta_info meta_green">drama | 12.04.2010</span>
                    <h4 class="green"><a href="#">Another movie downloadable</a></h4>
                    <p>Work causes a single mother to move to China with her young son; in his new home, the boy embraces kung fu, taught to him by a master.</p>
                    <span class="trailer_more"><a href="#"></a></span>
                </div>

            </div>

        </div>

    </div>

</div>

</div>

<div class="footer">

</div>

</body>
</html>

Bây giờ, thêm vào index.html đoạn java sau để kích hoạt Slider (Nhớ đặt trước tag /body)

Code:

<script type="text/javascript">
$(document).ready(function() {
    $('.slide').cycle({
        fx: 'fade',
        speed:  1500,
        timeout: 4500
    });
});
</script>

Còn đây là phần style cho main-box:

Code:

.main_box { clear: both; }

    .slide { background: #fff; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -khtml-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -webkit-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); width: 560px; height: 274px; display: block; float: left; margin-bottom: 40px; }
    .slide img { padding: 10px; }

    .tagline { background: url(images/slog_bck.png) no-repeat; float: left; width: 370px; margin: 25px 0 0 30px; }
    .tagline h2 { font-family: 'DejaVuSansCondensedBook'; color: #fff; text-shadow: 1px 1px 0px #0f334f; font-size: 23px; line-height: 26px; font-weight: normal; letter-spacing: -1px; width: 300px; padding: 10px;}
    .tagline p { margin-top: 40px; padding-left: 10px; color: #0b537f; }

    .know_more_green a { float: right; display: block; position: relative; top: -55px; right: -6px; width: 86px; height: 74px; background: url(images/know_more_green.png) no-repeat; }

    .cta_browse a { display: block; width: 168px; height: 56px; background: url(images/cta_blu.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0 10px;}
    .cta_browse a:hover { background-position: 0px -56px; }
    .cta_signup a { display: block; width: 168px; height: 56px; background: url(images/cta_orange.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0 24px; }
    .cta_signup a:hover { background-position: 0px -56px; }

    .content { clear: both; overflow:auto; margin-bottom: 20px; }

        .left_content { width: 280px; float: left; }

        .orange a { color: #ed7d0f; }
        .green a { color: #5a9e28;}
        .cyan  a { color: #28819e; }
        .orange a:hover { color: #ff9e05; text-decoration: underline; }
        .green a:hover { color: #74d82b; text-decoration: underline; }
        .cyan  a:hover { color: #2fb4e0; text-decoration: underline; }

        .content h3 { font-size: 20px; color: #0b537f; font-weight: normal; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; margin-bottom: 20px; }
        .left_content ul { margin-top: 25px; }
        .left_content ul li  { border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 15px; font-size: 11px; line-height: 16px; color: #757474; }
        .left_content ul li img { float: left; margin-right: 10px; }
        span.details { font-size: 10px; color: #a8a8a8;  }
        span.details a { color: #333; }
        span.details a:hover { text-decoration: underline; }

        .right_content { width: 630px; float: left; margin-left: 50px; }

        .box_trailer { clear: both; }
        .box_trailer img { background: #fefefe; padding: 5px; -moz-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -khtml-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -webkit-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); float: left; z-index: 100; position: relative; margin: 0 15px 30px 0; }
        span.meta_info { padding: 1px 6px; color: #fefefe; z-index: 99; margin-top: 18px; position: relative; top: 8px; left: -15px; font-size: 10px; }
        .meta_green { background: #5a9e28; }
        .meta_orange { background: #ed7d0f; }
        .box_trailer h4 { font-size: 16px; font-weight: normal; margin: 20px 0 10px 0; }
        span.trailer_more a { display: block; width: 83px; height: 19px; background: url(images/more.jpg) no-repeat 0px 0px; float: right; margin-top: 10px; }
        span.trailer_more a:hover { background-position: 0px -19px; }

Bước 10: Footer (chân trang)


Công việc cuối cùng là viết cấu trúc cho phần footer. Xuất hình sau ra khỏi file PSD.





Cấu trúc:

Code:

<div class="footer">

    <div class="foot_cont">
        <div class="foot_col">
            <h3>Resources for you</h3>
            <ul>
                <li><a href="#">Browse our database</a></li>
                <li><a href="#">Read our magazine</a></li>
                <li><a href="#">Job opportunities</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </div>

        <div class="foot_col">
            <h3>Our network</h3>
            <ul>
                <li><a href="#">Download.TvSeries</a></li>
                <li><a href="#">Download.Music</a></li>
                <li><a href="#">Download.Book</a></li>
                <li><a href="#">Download.Apps</a></li>
                <li><a href="#">Download.Games</a></li>
            </ul>
        </div>

        <div class="foot_col">
            <h3>Connect with us</h3>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">FriendFeed</a></li>
            </ul>
        </div>

        <div class="foot_col last_col">
            <h3>Our mission</h3>
            <p>We want to provide only hidh-quality DVD movies to our members.
High-quality, easy-to-find: the best of the week.</p>
            <span class="about_but"><a href="#">Read more about us</a></span>
        </div>
    </div>

    <div class="credits">
        <p>by WeGraphics - Copyright © 2010. A premium template.</p>
    </div>

</div>

Style:

Code:

/* Footer */

.footer { background: url(images/foot_bck.jpg) repeat-x; clear: both; }  

        .foot_cont { height: 218px; margin: 0 auto; width: 960px; }

            .foot_col { float: left; width: 220px; margin: 45px 20px 0 0; }
            .last_col  { margin-right: 0px; width: 240px; }
            .foot_col h3 { color: #cfdcf8; font-size: 14px; font-weight: normal; }
            .foot_col ul { margin: 10px 0 0 10px; }
            .foot_col ul li { padding: 4px 0 4px 20px; background: url(images/list.png) no-repeat 0px 7px; }
            .foot_col ul li a { color: #f1f3f8; font-size: 12px; }
            .foot_col ul li a:hover  { color: #89c0dd; }
            .foot_col p { color: #f1f3f8; margin-top: 10px; }

            span.about_but a { color: #cfdcf8; padding: 2px 5px; background: #3e5077; -moz-border-radius: 3px; margin-top: 10px; float: right; font-size: 10px;}
            span.about_but a:hover { background: #4e6188; color: #fff; }

        .credits { clear: both; background: #cfdcf8; margin-top: 20px; }
        .credits  p { text-align: center; font-size: 11px; color: #1c3059; padding: 8px; }

Vất vả nhỉ các bạn, công việc cuối cùng là tận hưởng kết quả ^^
Bài viết được dịch bởi Jackpaker90

Nguồn: http://wegraphics.net/blog/tutorial...clean-web-layout-with-psd-to-html-conversion/